Loading...
Home Page
About
Marketplace
Sample page
Wishlist at dev site
Sitemap (Categories)
Tiki Customization
Creating a theme
Updating a theme
Converting a Bootstrap theme
Contributing, sharing or selling
Customizing icons
Tips
Template Tricks
CSS Tricks
Feature Examples
Articles
Blogs
Calendar
Forums
FAQs
Trackers
Files
Links Directory
Wiki Pages
Find
History: Color Modes in Tiki
View published page
Source of version: 8
(current)
{DIV(class="lead")}[https://blog.getbootstrap.com/2022/12/24/bootstrap-5-3-0-alpha1/Bootstrap 5.3 alpha 1], released in late December 2022, introduces ([https://getbootstrap.com/docs/5.3/customize/color-modes/|color modes]. (__Update:__ The latest version is now alpha 3.) This is a method to give web site users the ability to select an alternative color scheme. This first release includes code for a "dark mode" and the documentation describes how to create other custom color modes, which could include high contrast, grayscale, and so on.{DIV} Of course Tiki already offers site users the ability to switch themes, and some of these are "light" and some are "dark", if the site admin allows users to change the site theme for their own use, and assigns the "Switch Theme" module for users to switch with. But what the color modes feature does is enable immediate color palette switching, without a page refresh, using the same theme but with alternative color values, so this complements and extends Tiki's current options. Also, The Bootstrap color modes feature respects the -+prefers-color-scheme+- setting in the user's browser so the Tiki site will conform to that setting with no user interaction needed. !! Test setup Tiki will support this feature in an upcoming version; this page is a report on the current status of the Tiki implementation of Bootstrap color modes. To do some testing, etc., in a new Tiki 25 instance, I ({sign user="chibaguy" datetime="2023-02-06T08:46:24+00:00"}) replaced the Bootstrap 5.2 files in the vendor directory with manually downloaded Bootstrap 5.3 alpha release files. !! The switch For the color switching, Bootstrap uses some JavaScript on their example page and offer it to people to use, which is what I did, putting it in a PluginJS in a wiki page which I then use for a menupage-type module assigned to the top module zone at the page top where we usually see default mode / dark mode site color switches. This was just a proof of concept and a proper "Switch Color Mode" module should be made eventually. !! Compiling glitches and results Trying to compile Tiki themed (Amelia, Boosted, and Default for the first tries) with the new files resulted in a few compiler errors due to an outdated color statement (more information later). However, while the new -+ default.css +- could be compiled and it worked, it also contained some uncompiled SCSS variables. I didn't track down yet what caused this but will check again with new Bootstrap releases as they come out. These color modes are produced by compiling "dark variable" (or other custom color set) alternatives to the default colors of the theme. One way to organize this is for the theme to have a -+ variables-dark.scss +- file to contain them. Then each equivalent of a default variable is appended with -+ -dark +- (again in the case of a "dark" color mode). !! Bootstrap issues In my test, I could edit the existing variables in the alpha package and see the results in my site, but adding new variables didn't work. Specifically, the Amelia and Boosted themes need -+ $card-bg-dark +- but defining this and compiling didn't succeed in overriding -+ --bs-card-bg +- . I did an online search and found other people running into the same issue: [https://github.com/twbs/bootstrap/issues/37799]. I assume this will be addressed so I'll check again on this later. !! Compatibility with Tiki CSS variables One thing I was curious about is how the new color mode feature gets along with the Tiki CSS variables method used for the top and topbar module zones/navbars, which are a Look & Feel theme option. For example, if the site admin has set "Light" for the site's navbars (so navbars have a light background color and dark foreground colors), what happens if color modes are available and the user switches to "Dark"? Does it override the admin option? The answer is yes, it does, or anyway it can if desired. The key is to use the color mode as the selector like {CODE()} [data-bs-themes="dark"] { --tiki-top-light-bg: #000; // light option gets a black background in dark color mode } {CODE} !! Next steps So, going forward, following new alpha and beta release, these are some tasks ahead: * Recheck compiled CSS files for uncompiled SCSS variables, especially after most-recent Bootstrap alpha releases. If they aren't reported by anyone outside of Tiki, is there a problem in Tiki's implementation to locate and fix? * Recheck color changes in nested page objects; this issue is on the radar so should be resolved. __Update:__ This is improved/fixed in alpha 3. For example, cards without a background color inherit the page color as expected. * Decide on the details of Tiki's implementation: ** Presumably a module would be displayed to provide the color mode switch to the site user. Would there be other methods, or is this enough? ** Create this module. Its parameters would be in a comma-separated list, I imagine, because the modes are likely to vary from one Tiki site to another. ** Does every theme in the package get alternative color mode(s)? ** Is it possible to provide a global dark mode stylesheet that can impose the dark mode regardless of the theme being used? (Tentative answer: It might be possible, but maybe isn't practical. The active theme needs a dark variant. Anyway this is the most straightforward implementation.) ** What color modes other than dark, if any, should be provided? Accessibility guidelines regarding visibility, etc., should be the guide here. ** How should dark themes be treated? Do they get a "light" alternative? This raises the question of what is the rationale for color modes -- strictly usability, or style variation also? It isn't hard to imagine seasonal or event-related color modes, and so on, but this would be left to Tiki website operators to pursue, I imagine. ** How does color mode work regarding child themes? Does the child theme also need dark variables or does it inherit the effect from the parent theme? (It seems that if the child theme specifies colors to override the parent theme, then it will need to specify dark mode colors also.) ~tc~ (alias(Bootstrap Color Modes)) ~/tc~
Switch Theme
Site theme (fivealive-lite/grape)
Default
Amelia
Boosted
Business
Cerulean
Cosmo
Cyborg
Darkly
Darkroom
Darkshine
Feb12
Fivealive
Fivealive-lite
Flatly
Greenvalley
Journal
Jqui
Lighty
Litera
Lumen
Lux
Materia
Minty
Morph
Neubrutiki
Ohia
Pulse
Quartz
Sandstone
Simplex
Sketchy
Slate
Solar
Spacelab
Strasa
Superhero
Thenews
Tikicorp
Tikinewt
Tikipedia
Tuften
United
Utopias
Vapor
Yeti
Zephyr
None
Akebi
Grape
Kiwi
Lemon
Orange
Plum
Raspberry
Watermelon
Switch
Layout
Stay on this page
Default
Fixed top navbar (uses site icon + "topbar" module zone)
Basic Bootstrap
Classic Tiki (3 containers - header, middle, footer)
Tikipedia
Latest Changes
CSS Variables in Tiki
Themes
Status of Color Modes in Tiki - April 23
Color Modes in Tiki
Bootstrap
Menu Topics
Bootstrapping WikiPlugins
Bootstrap JavaScript JQuery
Theme quality and classification checklist
Theme Options aka Child Themes
...more
Subscribe to Tiki Newsletters!
Delivered fresh to your email inbox!
Don't miss major announcements and other big news!
Site Config
Site upgraded to branch 25x
Sat 12 of Nov, 2022 17:00 GMT
Site upgraded to Tiki 23.x
Sat 24 of Jul, 2021 00:30 GMT
Site upgraded to Tiki 20
Wed 29 of May, 2019 07:57 GMT
We are now on Tiki 19.x
Fri 05 of Oct, 2018 10:02 GMT
Shoutbox module removed
Thu 28 of Jun, 2018 07:01 GMT
We are now on Tiki 18.x
Wed 02 of May, 2018 08:46 GMT
Upgraded to Tiki 17.0
Wed 02 of Aug, 2017 08:19 GMT
Upgraded to Tiki 15.0alpha
Tue 08 of Mar, 2016 13:34 GMT
Site updated to Tiki 14 beta
Tue 21 of Apr, 2015 00:01 GMT
Testing Tiki10
Thu 15 of Nov, 2012 23:06 GMT