@nl-design-system-unstable/theme-switcher NPM | npm.io

1.0.0-alpha.154 • Published 7 days ago

Install

Weekly downloads

-

License

EUPL-1.2

Repository

Last release

7 days ago

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 <html> element to the selected theme.

Example usage: put the script element in the <head> section of your code, and the <nl-theme-switcher> web component somewhere convenient:

<!DOCTYPE html>
<html lang="en" class="utrecht-theme utrecht-document">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>NL Design System theme switcher</title>
    <link rel="stylesheet" href="https://unpkg.com/@utrecht/component-library-css" />
    <script async src="https://unpkg.com/@nl-design-system-unstable/theme-switcher"></script>
  </head>
  <body class="utrecht-html">
    <h1>Example page</h1>
    <nl-theme-switcher></nl-theme-switcher>
  </body>
</html>

You can pick a default theme using for example <html class="utrecht-theme">, 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:

<nl-theme-switcher target="#example > div"></nl-theme-switcher>

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

<nl-theme-switcher
  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"}
]'
></nl-theme-switcher>

The JSON is a non-indented version of this:

[
  {
    "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"
  }
]

nl-design-system

@everything-registry/sub-chunk-655

1.0.0-alpha.154

7 days ago

1.0.0-alpha.153

17 days ago

1.0.0-alpha.152

20 days ago

1.0.0-alpha.151

28 days ago

1.0.0-alpha.149

1 month ago

1.0.0-alpha.150

1 month ago

1.0.0-alpha.148

2 months ago

1.0.0-alpha.147

2 months ago

1.0.0-alpha.146

2 months ago

1.0.0-alpha.145

2 months ago

1.0.0-alpha.144

2 months ago

1.0.0-alpha.143

3 months ago

1.0.0-alpha.142

3 months ago

1.0.0-alpha.141

3 months ago

1.0.0-alpha.140

3 months ago

1.0.0-alpha.139

3 months ago

1.0.0-alpha.138

3 months ago

1.0.0-alpha.137

3 months ago

1.0.0-alpha.136

3 months ago

1.0.0-alpha.135

4 months ago

1.0.0-alpha.134

4 months ago

1.0.0-alpha.133

4 months ago

1.0.0-alpha.132

4 months ago

1.0.0-alpha.131

4 months ago

1.0.0-alpha.130

4 months ago

1.0.0-alpha.129

4 months ago

1.0.0-alpha.128

4 months ago

1.0.0-alpha.127

4 months ago

1.0.0-alpha.126

5 months ago

1.0.0-alpha.125

5 months ago

1.0.0-alpha.124

5 months ago

1.0.0-alpha.123

5 months ago

1.0.0-alpha.122

5 months ago

1.0.0-alpha.120

5 months ago

1.0.0-alpha.121

5 months ago

1.0.0-alpha.119

5 months ago

1.0.0-alpha.118

5 months ago

1.0.0-alpha.109

8 months ago

1.0.0-alpha.108

8 months ago

1.0.0-alpha.107

8 months ago

1.0.0-alpha.102

9 months ago

1.0.0-alpha.101

9 months ago

1.0.0-alpha.100

9 months ago

1.0.0-alpha.106

8 months ago

1.0.0-alpha.105

9 months ago

1.0.0-alpha.104

9 months ago

1.0.0-alpha.103

9 months ago

1.0.0-alpha.113

7 months ago

1.0.0-alpha.112

7 months ago

1.0.0-alpha.111

7 months ago

1.0.0-alpha.110

7 months ago

1.0.0-alpha.117

5 months ago

1.0.0-alpha.116

6 months ago

1.0.0-alpha.115

6 months ago

1.0.0-alpha.114

7 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago