CSS Variables in Tiki

Background info on CSS variables

See also: https://css-tricks.com/a-complete-guide-to-custom-properties/

CSS variables in Bootstrap

There were just 28 CSS variables in Bootstrap 4 (https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables). As of Bootstrap 5.2, this number, for root CSS variables, is up to approximately 70 (https://getbootstrap.com/docs/5.2/customize/css-variables/#root-variables). Root CSS variables have global scope. There are also component variables, with narrow scope, such as those used for tables and navbars, and as shown below in the examples of the top and topbar zone CSS variables.

The Tiki CSS variable syntax

To distinguish SCSS variables created specifically for Tiki from Bootstrap or other SCSS variables, they have a $tiki- prefix (implementation of this is a work in progress). The same pattern is used for Tiki's CSS variables, with --tiki- . (The prepended two hyphens are the standard notation for CSS variables.)

CSS variables currently used by Tiki

    --tiki-fixed-top-site-title-font-size: 1.8rem;          // Fixed-top position (Basic Bootstrap layout)
    --tiki-fixed-top-site-title-font-weight: 700;
    --tiki-fixed-top-site-subtitle-font-size: 1.4rem;
    --tiki-fixed-top-site-subtitle-font-weight: 400;

    --tiki-site-title-font-size: 2rem;                      // Static position (Classic Tiki and Single Container layouts)
    --tiki-site-title-font-weight: 700;
    --tiki-site-subtitle-font-size: 1.5rem;
    --tiki-site-subtitle-font-weight: 400; 

Theme-specific CSS variables

CSS variables are used by some Tiki themes already for color mode compliance or for situations where site admins might want to configure the theme's appearance or behavior in a particular way.

Background image path

A CSS variable can represent the path to an image file used for the background of some page element, like this:

.middle {
    background: var(--tiki-feb12-middle-bg);
    padding-bottom: 20px;
}

Then --tiki-feb12-middle-bg is specified differently, to fetch different files, or one file or no file, depending on whether light or dark color mode is being used:

:root {
    --tiki-feb12-middle-bg: #ffffff url(../images/page.jpg) repeat-x;
}
[data-bs-theme="dark"] {
    --tiki-feb12-middle-bg: transparent;

Defining CSS variables

As the docs on CSS variables show, they are placed in one or more arrays, each headed by a selector. These arrays, for a theme, are usually in the theme's _css-variables.scss file, or they can be placed at the end of the theme's _variables.scss file. This positions the arrays after the SCSS variables are defined, which CSS variables may require.

Using Look & Feel CSS Customization

To redefine one or more of the CSS variables, the variable name and the new value for it can be input in the Look & Feel admin customization text area, inside the :root array or under another appropriate selector, as indicated in the tables above. This could also be in a custom.css file.

Future possibilities

• A dedicated Look & Feel "CSS Variables" text area provided so that just the variables could be entered and the root array syntax would be added on the backend.
• New Tiki CSS variables in addition to those listed above — what other Tiki page elements should easy customization be enabled for?
• Site color controls (or other controls) available to site users on the public side, such as for dark mode, like switching themes but not needed a page refresh. — This is implemented in Bootstrap 5.3 and will be in the upcoming Tiki 26 release.

References:

• https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
• https://css-tricks.com/a-complete-guide-to-custom-properties/
• https://blog.getbootstrap.com/2022/05/16/using-bootstrap-css-vars/
• https://getbootstrap.com/docs/5.3/customize/color-modes/ (This is already in development for Tiki.)
• https://getbootstrap.com/docs/5.2/customize/css-variables/
• https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables
• https://pedromarquez.dev/blog/2022/7/dark-mode-css