By the end of this video you can repaint an entire site from a single dropdown — W3CSS Theme ships 52 ready-made colour themes and applying one takes two clicks.
Where they are and what is in the list
Expand Predefined Color Themes - W3CSS Theme in theme settings and open Choose the desired predefined theme. Above the default entry, Black Gray White, sit 52 alternatives in two families:
- 22 named palettes taken straight from W3.CSS: Amber, Black, Blue Gray, Blue, Brown, Cyan, Dark Gray, Deep Orange, Deep Purple, Green, Gray, Indigo, Khaki, Light Blue, Light Green, Lime, Orange, Pink, Purple, Red, Teal and Yellow.
- 30 numbered schemes, 00000 to 00029, built for this theme. Ten of them, 00018 through 00027, are dark themes; 00000 is a deliberately plain, colourless scheme; and 00029 replaces the background with an image.
What happens when you pick one
The theme does not write inline styles. Its page attachment hook maps your choice to a CSS library — choose w3-theme-00019 and the theme attaches the matching w3-css-theme-00019 library, and when the selector is left on the default it attaches w3css-default-theme instead. It is one extra stylesheet, aggregated and cached like every other, so switching schemes costs nothing at runtime.
Doing it
- Go to
/admin/appearance/settings/drupal8_w3css_theme. - Expand Predefined Color Themes - W3CSS Theme.
- Pick a scheme and save the form.
- Rebuild caches if you have CSS aggregation switched on, then reload.
Building your own
You are not limited to the 52. Generate a palette with the W3Schools colour generator, paste the resulting CSS into your sub-theme's stylesheet and it loads after the framework. This is the one case where you genuinely need a sub-theme, because the generated file has to live somewhere an update will not overwrite.
A colour scheme is a skin: it applies equally to Amunet and the other sub-themes of this parent. Full list on the W3CSS Theme project page.
If you would rather have this set up for you, Drupal theming services covers the work, and recent projects show the result.
