From 76930eb131a30eb22b3761c09edc849532b17c08 Mon Sep 17 00:00:00 2001
From: Echo <ChaosExAnima@users.noreply.github.com>
Date: Mon, 29 Jun 2026 15:36:28 +0200
Subject: [PATCH] Add dark mode to storybook (#39656)

---
 .storybook/manager.ts         | 10 +++++++---
 .storybook/static/logo.svg    | 21 +++++++++++++++++++++
 .storybook/storybook-theme.ts |  7 -------
 3 files changed, 28 insertions(+), 10 deletions(-)
 create mode 100644 .storybook/static/logo.svg
 delete mode 100644 .storybook/storybook-theme.ts

diff --git a/.storybook/manager.ts b/.storybook/manager.ts
index 53dfaa15abf..8e1b3233a30 100644
--- a/.storybook/manager.ts
+++ b/.storybook/manager.ts
@@ -1,7 +1,11 @@
 import { addons } from 'storybook/manager-api';
-
-import theme from './storybook-theme';
+import { themes } from 'storybook/theming';
 
 addons.setConfig({
-  theme,
+  theme: {
+    ...themes.normal,
+    brandTitle: 'Mastodon Storybook',
+    brandImage: 'logo.svg',
+    colorSecondary: '#6364FF',
+  },
 });
diff --git a/.storybook/static/logo.svg b/.storybook/static/logo.svg
new file mode 100644
index 00000000000..d85fc9ab761
--- /dev/null
+++ b/.storybook/static/logo.svg
@@ -0,0 +1,21 @@
+<svg width="314" height="80" viewBox="0 0 314 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M73.4455 17.6962C72.3169 9.19775 65.0038 2.48901 56.346 1.19841C54.8811 0.979247 49.3453 0.175659 36.5206 0.175659H36.4245C23.5879 0.175659 20.838 0.979247 19.373 1.19841C10.9433 2.46467 3.25813 8.4794 1.38487 17.0875C0.496264 21.3246 0.400199 26.0244 0.568313 30.3345C0.808475 36.5198 0.856508 42.6805 1.40888 48.8414C1.79314 52.9325 2.45359 56.9869 3.40223 60.9804C5.17943 68.3588 12.3603 74.4954 19.3971 76.9914C26.9261 79.5969 35.0317 80.0352 42.7888 78.2453C43.6414 78.0385 44.482 77.8071 45.3226 77.5392C47.2079 76.9304 49.4173 76.2486 51.0504 75.0555C51.0745 75.0432 51.0865 75.0189 51.0985 74.9945C51.1105 74.9702 51.1225 74.9458 51.1225 74.9093V68.9433C51.1225 68.9433 51.1225 68.8946 51.0985 68.8702C51.0985 68.8459 51.0745 68.8215 51.0504 68.8093C51.0264 68.7972 51.0024 68.785 50.9785 68.7728C50.9543 68.7728 50.9304 68.7728 50.9064 68.7728C45.9349 69.9783 40.8316 70.587 35.7281 70.5748C26.9261 70.5748 24.5605 66.3377 23.8881 64.5844C23.3477 63.0625 22.9995 61.4675 22.8554 59.8603C22.8554 59.8359 22.8554 59.8116 22.8674 59.7873C22.8674 59.7629 22.8914 59.7386 22.9155 59.7263C22.9394 59.7142 22.9634 59.702 22.9874 59.6899H23.0715C27.9588 60.883 32.9782 61.4918 38.0096 61.4918C39.2225 61.4918 40.4232 61.4918 41.6361 61.4554C46.6915 61.3092 52.0232 61.0535 57.0065 60.0673C57.1265 60.0429 57.2587 60.0186 57.3667 59.9943C65.2201 58.4601 72.6891 53.6629 73.4455 41.5117C73.4697 41.0369 73.5417 36.4954 73.5417 36.0084C73.5417 34.3159 74.082 24.0398 73.4576 17.7207L73.4455 17.6962Z" fill="url(#paint0_linear_612_176)"/>
+<path d="M15.3145 22.4452C15.3145 19.9613 17.2718 17.9646 19.6974 17.9646C22.1231 17.9646 24.0803 19.9735 24.0803 22.4452C24.0803 24.9168 22.1231 26.9257 19.6974 26.9257C17.2718 26.9257 15.3145 24.9168 15.3145 22.4452Z" fill="white"/>
+<path d="M80.5188 26.3048V46.9058H72.5334V26.9136C72.5334 22.7008 70.8042 20.57 67.3338 20.57C63.5033 20.57 61.5699 23.1148 61.5699 28.1189V39.0647H53.6446V28.1189C53.6446 23.0904 51.7353 20.57 47.8807 20.57C44.4224 20.57 42.6811 22.7008 42.6811 26.9136V46.8937H34.7078V26.3048C34.7078 22.1042 35.7525 18.7559 37.8539 16.2721C40.0274 13.7883 42.8733 12.5342 46.3916 12.5342C50.4744 12.5342 53.5725 14.1413 55.614 17.3557L57.6073 20.7649L59.6007 17.3557C61.642 14.1536 64.7281 12.5342 68.8229 12.5342C72.3412 12.5342 75.1872 13.8005 77.3607 16.2721C79.4621 18.7559 80.5068 22.0798 80.5068 26.3048H80.5188ZM107.993 36.5444C109.65 34.7546 110.431 32.5386 110.431 29.8357C110.431 27.1327 109.638 24.8924 107.993 23.1879C106.408 21.398 104.391 20.5457 101.953 20.5457C99.5156 20.5457 97.5102 21.398 95.9132 23.1879C94.3281 24.8924 93.5356 27.1327 93.5356 29.8357C93.5356 32.5386 94.3281 34.7789 95.9132 36.5444C97.4982 38.2489 99.5156 39.1135 101.953 39.1135C104.391 39.1135 106.396 38.2612 107.993 36.5444ZM110.431 13.3622H118.296V46.3093H110.431V42.4253C108.053 45.6517 104.763 47.2468 100.488 47.2468C96.2134 47.2468 92.9232 45.603 90.0052 42.2426C87.1353 38.8822 85.6823 34.7302 85.6823 29.86C85.6823 24.9898 87.1472 20.8988 90.0052 17.5383C92.9352 14.1779 96.4176 12.4734 100.488 12.4734C104.559 12.4734 108.053 14.0562 110.431 17.2705V13.3865V13.3622ZM144.762 29.2148C147.08 31.0045 148.233 33.5006 148.173 36.654C148.173 40.0144 147.02 42.6566 144.642 44.4829C142.265 46.2727 139.394 47.1858 135.912 47.1858C129.632 47.1858 125.369 44.5438 123.111 39.357L129.933 35.2051C130.844 38.0298 132.851 39.4909 135.912 39.4909C138.722 39.4909 140.115 38.5778 140.115 36.6661C140.115 35.2782 138.289 34.0241 134.567 33.05C133.162 32.6604 131.998 32.2586 131.097 31.9299C129.812 31.4064 128.719 30.8097 127.806 30.0792C125.549 28.2894 124.397 25.9273 124.397 22.8956C124.397 19.6691 125.489 17.1 127.687 15.2494C129.945 13.3378 132.694 12.4246 135.984 12.4246C141.231 12.4246 145.062 14.7258 147.572 19.4012L140.872 23.346C139.899 21.1058 138.241 19.9856 135.984 19.9856C133.606 19.9856 132.454 20.8988 132.454 22.6886C132.454 24.0767 134.279 25.3308 138.002 26.3048C140.872 26.9623 143.129 27.9485 144.762 29.2148H144.774H144.762ZM169.764 21.5198H162.87V35.2295C162.87 36.8731 163.483 37.8715 164.648 38.3221C165.5 38.6508 167.206 38.7116 169.776 38.5899V46.2971C164.48 46.9545 160.637 46.4188 158.38 44.6533C156.122 42.9487 155.029 39.771 155.029 35.2416V21.5198H149.733V13.3499H155.029V6.7021L162.894 4.13305V13.3622H169.788V21.532H169.776L169.764 21.5198ZM194.836 36.3496C196.422 34.6451 197.213 32.4656 197.213 29.8236C197.213 27.1814 196.422 25.0264 194.836 23.2974C193.239 21.5928 191.293 20.7283 188.916 20.7283C186.538 20.7283 184.593 21.5807 182.996 23.2974C181.471 25.0872 180.678 27.2423 180.678 29.8236C180.678 32.4047 181.471 34.5598 182.996 36.3496C184.581 38.0542 186.538 38.9186 188.916 38.9186C191.293 38.9186 193.239 38.0664 194.836 36.3496ZM177.461 42.206C174.35 38.8456 172.826 34.7668 172.826 29.8236C172.826 24.8802 174.35 20.8623 177.461 17.5019C180.571 14.1413 184.413 12.4368 188.916 12.4368C193.419 12.4368 197.274 14.1413 200.372 17.5019C203.47 20.8623 205.067 25.0141 205.067 29.8236C205.067 34.6328 203.47 38.8456 200.372 42.206C197.261 45.5666 193.48 47.2102 188.916 47.2102C184.353 47.2102 180.559 45.5666 177.461 42.206ZM231.364 36.5323C232.95 34.7425 233.742 32.5265 233.742 29.8236C233.742 27.1206 232.95 24.8802 231.364 23.1756C229.78 21.3858 227.763 20.5336 225.325 20.5336C222.888 20.5336 220.869 21.3858 219.225 23.1756C217.64 24.8802 216.847 27.1206 216.847 29.8236C216.847 32.5265 217.64 34.7668 219.225 36.5323C220.881 38.2368 222.948 39.1013 225.325 39.1013C227.703 39.1013 229.768 38.249 231.364 36.5323ZM233.742 0.163818H241.607V46.2971H233.742V42.413C231.425 45.6396 228.135 47.2345 223.86 47.2345C219.585 47.2345 216.247 45.5909 213.304 42.2304C210.434 38.8699 208.982 34.7181 208.982 29.8479C208.982 24.9777 210.446 20.8867 213.304 17.5262C216.222 14.1657 219.765 12.4611 223.86 12.4611C227.955 12.4611 231.425 14.044 233.742 17.2583V0.175994V0.163818ZM269.238 36.313C270.823 34.6085 271.616 32.4291 271.616 29.787C271.616 27.1449 270.823 24.9898 269.238 23.2609C267.654 21.5563 265.708 20.6919 263.318 20.6919C260.929 20.6919 258.996 21.5441 257.399 23.2609C255.873 25.0507 255.08 27.2057 255.08 29.787C255.08 32.3682 255.873 34.5232 257.399 36.313C258.984 38.0177 260.941 38.8822 263.318 38.8822C265.696 38.8822 267.642 38.0298 269.238 36.313ZM251.863 42.1696C248.765 38.809 247.227 34.7302 247.227 29.787C247.227 24.8437 248.753 20.8257 251.863 17.4653C254.972 14.1049 258.815 12.4002 263.318 12.4002C267.822 12.4002 271.676 14.1049 274.774 17.4653C277.884 20.8257 279.469 24.9777 279.469 29.787C279.469 34.5964 277.884 38.809 274.774 42.1696C271.664 45.53 267.882 47.1737 263.318 47.1737C258.755 47.1737 254.96 45.53 251.863 42.1696ZM313.5 26.0248V46.2605H305.635V27.084C305.635 24.9045 305.094 23.2609 303.978 22.019C302.945 20.8988 301.48 20.3144 299.594 20.3144C295.152 20.3144 292.894 23.0173 292.894 28.4842V46.2727H285.029V13.3499H292.894V17.0513C294.779 13.9587 297.781 12.4368 301.973 12.4368C305.322 12.4368 308.072 13.6179 310.211 16.0529C312.408 18.4881 313.5 21.7877 313.5 26.0612" class="text" />
+<defs>
+<linearGradient id="paint0_linear_612_176" x1="37.121" y1="0.175659" x2="37.121" y2="79.3169" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6364FF"/>
+<stop offset="1" stop-color="#563ACC"/>
+</linearGradient>
+</defs>
+<style>
+  .text {
+    fill: black;
+  }
+  @media (prefers-color-scheme: dark) {
+    .text {
+      fill: white;
+    }
+  }
+</style>
+</svg>
diff --git a/.storybook/storybook-theme.ts b/.storybook/storybook-theme.ts
deleted file mode 100644
index 7a72ba1c758..00000000000
--- a/.storybook/storybook-theme.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { create } from 'storybook/theming';
-
-export default create({
-  base: 'light',
-  brandTitle: 'Mastodon Storybook',
-  brandImage: 'https://joinmastodon.org/logos/wordmark-black-text.svg',
-});