Basic configuration

There are 2 ways to configure the list of styles for switching. And they can be combined.

• One way is for site admins:

  1. Create CSS files in site's public directory, for example: in the sites/default/files, or anywhere in the internet. Just remember that these locations along with the CSS files must be publicly accessible.

  2. Go to Administration » Configuration » User interface » Style Switcher. There you'll find a module's configuration form and a link to add stylesheets for switching. Add all your styles providing their labels and paths.

• Another way is mostly for themers. For site builders it is appropriate only if you use a custom theme that you are able to edit:

  1. In your theme's directory or subdirectory create CSS files for each different style.

  Note that each stylesheet when switched is being added to the existing set of other site's stylesheets.

  2. In your theme's .info.yml file add a section like the following, replacing labels and paths with yours:

  styleswitcher:
    css:
      Light Blue: css/blue.css
      All Black: css/black.css
    default: All Black

  where "All Black" is the label of the style, and css/black.css is the location of the stylesheet file, relative to theme's root. A line with Default is optional - it is for new site visitors. If it is not set then none of alternatives will be visible until user explicitly clicks one.

  NOTE: Do not specify in this section any of other existing CSS loaded by Drupal core, modules or your theme. They are being loaded unconditionally. If you want to set some of your theme's stylesheets for switching then move them from .libraries.yml file to the "styleswitcher" section of .info.yml.

The next steps are for both of previous ways:

3. In the Style Switcher admin section you can see tabs for each of site's enabled themes. There you can reorganize how style links will be displayed to visitors: you can reorder them, enable/disable some of them and choose another default style for each theme. This means that each of your site's themes can have its own set of styles for switching.

Note that styles added in admin form will be available for all themes, but those provided in theme's .info.yml will only be available for that theme and its sub-themes, but not for other themes.

4. Finally, go to Administration » Structure » Block layout, click "Place block", find "Style Switcher" block, place it wherever you want and press "Save". You can also configure the block as you like.

If you want the style switching functionality in multiple themes then you need to place the block in them too.

That's it. The block will present links for each of the configured styles to the site visitors.