add dark and light mode facility (#135)

massalabs · May 29, 2023 · 3c372cf · 3c372cf
1 parent 684b4c2
commit 3c372cf
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 15 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -3,9 +3,17 @@ import '../src/global.css';
 
 import type { Preview } from '@storybook/react';
 import { StoryFn } from '@storybook/react';
+import { colorDarkBlue, colorWhite } from './../presets/colors';
 
 const preview: Preview = {
   parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'light', value: colorWhite },
+        { name: 'dark', value: colorDarkBlue },
+      ],
+    },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
@@ -17,17 +25,27 @@ const preview: Preview = {
   decorators: [
     (Story: StoryFn) => (
       <>
-        <div className="theme-dark">
-          <h3>Theme Dark</h3>
+        <div
+          className="theme-dark"
+          style={{ background: colorDarkBlue, padding: '20px' }}
+        >
+          <h3 style={{ padding: '20px', color: colorWhite }}>Theme Dark 👇</h3>
+          <hr />
+          <br />
           <Story />
         </div>
 
-        <br />
-        <hr />
         <br />
 
-        <div className="theme-light">
-          <h3>Theme Light</h3>
+        <div
+          className="theme-light"
+          style={{ background: colorWhite, padding: '20px' }}
+        >
+          <h3 style={{ padding: '20px', color: colorDarkBlue }}>
+            Theme Light 👇
+          </h3>
+          <hr />
+          <br />
           <Story />
         </div>
       </>

diff --git a/presets/colors.js b/presets/colors.js
@@ -0,0 +1,9 @@
+export const colorGreen = '#1AE19D';
+export const colorWhite = '#FFFFFF';
+export const colorDarkGrey = '#DADADA';
+export const colorLightGrey = '#F1F1F1';
+export const colorDarkBlue = '#151A26';
+export const colorBasicBlue = '#1A202E';
+export const colorLightBlue = '#2E374C';
+export const colorWarning = '#FFA41D';
+export const colorError = '#FF4F4F';
diff --git a/presets/massa-station-preset.js b/presets/massa-station-preset.js
@@ -4,15 +4,17 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { createThemes } = require('tw-colors');
 
-const colorGreen = '#1AE19D';
-const colorWhite = '#FFFFFF';
-const colorDarkGrey = '#DADADA';
-const colorLightGrey = '#F1F1F1';
-const colorDarkBlue = '#151A26';
-const colorBasicBlue = '#1A202E';
-const colorLightBlue = '#2E374C';
-const colorWarning = '#FFA41D';
-const colorError = '#FF4F4F';
+import {
+  colorGreen,
+  colorWhite,
+  colorDarkGrey,
+  colorLightGrey,
+  colorDarkBlue,
+  colorBasicBlue,
+  colorLightBlue,
+  colorWarning,
+  colorError,
+} from './colors';
 
 /** @type {import('tailwindcss').Config} */
 import plugin from 'tailwindcss/plugin';