Theme Switcher for NL Design System


The NL Design System theme switcher provides convenient way to demonstrate a website or web application with the look and feel of various organisations. You will have a dropdown menu with many of the NL Design System themes, and choosing a theme will start loading the theme and switch the class name on the element to the selected theme.

Example usage: put the script element in the section of your code, and the web component somewhere convenient:

``html












Example page





`

You can pick a default theme using for example , and it will be pre-selected in the theme switcher when the page loads.

Advanced usage

It is possible to change the theme of only part of the page, by changing the default target from :root to a custom CSS selector:

`html

`

You can configure your own themes by specifying a JSON array in the themes attribute:

`html
themes='[
{"title":"Light Theme","href":"/light.css","className":"light-theme"},
{"title":"High-Contrast Theme","href":"/high-contrast.css","className":"high-contrast-theme"},
{"title":"Dark Theme","href":"/dark.css","className":"dark-theme"}
]'
>
`

The JSON is a non-indented version of this:

`json
[
{
"title": "Light Theme",
"href": "/light.css",
"className": "light-theme"
},
{
"title": "High-Contrast Theme",
"href": "/high-contrast.css",
"className": "high-contrast-theme"
}
{
"title": "Dark Theme",
"href": "/dark.css",
"className": "dark-theme"
}
]
``