feat: Add dark mode support (#110)

Adds theme attribute that can be either light (default), dark or auto.
That should allow adding dark mode to plugin site before we add it to
the others and allow adding a color theme toggle to the page in the
future.

rollup.config.js

@@ -26,7 +26,6 @@ export default {
   input,
   plugins: [
     litcss({
-      include: '/**/*.css',
       transform: (css, {filePath}) =>
         processor.process(css, {from: filePath})
           .css,

src/jio-navbar.css

@@ -37,6 +37,16 @@ button:not(:disabled) {
   position: relative;
 }
 
+@media(prefers-color-scheme: dark) {
+  .navbar[data-theme="auto"] {
+    background-color: #000;
+  }
+}
+
+.navbar[data-theme="dark"] {
+   background-color: #000;
+}
+
 .navbar-brand a,
 .navbar-brand ::slotted(a) {
   color: #fff;

src/jio-navbar.ts

@@ -18,6 +18,8 @@ export type NavbarItemLink = {
   title?: string;
 };
 
+export type Theme = 'dark' | 'light' | 'auto';
+
 @localized()
 @customElement('jio-navbar')
 export class Navbar extends LitElement {
@@ -31,14 +33,20 @@ export class Navbar extends LitElement {
 
   /**
    * Show search box
-   * (doesnt yet work)
    */
   @property({type: Boolean})
   showSearchBox: Boolean = false;
 
   @property()
   locationPathname: string = location.pathname;
 
+
+  /**
+   * Header theme (light/dark/auto)
+   */
+  @property()
+  theme = 'light';
+
   /**
    * Keeps track of what menu is opened.
    *
@@ -188,7 +196,7 @@ export class Navbar extends LitElement {
     });
     const searchboxHtml = !this.showSearchBox ? nothing : html`<jio-searchbox @click=${this._handleSearchboxClick}></jio-searchbox>`;
     return html`
-      <nav class="navbar">
+      <nav class="navbar" data-theme=${this.theme}>
         <span class="navbar-brand">
           <slot name="brand">
             <a href="/">Jenkins</a>

src/stories/Navbar.stories.ts

@@ -20,12 +20,14 @@ export default {
     showSearchBox: {control: {type: 'boolean'}, },
     visibleMenu: {table: {disable: true}},
     menuToggled: {table: {disable: true}},
+    theme: {control: 'select', options: ['light', 'dark', 'auto']},
   }
 } as Meta;
 
-const render = ({property, showSearchBox, locationPathname}) => html`<jio-navbar
+const render = ({property, showSearchBox, locationPathname, theme}) => html`<jio-navbar
   property=${ifDefined(property)}
   .locationPathname=${ifDefined(locationPathname)}
+  .theme=${ifDefined(theme)}
   ?showSearchBox=${showSearchBox}
 ></jio-navbar>`;