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

1.0.0-alpha.161 • Published 1 year ago

Install

Weekly downloads

-

License

EUPL-1.2

Repository

Last release

1 year ago

Theme Logo for NL Design System

This is an experimental package for developers that want to showcase the theme switcher in their app. The <nl-theme-logo> custom element can be used to automatically switch to another logo when the theme has changed.

<!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 logo</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>
    <style>
      :root {
        --utrecht-logo-max-width: 200px;
        --utrecht-logo-max-height: 200px;
        --utrecht-logo-min-width: 100px;
        --utrecht-logo-min-height: 100px;
      }
    </style>
  </head>
  <body class="utrecht-html">
    <h1>Example page</h1>
    <nl-theme-logo></nl-theme-logo>
  </body>
</html>

The logo configuration can be customized, and you will almost certainly want to do this. Configure the URL of where the logo images are hosted in your project, by specifying a JSON array in the themes attribute:

<nl-theme-logo themes="[]"></nl-theme-logo>

The JSON should have the following format. You have to option to either use an image or a web component. The advantage of a web component could be that is has built-in dark mode or responsive versions, but not every logo is available as web component of course.

[
  {
    "className": "utrecht-theme",
    "customElement": "utrecht-logo"
  },
  {
    "className": "denhaag-theme",
    "src": "/img/denhaag-logo.svg"
  }
]

nl-design-system

@everything-registry/sub-chunk-655

1.0.0-alpha.160

1 year ago

1.0.0-alpha.161

1 year ago

1.0.0-alpha.149

1 year ago

1.0.0-alpha.148

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

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

1 year ago

1.0.0-alpha.159

1 year ago

1.0.0-alpha.158

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

1 year ago

1.0.0-alpha.143

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

1 year ago

1.0.0-alpha.125

1 year ago

1.0.0-alpha.124

1 year ago

1.0.0-alpha.123

1 year ago

1.0.0-alpha.120

2 years ago

1.0.0-alpha.122

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

2 years ago

1.0.0-alpha.116

2 years ago

1.0.0-alpha.115

2 years ago

1.0.0-alpha.113

2 years ago

1.0.0-alpha.114

2 years ago

1.0.0-alpha.112

2 years ago

1.0.0-alpha.111

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

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

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

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

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

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

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago