Implements default theme based on user-preferense, bumped to v1.3.0

Author: Lissy93

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "networking-toolbox",
 	"private": true,
-	"version": "1.2.0",
+	"version": "1.3.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

src/app.html

@@ -19,13 +19,48 @@
     <script>
       (function () {
         try {
-          // Apply theme
-          const theme = localStorage.getItem('theme') || 'dark';
+          // Get saved theme from localStorage
+          const savedTheme = localStorage.getItem('theme');
+
+          let theme;
+          if (savedTheme) {
+            // Use saved theme if it exists
+            theme = savedTheme;
+          } else {
+            // No saved theme - check system preference
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches;
+            if (prefersLight) {
+              theme = 'light';
+            } else if (prefersDark) {
+              theme = 'dark';
+            } else {
+              theme = 'ocean';
+            }
+          }
+
+          // Apply theme class (dark theme doesn't need a class)
           if (theme !== 'dark') {
             document.documentElement.classList.add('theme-' + theme);
           }
         } catch (e) {
           // Ignore localStorage errors (private browsing, etc.)
+          // Fall back to system preference or ocean
+          try {
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches;
+
+            if (prefersLight) {
+              document.documentElement.classList.add('theme-light');
+            } else if (!prefersDark) {
+              // Neither dark nor light preferred - use ocean
+              document.documentElement.classList.add('theme-ocean');
+            }
+            // If prefersDark, no class needed (dark is default)
+          } catch (e2) {
+            // If all fails, use ocean
+            document.documentElement.classList.add('theme-ocean');
+          }
         }
       })();
     </script>

src/lib/config/customizable-settings.ts

@@ -53,7 +53,7 @@ export const DEFAULT_NAVBAR_DISPLAY: NavbarDisplayMode = (env.NTB_NAVBAR_DISPLAY
  * Default theme
  * Options: 'dark', 'light', 'midnight', 'arctic', 'ocean', 'purple', 'cyberpunk', 'terminal', 'lightpurple', 'muteddark', 'solarized', 'nord', 'gruvbox', 'tokyonight', 'catppuccin', 'everforest', 'sunset', 'dracula'
  */
-export const DEFAULT_THEME: ThemeOption = (env.NTB_DEFAULT_THEME as ThemeOption) ?? 'dark';
+export const DEFAULT_THEME: ThemeOption = (env.NTB_DEFAULT_THEME as ThemeOption) ?? 'ocean';
 
 /**
  * Default language

src/lib/stores/theme.ts

@@ -139,8 +139,22 @@ function isValidTheme(theme: unknown): theme is string {
   return themes.some((t) => t.id === theme && t.available);
 }
 
+function getSystemPreferredTheme(): ThemeOption {
+  if (!browser) return 'ocean';
+
+  // Check if user has a color scheme preference
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches;
+
+  if (prefersLight) return 'light';
+  if (prefersDark) return 'dark';
+
+  // No preference or preference not supported
+  return 'ocean';
+}
+
 function createThemeStore() {
-  const defaultTheme = isValidTheme(DEFAULT_THEME) ? DEFAULT_THEME : 'dark';
+  const defaultTheme = isValidTheme(DEFAULT_THEME) ? DEFAULT_THEME : 'ocean';
   const { subscribe, set, update } = writable<ThemeOption>(defaultTheme);
 
   return {
@@ -149,12 +163,17 @@ function createThemeStore() {
     // Initialize theme from localStorage or default
     init: () => {
       if (browser) {
-        const saved = storage.getItem(STORAGE_KEY, {
-          defaultValue: defaultTheme,
-          validate: isValidTheme,
-          serialize: false,
-        });
-        const initialTheme = saved as ThemeOption;
+        const savedTheme = localStorage.getItem(STORAGE_KEY);
+
+        let initialTheme: ThemeOption;
+
+        // If no saved theme, use system preference
+        if (!savedTheme) {
+          initialTheme = getSystemPreferredTheme();
+        } else {
+          // Use saved theme if valid
+          initialTheme = isValidTheme(savedTheme) ? savedTheme : getSystemPreferredTheme();
+        }
 
         set(initialTheme);
 

tests/unit/lib/stores/theme.test.ts

@@ -9,12 +9,13 @@ vi.mock('$app/environment', () => ({
 
 // Mock customizable settings
 vi.mock('$lib/config/customizable-settings', () => ({
-  DEFAULT_THEME: 'dark',
+  DEFAULT_THEME: 'ocean',
 }));
 
 describe('theme store', () => {
   let mockLocalStorage: Record<string, string> = {};
   let documentHeadAppendChildSpy: any;
+  let mockMatchMedia: any;
 
   beforeEach(() => {
     // Reset localStorage mock
@@ -35,6 +36,15 @@ describe('theme store', () => {
       key: (index: number) => Object.keys(mockLocalStorage)[index] || null,
     } as Storage;
 
+    // Mock matchMedia for prefers-color-scheme
+    mockMatchMedia = vi.fn((query: string) => ({
+      matches: false,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+    global.window.matchMedia = mockMatchMedia;
+
     // Mock document element for theme classes
     global.document = {
       documentElement: {
@@ -84,10 +94,10 @@ describe('theme store', () => {
     expect(ids).toContain('arctic');
   });
 
-  it('initializes with default theme', async () => {
+  it('initializes with default theme when not in browser', async () => {
     const { theme } = await import('../../../../src/lib/stores/theme');
     const value = get(theme);
-    expect(value).toBe('dark');
+    expect(value).toBe('ocean');
   });
 
   it('init sets theme from localStorage if valid', async () => {
@@ -99,15 +109,63 @@ describe('theme store', () => {
     expect(get(theme)).toBe('light');
   });
 
-  it('init falls back to default if localStorage theme is invalid', async () => {
+  it('init falls back to system preference if localStorage theme is invalid', async () => {
     mockLocalStorage['theme'] = 'invalid-theme';
+    mockMatchMedia.mockImplementation((query: string) => ({
+      matches: query === '(prefers-color-scheme: dark)',
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+    const { theme } = await import('../../../../src/lib/stores/theme');
+
+    const initialTheme = theme.init();
+    expect(initialTheme).toBe('dark');
+    expect(get(theme)).toBe('dark');
+  });
+
+  it('init uses system preference (light) when no saved theme', async () => {
+    mockMatchMedia.mockImplementation((query: string) => ({
+      matches: query === '(prefers-color-scheme: light)',
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+    const { theme } = await import('../../../../src/lib/stores/theme');
+
+    const initialTheme = theme.init();
+    expect(initialTheme).toBe('light');
+    expect(get(theme)).toBe('light');
+  });
+
+  it('init uses system preference (dark) when no saved theme', async () => {
+    mockMatchMedia.mockImplementation((query: string) => ({
+      matches: query === '(prefers-color-scheme: dark)',
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
     const { theme } = await import('../../../../src/lib/stores/theme');
 
     const initialTheme = theme.init();
     expect(initialTheme).toBe('dark');
     expect(get(theme)).toBe('dark');
   });
 
+  it('init uses ocean when no saved theme and no system preference', async () => {
+    mockMatchMedia.mockImplementation((query: string) => ({
+      matches: false,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+    const { theme } = await import('../../../../src/lib/stores/theme');
+
+    const initialTheme = theme.init();
+    expect(initialTheme).toBe('ocean');
+    expect(get(theme)).toBe('ocean');
+  });
+
   it('setTheme updates store and localStorage', async () => {
     const { theme } = await import('../../../../src/lib/stores/theme');
     theme.init();