Merge pull request #599 from OrkoHunter/OrkoHunter/#543-storybook-dark-light-mode-switch

Support dark/light mode in Storybook

packages/core/src/components/ProgressBars/CircleProgress.tsx

@@ -31,7 +31,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
     transform: 'translate(-50%, -60%)',
     fontSize: 45,
     fontWeight: 'bold',
-    color: theme.palette.textSubtle,
+    color: theme.palette.textContrast,
   },
   circle: {
     width: '80%',

packages/storybook/.storybook/config.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { addDecorator } from '@storybook/react';
-import { lightTheme } from '@backstage/theme';
+import { lightTheme, darkTheme } from '@backstage/theme';
 import { CssBaseline, ThemeProvider } from '@material-ui/core';
+import { useDarkMode } from 'storybook-dark-mode';
 
 addDecorator(story => (
-  <ThemeProvider theme={lightTheme}>
+  <ThemeProvider theme={useDarkMode() ? darkTheme : lightTheme}>
     <CssBaseline>{story()}</CssBaseline>
   </ThemeProvider>
 ));

packages/storybook/.storybook/main.js

@@ -9,6 +9,7 @@ module.exports = {
     '@storybook/addon-actions',
     '@storybook/addon-links',
     '@storybook/addon-storysource',
+    'storybook-dark-mode/register',
   ],
   webpackFinal: async config => {
     config.resolve.alias = {

packages/storybook/package.json

@@ -18,7 +18,8 @@
     "@storybook/addon-links": "^5.3.17",
     "@storybook/addon-storysource": "^5.3.18",
     "@storybook/addons": "^5.3.17",
-    "@storybook/react": "^5.3.17"
+    "@storybook/react": "^5.3.17",
+    "storybook-dark-mode": "^0.4.1"
   },
   "dependencies": {
     "@backstage/theme": "0.1.1-alpha.4"

packages/theme/src/themes.ts

@@ -41,6 +41,7 @@ export const lightTheme = createTheme({
     main: blue[500],
   },
   border: '#E6E6E6',
+  textContrast: '#000000',
   textVerySubtle: '#DDD',
   textSubtle: '#6E6E6E',
   highlight: '#FFFBCC',
@@ -80,6 +81,7 @@ export const darkTheme = createTheme({
     main: blue[500],
   },
   border: '#E6E6E6',
+  textContrast: '#FFFFFF',
   textVerySubtle: '#DDD',
   textSubtle: '#6E6E6E',
   highlight: '#FFFBCC',

packages/theme/src/types.ts

@@ -30,6 +30,7 @@ type PaletteAdditions = {
     background: string;
   };
   border: string;
+  textContrast: string;
   textVerySubtle: string;
   textSubtle: string;
   highlight: string;

yarn.lock

@@ -7226,7 +7226,7 @@ cyclist@^1.0.1:
   resolved "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
-cypress@*, cypress@4.2.0, cypress@^4.2.0:
+cypress@*, cypress@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/cypress/-/cypress-4.2.0.tgz#45673fb648b1a77b9a78d73e58b89ed05212d243"
   integrity sha512-8LdreL91S/QiTCLYLNbIjLL8Ht4fJmu/4HGLxUI20Tc7JSfqEfCmXELrRfuPT0kjosJwJJZacdSji9XSRkPKUw==
@@ -8726,7 +8726,7 @@ fast-deep-equal@^2.0.1:
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
 
-fast-deep-equal@^3.1.1:
+fast-deep-equal@^3.0.0, fast-deep-equal@^3.1.1:
   version "3.1.1"
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
   integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
@@ -18423,6 +18423,14 @@ store2@^2.7.1:
   resolved "https://registry.npmjs.org/store2/-/store2-2.10.0.tgz#46b82bb91878daf1b0d56dec2f1d41e54d5103cf"
   integrity sha512-tWEpK0snS2RPUq1i3R6OahfJNjWCQYNxq0+by1amCSuw0mXtymJpzmZIeYpA1UAa+7B0grCpNYIbDcd7AgTbFg==
 
+storybook-dark-mode@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/storybook-dark-mode/-/storybook-dark-mode-0.4.1.tgz#8bd4aa12f5fa9691ae9b422be76cc2095b432329"
+  integrity sha512-QGH6/eOmqXZFOGWA/2tLD1verRCcfmIgxxmK2kwIyfVXGFdGA3DCQttqWCCfm/4MwJeOR+6NqtPeN8GEqg9+oQ==
+  dependencies:
+    fast-deep-equal "^3.0.0"
+    memoizerific "^1.11.3"
+
 stream-browserify@^2.0.1:
   version "2.0.2"
   resolved "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"