[Drupal] How to implement multiple color switches in Drupal theme?

Implementing multiple color mode switching is so simple! In HTML we can easily add the switching color style sheets as alternative style sheets.

But when it comes to Drupal there is a slight change. Here is how we can implement multiple color switches in Drupal theme. We normally include style sheets in .info file and we cannot specify 'alternative stylesheets' just like in HTML. So here we need a module called Drupal 'Styleswitcher'. By enabling this Drupal module you will get the option 'styleswitcher' to add alternative style sheets.

For more details just follow these steps.

Step 1: Create different style sheets for each color/font-size. Eg: orange.css, green.css, red.css

Step 2: Go to .info file of your Drupal theme and add the style sheets as given below. Add the color style sheets in the following order, below the main style sheets. The default (orange.css) will display as the default.

stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
styleswitcher[css][default] = css/orange.css
styleswitcher[css][green] = css/green.css
styleswitcher[css][red] = css/red.css

Step 3: Download the suitable version of styleswitcher from here

Step 4: Unzip and copy it to your sites/all/modules/ folder.

Step 5: Enable the Styleswitcher from Drupal admin panel.

Step 6: After enabling the styleswitcher module, a new block will appear in the blocks page of Drupal admin panel. Assign styleswitcher block to desired region.

Step 7: Now you will be able to see three clickable style names in the theme. Click and enjoy!

NB: By default, there is an overlay effect enabled for this module. If you don't need it, just go to styleswitcher module settings and disable it.