feat: dark mode toggle, tailwind viewports

web/.storybook/main.ts

@@ -8,6 +8,7 @@ const config: StorybookConfig = {
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
     '@storybook/addon-svelte-csf',
+    '@storybook/addon-themes',
   ],
   framework: {
     name: '@storybook/sveltekit',

web/.storybook/preview.ts

@@ -1,6 +1,17 @@
+import { withThemeByClassName } from '@storybook/addon-themes';
 import type { Preview } from '@storybook/svelte';
 import '../src/app.css';
 
+export const decorators = [
+  withThemeByClassName({
+    themes: {
+      light: 'light',
+      dark: 'dark',
+    },
+    defaultTheme: 'light',
+  }),
+];
+
 const preview: Preview = {
   parameters: {
     controls: {
@@ -9,6 +20,52 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    viewport: {
+      viewports: {
+        '639': {
+          name: 'mobile',
+          styles: {
+            width: '639px',
+            height: '100%',
+          },
+        },
+        '640': {
+          name: 'sm',
+          styles: {
+            width: '640px',
+            height: '100%',
+          },
+        },
+        '768': {
+          name: 'md',
+          styles: {
+            width: '768px',
+            height: '100%',
+          },
+        },
+        '1024': {
+          name: 'lg',
+          styles: {
+            width: '1024px',
+            height: '100%',
+          },
+        },
+        '1280': {
+          name: 'xl',
+          styles: {
+            width: '1280px',
+            height: '100%',
+          },
+        },
+        '1536': {
+          name: '2xl',
+          styles: {
+            width: '1536px',
+            height: '100%',
+          },
+        },
+      },
+    },
   },
 };
 

web/.storybook/theme.ts

@@ -1,8 +1,8 @@
 import { create } from '@storybook/theming/create';
-import brandImage from '../../design/immich-logo-inline-light.png';
+import brandImage from '../../design/immich-logo-inline-dark.svg';
 
 export default create({
-  base: 'light',
+  base: 'dark',
   brandTitle: 'immich',
   brandUrl: 'https://immich.app/',
   brandImage,

web/package-lock.json

@@ -36,6 +36,7 @@
         "@storybook/addon-interactions": "^8.1.5",
         "@storybook/addon-links": "^8.1.5",
         "@storybook/addon-svelte-csf": "^4.1.3",
+        "@storybook/addon-themes": "^8.1.5",
         "@storybook/blocks": "^8.1.5",
         "@storybook/svelte": "^8.1.5",
         "@storybook/sveltekit": "^8.1.5",
@@ -4267,6 +4268,19 @@
         }
       }
     },
+    "node_modules/@storybook/addon-themes": {
+      "version": "8.1.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-themes/-/addon-themes-8.1.5.tgz",
+      "integrity": "sha512-B+qJW52ZATuH57SWHIAw4S8bxrLoWKKKTtMeEmhgtlsLYZL31/i+uYpsTTqpkkLx9JK6ofZAV/cjGKWDbsh3Eg==",
+      "dev": true,
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@storybook/addon-toolbars": {
       "version": "8.1.5",
       "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.1.5.tgz",

web/package.json

@@ -32,6 +32,7 @@
     "@storybook/addon-interactions": "^8.1.5",
     "@storybook/addon-links": "^8.1.5",
     "@storybook/addon-svelte-csf": "^4.1.3",
+    "@storybook/addon-themes": "^8.1.5",
     "@storybook/blocks": "^8.1.5",
     "@storybook/svelte": "^8.1.5",
     "@storybook/sveltekit": "^8.1.5",