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 (https://www.w3schools.com/css/css3_variables.asp).

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.