Add dark mode support

jenkins-infra · Nov 3, 2023 · bf56f22 · bf56f22
1 parent 7e3180c
commit bf56f22
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 5 deletions.
diff --git a/rollup.config.js b/rollup.config.js
@@ -26,7 +26,6 @@ export default {
   input,
   plugins: [
     litcss({
-      include: '/**/*.css',
       transform: (css, {filePath}) =>
         processor.process(css, {from: filePath})
           .css,

diff --git a/src/jio-locale.ts b/src/jio-locale.ts
@@ -21,7 +21,7 @@ export const setLocaleFromUrl = async () => {
   const locale = url.searchParams.get('locale') || (new Intl.NumberFormat()).resolvedOptions().locale || sourceLocale;
   await setLocale(locale);
 };
-setLocaleFromUrl().catch(e => console.error(`Error loading locale: ${(e as Error).message}`));
+setLocaleFromUrl().catch(e => console.log(`Error loading locale: ${(e as Error).message}`));
 
 
 window.addEventListener('jio-locale-changed', (e) => {

diff --git a/src/jio-navbar.css b/src/jio-navbar.css
@@ -37,6 +37,15 @@ 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;

diff --git a/src/jio-navbar.ts b/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.
    *
@@ -187,7 +195,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>

diff --git a/src/stories/Navbar.stories.ts b/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>`;