Tiki 26 uses Bootstrap 5.3, which introduces color modes, the ability to have web pages respond to the browser color preference, if set, and to the user choice by means of a switch on the page. Because the color modes are using CSS custom properties (CSS variables), the color change is instant — no need for a page refresh. Themes made for previous versions of Tiki need some specific updating to take advantage of this feature.
For background, see https://getbootstrap.com/docs/5.3/customize/color/ and https://getbootstrap.com/docs/5.3/customize/color-modes/. For more about CSS variables, please see CSS Variables in Tiki.
To update a theme for Bootstrap 5.3 and color modes, these steps are suggested. This is what was done to update the themes in the Tiki package.
@import "../../base_files/scss/_tiki-pagetop_colors.scss";
after the import statement for ../../base_files/scss/_tiki-selectors.scss.
With the new files added and their import statements added, the next step is to compile the theme, but there will be errors due to undefined variables. These are variables that typically need to be in the variables.scss file and properly defined:
New variable name | Default value | Variables file section | Used for |
$link-shade-percentage | 20% | Links | Calculation of hover color relative to link color (this is the default, replacing the specifying of a hover color). |
$code-color | $body-color (was $pink) | Code | The text color of code examples, etc. Many of Tiki's packaged themes didn't have this specified but it's necessary. |
$pink | #d63384 | Color system (formerly Colors) | Needed for $code-color (if $code-color: $pink). UPDATE: The default code color was changed from pink to whatever the theme's body color ($body-color) is, so $pink no longer needs to be present or defined. |
$green-300 | tint-color($green, 40%) | Color system | Form validation text - valid |
$green | #198754 | Color system | Needed for $green-300. |
$red-300 | tint-color($red, 40%) | Color system | Form validation text - invalid |
$red | #dc3545 | Color system | Needed for $red-300. |
The theme should compile after all these variables are in the theme's variables file.
For more complete color mode switching, these variables may also need to be defined:
$popover-bg | var(--#{$prefix}body-bg) | Popovers | This and the following need to be defined for popovers to respond to color mode switching. |
$popover-border-color | var(--#{$prefix}border-color-translucent) | Popovers | |
$popover-header-bg | var(--#{$prefix}secondary-bg) | Popovers | |
$popover-header-color | $headings-color | Popovers | |
$popover-body-color | var(--#{$prefix}body-color) | Popovers | |
$headings-color | inherit | Typography | Needed for popover heading color. |
After the above changes are made in the theme and it's compiling ok, there may be variable definitions or CSS rules interfering with color mode changes.
Check the theme's _tiki-selectors.scss file for CSS like this: body { background: #fff url('#{$imagePath}grey-bg.png') repeat-x; }
. In this example, light mode will be ok, but dark mode will continue to apply this rule rather than the alternative dark background specified by $body-bg-dark
(in _variables-dark.scss). Updating the rule to body { background: var(--bs-body-bg) url('#{$imagePath}grey-bg.png') repeat-x; }
will probably solve the problem.
(More details coming.)