1.0.0-alpha.168 • Published 1 year ago

@nl-design-system-unstable/theme-switcher v1.0.0-alpha.168

Weekly downloads
-
License
EUPL-1.2
Repository
github
Last release
1 year ago

Theme Switcher for NL Design System

NPM version

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.160

1 year ago

1.0.0-alpha.164

1 year ago

1.0.0-alpha.163

1 year ago

1.0.0-alpha.162

1 year ago

1.0.0-alpha.161

1 year ago

1.0.0-alpha.168

1 year ago

1.0.0-alpha.167

1 year ago

1.0.0-alpha.166

1 year ago

1.0.0-alpha.165

1 year ago

1.0.0-alpha.157

1 year ago

1.0.0-alpha.156

1 year ago

1.0.0-alpha.155

1 year ago

1.0.0-alpha.159

1 year ago

1.0.0-alpha.158

1 year ago

1.0.0-alpha.154

1 year ago

1.0.0-alpha.153

1 year ago

1.0.0-alpha.152

1 year ago

1.0.0-alpha.151

1 year ago

1.0.0-alpha.149

1 year ago

1.0.0-alpha.150

1 year ago

1.0.0-alpha.148

1 year ago

1.0.0-alpha.147

1 year ago

1.0.0-alpha.146

1 year ago

1.0.0-alpha.145

1 year ago

1.0.0-alpha.144

1 year ago

1.0.0-alpha.143

1 year ago

1.0.0-alpha.142

1 year ago

1.0.0-alpha.141

1 year ago

1.0.0-alpha.140

1 year ago

1.0.0-alpha.139

1 year ago

1.0.0-alpha.138

1 year ago

1.0.0-alpha.137

1 year ago

1.0.0-alpha.136

1 year ago

1.0.0-alpha.135

1 year ago

1.0.0-alpha.134

1 year ago

1.0.0-alpha.133

1 year ago

1.0.0-alpha.132

1 year ago

1.0.0-alpha.131

1 year ago

1.0.0-alpha.130

1 year ago

1.0.0-alpha.129

1 year ago

1.0.0-alpha.128

1 year ago

1.0.0-alpha.127

1 year ago

1.0.0-alpha.126

2 years ago

1.0.0-alpha.125

2 years ago

1.0.0-alpha.124

2 years ago

1.0.0-alpha.123

2 years ago

1.0.0-alpha.122

2 years ago

1.0.0-alpha.120

2 years ago

1.0.0-alpha.121

2 years ago

1.0.0-alpha.119

2 years ago

1.0.0-alpha.118

2 years ago

1.0.0-alpha.109

2 years ago

1.0.0-alpha.108

2 years ago

1.0.0-alpha.107

2 years ago

1.0.0-alpha.102

2 years ago

1.0.0-alpha.101

2 years ago

1.0.0-alpha.100

2 years ago

1.0.0-alpha.106

2 years ago

1.0.0-alpha.105

2 years ago

1.0.0-alpha.104

2 years ago

1.0.0-alpha.103

2 years ago

1.0.0-alpha.113

2 years ago

1.0.0-alpha.112

2 years ago

1.0.0-alpha.111

2 years ago

1.0.0-alpha.110

2 years ago

1.0.0-alpha.117

2 years ago

1.0.0-alpha.116

2 years ago

1.0.0-alpha.115

2 years ago

1.0.0-alpha.114

2 years ago

1.0.0-alpha.96

2 years ago

1.0.0-alpha.95

2 years ago

1.0.0-alpha.98

2 years ago

1.0.0-alpha.97

2 years ago

1.0.0-alpha.99

2 years ago

1.0.0-alpha.92

2 years ago

1.0.0-alpha.91

2 years ago

1.0.0-alpha.94

2 years ago

1.0.0-alpha.93

2 years ago

1.0.0-alpha.90

2 years ago

1.0.0-alpha.85

2 years ago

1.0.0-alpha.84

2 years ago

1.0.0-alpha.87

2 years ago

1.0.0-alpha.86

2 years ago

1.0.0-alpha.81

2 years ago

1.0.0-alpha.83

2 years ago

1.0.0-alpha.82

2 years ago

1.0.0-alpha.89

2 years ago

1.0.0-alpha.88

2 years ago

1.0.0-alpha.59

2 years ago

1.0.0-alpha.58

2 years ago

1.0.0-alpha.57

2 years ago

1.0.0-alpha.63

2 years ago

1.0.0-alpha.62

2 years ago

1.0.0-alpha.65

2 years ago

1.0.0-alpha.64

2 years ago

1.0.0-alpha.61

2 years ago

1.0.0-alpha.60

2 years ago

1.0.0-alpha.67

2 years ago

1.0.0-alpha.66

2 years ago

1.0.0-alpha.69

2 years ago

1.0.0-alpha.68

2 years ago

1.0.0-alpha.74

2 years ago

1.0.0-alpha.73

2 years ago

1.0.0-alpha.76

2 years ago

1.0.0-alpha.75

2 years ago

1.0.0-alpha.70

2 years ago

1.0.0-alpha.72

2 years ago

1.0.0-alpha.71

2 years ago

1.0.0-alpha.78

2 years ago

1.0.0-alpha.77

2 years ago

1.0.0-alpha.79

2 years ago

1.0.0-alpha.80

2 years ago

1.0.0-alpha.52

2 years ago

1.0.0-alpha.51

2 years ago

1.0.0-alpha.54

2 years ago

1.0.0-alpha.53

2 years ago

1.0.0-alpha.50

2 years ago

1.0.0-alpha.56

2 years ago

1.0.0-alpha.55

2 years ago

1.0.0-alpha.43

2 years ago

1.0.0-alpha.49

2 years ago

1.0.0-alpha.48

2 years ago

1.0.0-alpha.45

2 years ago

1.0.0-alpha.44

2 years ago

1.0.0-alpha.47

2 years ago

1.0.0-alpha.46

2 years ago

1.0.0-alpha.30

3 years ago

1.0.0-alpha.32

3 years ago

1.0.0-alpha.31

3 years ago

1.0.0-alpha.38

2 years ago

1.0.0-alpha.37

2 years ago

1.0.0-alpha.39

2 years ago

1.0.0-alpha.34

2 years ago

1.0.0-alpha.33

2 years ago

1.0.0-alpha.36

2 years ago

1.0.0-alpha.35

2 years ago

1.0.0-alpha.41

2 years ago

1.0.0-alpha.40

2 years ago

1.0.0-alpha.42

2 years ago

1.0.0-alpha.19

3 years ago

1.0.0-alpha.21

3 years ago

1.0.0-alpha.20

3 years ago

1.0.0-alpha.18

3 years ago

1.0.0-alpha.24

3 years ago

1.0.0-alpha.17

3 years ago

1.0.0-alpha.16

3 years ago

1.0.0-alpha.15

3 years ago

1.0.0-alpha.12

3 years ago

1.0.0-alpha.14

3 years ago

1.0.0-alpha.13

3 years ago

1.0.0-alpha.9

4 years ago

1.0.0-alpha.10

4 years ago

1.0.0-alpha.11

4 years ago

1.0.0-alpha.8

4 years ago

1.0.0-alpha.7

4 years ago

1.0.0-alpha.6

4 years ago

1.0.0-alpha.5

4 years ago

1.0.0-alpha.4

4 years ago

1.0.0-alpha.3

4 years ago

1.0.0-alpha.2

4 years ago

1.0.0-alpha.1

4 years ago