Add light suffix to the themeswitch light choices (#37)

Co-authored-by: Snorre Nygaard <snorre.nygaard@finn.no>
warp-ds · Oct 23, 2024 · ee41d22 · ee41d22
1 parent 981433e
commit ee41d22
Showing 1 changed file with 22 additions and 12 deletions.
diff --git a/docs/.vitepress/warp-theme-switcher.js b/docs/.vitepress/warp-theme-switcher.js
@@ -1,40 +1,50 @@
-import { computed, reactive } from "vue";
+import { computed, reactive } from 'vue';
 
 export default {
   install: (app) => {
     const themes = {
-      'DBA': 'dba-dk',
-      'Finn': 'finn-no',
-      'Tori': 'tori-fi'
+      'DBA light': 'dba-dk',
+      'Finn light': 'finn-no',
+      'Tori light': 'tori-fi',
     };
 
     const state = reactive({
-      currentTheme: (typeof window !== 'undefined' && localStorage.getItem('warpTheme')) || themes.Finn
+      currentTheme:
+        (typeof window !== 'undefined' &&
+          localStorage.getItem('warpTheme')) ||
+        themes.Finn,
     });
 
     const rewriteStylesheets = (theme) => {
-      const roots = [document, ...Array.from(document.querySelectorAll('*')).filter((el) => !!el.shadowRoot).map((el) => el.shadowRoot)];
+      const roots = [
+        document,
+        ...Array.from(document.querySelectorAll('*'))
+          .filter((el) => !!el.shadowRoot)
+          .map((el) => el.shadowRoot),
+      ];
       roots.forEach((root) => {
-        const stylesheets = root.querySelectorAll('link[rel="stylesheet"][href*="/@warp-ds/css/"]');
+        const stylesheets = root.querySelectorAll(
+          'link[rel="stylesheet"][href*="/@warp-ds/css/"]'
+        );
         stylesheets.forEach((s) => {
           s.setAttribute(
             'href',
-            `https://assets.finn.no/pkg/@warp-ds/css/v2/tokens/${theme}.css`,
+            `https://assets.finn.no/pkg/@warp-ds/css/v2/tokens/${theme}.css`
           );
         });
       });
     };
 
     const updateTheme = (theme) => {
       localStorage.setItem('warpTheme', theme);
-      state.currentTheme = theme;  // Update the reactive state
+      state.currentTheme = theme; // Update the reactive state
       rewriteStylesheets(theme);
     };
 
     app.provide('warpThemeSwitcher', {
       themes,
       current: computed(() => state.currentTheme),
-      updateTheme
+      updateTheme,
     });
 
     // Listen for storage changes
@@ -46,5 +56,5 @@ export default {
         }
       });
     }
-  }
-}
+  },
+};