From ec645c06cc999b65ec8a344bae95c7faf83b62e5 Mon Sep 17 00:00:00 2001
From: Ben Basten <45583362+ben-basten@users.noreply.github.com>
Date: Wed, 5 Jun 2024 12:23:19 -0400
Subject: [PATCH] feat: dark mode toggle, tailwind viewports

---
 web/.storybook/main.ts    |  1 +
 web/.storybook/preview.ts | 57 +++++++++++++++++++++++++++++++++++++++
 web/.storybook/theme.ts   |  4 +--
 web/package-lock.json     | 14 ++++++++++
 web/package.json          |  1 +
 5 files changed, 75 insertions(+), 2 deletions(-)

diff --git a/web/.storybook/main.ts b/web/.storybook/main.ts
index 9feba5048d..0a8d3e5325 100644
--- a/web/.storybook/main.ts
+++ b/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',
diff --git a/web/.storybook/preview.ts b/web/.storybook/preview.ts
index 358dbc5ba9..39fe3e1b6b 100644
--- a/web/.storybook/preview.ts
+++ b/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%',
+          },
+        },
+      },
+    },
   },
 };
 
diff --git a/web/.storybook/theme.ts b/web/.storybook/theme.ts
index fb2555fa25..e3e09c0750 100644
--- a/web/.storybook/theme.ts
+++ b/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,
diff --git a/web/package-lock.json b/web/package-lock.json
index 79329910cb..16f8ce9ace 100644
--- a/web/package-lock.json
+++ b/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",
diff --git a/web/package.json b/web/package.json
index d31c6c058c..72192f8ba6 100644
--- a/web/package.json
+++ b/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",