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

1.0.0-alpha.68 • Published 3 years ago

Install

Weekly downloads

-

License

EUPL-1.2

Repository

Last release

3 years 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

2 years ago

1.0.0-alpha.161

2 years ago

1.0.0-alpha.149

2 years ago

1.0.0-alpha.148

2 years ago

1.0.0-alpha.153

2 years ago

1.0.0-alpha.152

2 years ago

1.0.0-alpha.151

2 years ago

1.0.0-alpha.150

2 years ago

1.0.0-alpha.157

2 years ago

1.0.0-alpha.156

2 years ago

1.0.0-alpha.155

2 years ago

1.0.0-alpha.154

2 years ago

1.0.0-alpha.159

2 years ago

1.0.0-alpha.158

2 years ago

1.0.0-alpha.147

2 years ago

1.0.0-alpha.146

2 years ago

1.0.0-alpha.145

2 years ago

1.0.0-alpha.144

2 years ago

1.0.0-alpha.142

2 years ago

1.0.0-alpha.143

2 years ago

1.0.0-alpha.141

2 years ago

1.0.0-alpha.140

2 years ago

1.0.0-alpha.139

2 years ago

1.0.0-alpha.138

2 years ago

1.0.0-alpha.137

2 years ago

1.0.0-alpha.136

2 years ago

1.0.0-alpha.135

2 years ago

1.0.0-alpha.134

2 years ago

1.0.0-alpha.133

2 years ago

1.0.0-alpha.132

2 years ago

1.0.0-alpha.131

2 years ago

1.0.0-alpha.130

2 years ago

1.0.0-alpha.129

2 years ago

1.0.0-alpha.128

2 years ago

1.0.0-alpha.127

2 years 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.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

3 years ago

1.0.0-alpha.101

3 years ago

1.0.0-alpha.100

3 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

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

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

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

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

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago