Merge pull request #452 from pulibrary/colormode-switcher

Add a light-mode/dark-mode switcher
pulibrary · Feb 11, 2025 · 5a7403e · 5a7403e
2 parents 7664d42 + 888421e
commit 5a7403e
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "@honeybadger-io/vue": "^6.1.7",
     "axios": "^1.7.4",
     "class-transformer": "^0.5.1",
-    "lux-design-system": "^5.8.1",
+    "lux-design-system": "^6.1.3",
     "typescript-eslint": "^7.8.0",
     "vue": "^3.3.4"
   },

diff --git a/src/App.vue b/src/App.vue
@@ -6,6 +6,11 @@ import { SearchTermService } from './services/SearchTermService';
 import TrayContainer from './components/TrayContainer.vue';
 import BannerAlert from './components/BannerAlert.vue';
 
+const colorMode = localStorage.getItem('mode') || 'dark light';
+document
+  .querySelector('meta[name="color-scheme"]')
+  ?.setAttribute('content', colorMode);
+
 const query = SearchTermService.term();
 if (query) {
   document.title = query + ' search results | Princeton University Library';

diff --git a/src/components/AppHeader.test.ts b/src/components/AppHeader.test.ts
@@ -1,4 +1,4 @@
-import { describe, test, expect } from 'vitest';
+import { describe, test, expect, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import AppHeader from './AppHeader.vue';
 
@@ -59,4 +59,20 @@ describe('AppHeader component', () => {
     );
     expect(allSearchToolsLink.text()).toEqual('All Search Tools');
   });
+  describe('Appearance menu', () => {
+    test('it saves the selected color mode in local storage', () => {
+      const setItem = vi.spyOn(window.localStorage, 'setItem');
+
+      const appearanceButton = wrapper
+        .findAll('button')
+        .find(button => button.text() === 'Appearance');
+      appearanceButton?.trigger('click');
+      const libraryCatalogLink = wrapper
+        .findAll('button')
+        .find(button => button.text() === 'Dark mode');
+      libraryCatalogLink?.trigger('click');
+
+      expect(setItem).toHaveBeenCalledWith('mode', 'dark');
+    });
+  });
 });
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -1,6 +1,11 @@
 <template>
   <LuxLibraryHeader type="header" appName="All Search" abbrName="All Search">
-    <LuxMenuBar type="main-menu" theme="dark" :menu-items="menu_items" />
+    <LuxMenuBar
+      type="main-menu"
+      theme="dark"
+      :menu-items="menu_items"
+      @menu-item-clicked="handleMenuItemClicked"
+    />
   </LuxLibraryHeader>
 </template>
 
@@ -57,6 +62,41 @@ const menu_items = [
         href: 'https://library.princeton.edu/services?type=1551'
       }
     ]
+  },
+  {
+    name: 'Appearance',
+    component: 'Appearance',
+    children: [
+      {
+        name: 'System default colors',
+        component: 'default_colors'
+      },
+      {
+        name: 'Dark mode',
+        component: 'dark_colors'
+      },
+      {
+        name: 'Light mode',
+        component: 'light_colors'
+      }
+    ]
   }
 ];
+
+const colorModes = {
+  default_colors: 'dark light',
+  dark_colors: 'dark',
+  light_colors: 'light'
+};
+
+function switchMode(value: string) {
+  window.localStorage.setItem('mode', value);
+  const colorSchemeMeta = document.querySelector('meta[name="color-scheme"]');
+  colorSchemeMeta?.setAttribute('content', value);
+}
+function handleMenuItemClicked(event: { component: keyof typeof colorModes }) {
+  if (colorModes[event.component]) {
+    switchMode(colorModes[event.component]);
+  }
+}
 </script>
diff --git a/yarn.lock b/yarn.lock
@@ -1884,10 +1884,10 @@ lru-cache@^10.2.0:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
   integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
 
-lux-design-system@^5.8.1:
-  version "5.8.1"
-  resolved "https://registry.yarnpkg.com/lux-design-system/-/lux-design-system-5.8.1.tgz#11b49102a015a1c01e20e9901076afc648d6c16c"
-  integrity sha512-/CSxhmdu3tWuREMRMXWwnJTAdZxJT1UNqPUdaNq9N7Fv9fQjNUyEknq/Rxo5fFrhx2ognBNffz00hPOcZzBt+A==
+lux-design-system@^6.1.3:
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/lux-design-system/-/lux-design-system-6.1.3.tgz#c4678dd419390d0bf1b3e0407b4e5d0c4e6580e3"
+  integrity sha512-3mOTCvai0GRCJ8jHwiDfJqxbgAaOmcOHbYivXewjMLf01sL1awPTyGFk5T7sCx275yr9+iakOKdDM9+9zwCWyg==
   dependencies:
     core-js "^3.8.3"
     register-service-worker "^1.7.2"