Theme Customization

Theme can be customized in a bunch of ways, from simpler CSS overrides to more advanced hugo template overrides. Below are some of the most common ways to customize the theme.

theme.scss override#

The simplest way to customize the theme is to override assets/css/theme.scss file.

/* Theme colors */
:root {
   /* Color palette */
    --color-bg: #fcfcfc;
    --color-border: #222222;
    --color-text: #222222;
    --color-text-muted: color-mix(in srgb, var(--color-text) 70%, transparent);;
    --color-link: #0000ee;
    --color-accent: #01827c;
    --color-surface: color-mix(in srgb, var(--color-accent) 20%, transparent);

    /* Typography */
    --font-family-body: 'Verdana', 'Arial';
    --font-family-heading: 'Verdana', 'Arial';
    --font-family-code: 'Menlo', 'Consolas', 'Monospace';

    /* 
       this actually has a lot more variables, 
       it has been truncated for brevity 
    */
}

All Supported CSS Variables#

The theme defines a comprehensive set of CSS custom properties in assets/css/theme.scss. The table below reflects the variables that are actually declared in the current version of the file. (Because the list can grow over time you can always open theme.scss directly if you need to update this documentation.)

Default Chroma Syntax Highlighting Styles#

Codeblocks are themed using chroma highlighting, this theme uses following chroma themes for light and dark mode respectively:

• Light mode: solarized-light
• Dark mode: solarized-dark256

If you have not created it already then create this folder assets/css/chroma in your Hugo site and generate custom chroma themes using below command:

hugo gen chromastyles --style=solarized-light > assets/css/chroma/light.css
hugo gen chromastyles --style=solarized-dark256 > assets/css/chroma/dark.css

Replace solarized-light and solarized-dark256 with any other chroma themes of your choice, you can find the full list of available chroma themes here: https://xyproto.github.io/splash/docs/all.html .

Custom Layouts Supported#

This theme supports following custom layouts that you can use by adding layout: <layout-name> in front matter of your content files.

└── content
    ├── _index.md                        -- home page
    ├── components
    │   ├── _index.md                    -- section page (for components section)
    │   ├── elements
    │   │   ├── _index.md                -- section page (for elements section)
    │   │   ├── blockquote.md            -- regular page (for blockquote component)
    │   │   ├── image
    │   │   │   ├── index.md             -- regular page (for image component)
    │   │   │   └── karigurashi002.jpg
    │   │   └── table.md                 -- regular page (for table component)
    │   └── shortcodes
    │       ├── _index.md                -- section page (for shortcodes section)
    │       └── icons.md                 -- regular page (for icons shortcode)
    └── guide
        ├── _index.md                    -- section page (for guide section)
        ├── theme_customization.md       -- regular page (for theme customization guide)
        └── widgets.md                   -- regular page (for widgets guide)