Colors

Brand your website with your colors and captivate your audience.

---

Shibuya supports an easy way of customizations to colors via settings and CSS variables.

Accent colors

Shibuya provides pre-defined accent colors using Radix Colors, you can choose from the colors bellow:

conf.py

html_theme_options = {
  "accent_color": "violet",
}

Hint

Click each color block for previewing.

Your own color

If the predefined radix colors do not align with your branding, you can further customize them using CSS variables like --accent-9. Begin by selecting a color that closely resembles your branding from the provided radix colors, such as “blue”:

conf.py

html_theme_options = {
  "accent_color": "blue",
}

However, the provided “blue” may not perfectly match your branding blue. In such cases, you may need to adjust its color. Typically, updating --accent-9 is sufficient, as it is the most commonly used accent color.

custom.css

html[data-accent-color='blue'] {
  --accent-9: #3e7fcb;
}

If desired, you can also customize other accent colors. Below are the CSS variables utilized by the Shibuya theme:

--accent-a2: rgba(62, 127, 203, 0.15)
--accent-a3: rgba(62, 127, 203, 0.27)
--accent-a9: rgba(62, 127, 203, 0.81)
--accent-a11: rgba(62, 127, 203, 0.92)

Dark code

By default, code blocks in light theme will be decorated with a light background. But it is possible to use the dark code mode in the light mode. To turn all code blocks into dark mode, you can update dark_code in html_theme_options:

html_theme_options = {
    "dark_code": True,
}

There is also a page level configuration via :dark_code: meta tag. If you don’t want to enable it for the whole site, you can use the meta tag.

Color mode

Shibuya theme provides both light and dark modes, allowing users to switch between them based on their preference. By default, the theme uses the “auto” mode, which respects the operating system’s settings. However, you have the option to force the use of either light or dark mode by adjusting the settings in conf.py:

html_theme_options = {
    "color_mode": "dark",
}

Choices are: auto, light, dark.