Skip to content

Switching html theme

jackdarker edited this page May 31, 2021 · 1 revision

Maybe you want to give the user a choice to select a color-theme of your game. There are different approaches possible.

disable/enable link to css

  • create your different style sheets in directory .dist/styles
  • in src/head-content.html create links to those styles
Important: * the default-entry should not have a title and should not be disabled and it should be placed before the others * the alternate entries should be disabled, have rel="alternate stylesheet" and have a unique title * in the alternate stylesheets you only need to redefine those settings that needs to be modified. The default stylesheet will always take effect and only those attributes of the alternates will be replaced.

Then you simply have toggle the disable attribute via javascript to make the stylesheet take effect.
For this I use styleSwitcher.js

programmatically add style data globally

you could also create stylesection in DOM-tree directly. This gives more possibilities then toggling stylesheets.

Clone this wiki locally