From 3c372cfd375f046410e1f5ab73bb6cd4f4116e87 Mon Sep 17 00:00:00 2001
From: MaZ <126461030+mazmassa@users.noreply.github.com>
Date: Mon, 29 May 2023 18:11:28 +0200
Subject: [PATCH] add dark and light mode facility (#135)

---
 .storybook/preview.tsx          | 30 ++++++++++++++++++++++++------
 presets/colors.js               |  9 +++++++++
 presets/massa-station-preset.js | 20 +++++++++++---------
 3 files changed, 44 insertions(+), 15 deletions(-)
 create mode 100644 presets/colors.js

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 4b8304e9..e658d2ce 100644
--- 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
new file mode 100644
index 00000000..01daf796
--- /dev/null
+++ 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
index bf29eb44..bd8b1d13 100644
--- 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';