Loading...
 
Skip to main content
(Cached)

Color Modes in Tiki

As described on Initial Implementation of Color Modes in Tiki, color modes have been a Tiki feature since version 26. This page describes them from the perspective of the theming of the Tiki website.

Supporting color modes when creating or updating a Tiki theme

By default, Tiki supports light and dark color modes as provided by Bootstrap. Each theme in the Tiki package has a copy of the Bootstrap SCSS partial _variables-dark.scss , which is used to provide dark versions of the theme colors. If this file is used unedited, the dark version will have the default Bootstrap dark mode appearance. This does the job of providing a dark mode, but lacks any theme character. An easy modification is to change the dark-mode link color to better match the theme style, just be careful to meet color contrast standards for good accessibility.

Pre-color-modes, color values were input as hex code, etc. in places like _tiki-selectors.scss, or used as SCSS variable that declared a specific color. Now this should be avoided if the theme supports, for example, dark color mode. Instead of using a color designation like this, it's recommended to use a Bootstrap or Tiki CSS variable that has values declared for both light and dark modes. (Examples are hopefully coming soon.)

(Some dark themes in the Tiki package, like Ohia, don't support dark color mode since they are already dark. Another dark theme, Tikicorp, was previously a dark theme but for Tiki 29 its default mode became light, and aspects of the original design were reimplemented as a dark mode, so there are various ways to handle this styling opportunity.)

Using the Color Mode Settings feature

Tiki's color modes support has been getting regular enhancements over the past few years. Not only can themes have color mode information as part of their styling, but the Tiki site now can also create new color modes via the color mode settings interface. The most important color CSS variables can be selected via a user interface and the set can be saved as a named color mode. This name will appear in the color mode switch (activated by the Switch Color Mode module). The site admin can also specify, on tiki-admin.php?page=look&cookietab=2&highlight=theme_default_color_mode, which color mode is the default for the site, which means a combination of a theme and its dark color mode could be the site default, or of course a custom mode created via Color Mode Settings could be.



Page last modified on Monday 04 of August, 2025 07:09:51 UTC : Initial version
Collapse/expand modules below