Best mobile app development and design company. Best e-commerce development company.

Drupal color switcher implementation.

As a requirement in Drupal, one of our clients told us to implement a Drupal color-switcher option. So, when we searched, we found a module named ‘Style Switcher’. We installed this module using Composer.

Drupal development, Drupal color switcher. Sreyas It Solutions is top software development firm provide support all over US Uk Spain Italy Canada
composer require 'drupal/styleswitcher:^2.0'

After login to the Drupal dashboard, configuration > User Interface > Style switcher. From here, you can add a new style. If you’re planning to add a blue theme, give a name like ‘Blue’ and add the path there, where the ‘blue.css’ file is created.

In my point of view, I’ve created a ‘default.css’ file and added basic styles for the website there. And for easy access, I’ve added css variables in ‘colour.css’ files. 

:root {
   --primary_color: #008080;
   --secondary_color: #0779bf;
   --black_color: #000;
   --white_color: #fff;
.btn {
   color: var(--white_color);
   background-color: var(--primary_color);
   border: 2px solid var(--primary_color);
   border-radius: 0;
   padding: 12px 50px;
   font-family: 'Poppins', sans-serif;
   letter-spacing: 1px;
   font-weight: 600;
   height: 50px;
   box-shadow: none;

Note: To know more about css variables you can refer to this link (

So, if you add like this, you do not need to copy all css styles in each color file. Just copy the : root style and change the color. When you do this, you can update each color within 5 mins.

The Drupal color switcher is only one of the many Drupal services offered by Sreyas. Data Migration from and to Drupal, Drupal website development, and designing are some of the other services provided by Sreyas. Our services and supports are available all over European countries and worldwide.







Leave a Reply

Your email address will not be published. Required fields are marked *

To Know Us Better

Browse through our work.