Transition to using theme context for colors

Author: chadian

components/button.js

@@ -1,25 +1,31 @@
+import { useTheme } from '../hooks/theme/index';
+
 export default function Button({ children, onClick = () => {} , attrs = {}, size = "large" }) {
+  const [ theme ] = useTheme();
+  const { buttonTextColor, buttonBgColor } = theme;
+
   const {
     className = '',
     type: buttonType,
     ...buttonAttrs
   } = attrs;
 
   const largeButtonClassNames = [
-    "bg-transparent",
+    buttonTextColor,
+    buttonBgColor,
     "inline-block",
-    "text-red-600",
     "font-medium",
     "py-1.5",
     "text-xl",
   ];
 
   const smallButtonClassNames = [
-    "bg-transparent",
+    buttonTextColor,
+    buttonBgColor,
     "inline-block",
     "text-red-600",
     "font-medium",
-    "py-1.5"
+    "py-1.5",
   ];
 
   const sizeClassName =

components/rhythm/occurrence.js

@@ -1,12 +1,20 @@
+import { useTheme } from '../../hooks/theme/index';
 import { format } from 'date-fns';
 
 export default function Occurrence({ hit, onClick, open, date }) {
+  const [theme] = useTheme();
+  const {
+    occurrenceOpenBgColor,
+    occurrenceClosedHitBgColor,
+    occurrenceClosedMissBgColor,
+  } = theme;
+
   const classNames = ["w-6", "h-6", "rounded-full", "inline-block"];
   const formattedDate = format(date, "MMMM do, yyyy");
 
   if (open) {
     const ariaLabel = hit ? `Mark as missed on ${formattedDate}` : `Mark as hit on ${formattedDate}`;
-    classNames.push("bg-white");
+    classNames.push(occurrenceOpenBgColor);
 
     if (!hit) {
       classNames.push("filter-blur-occurrence-miss");
@@ -21,7 +29,7 @@ export default function Occurrence({ hit, onClick, open, date }) {
       ></button>
     );
   } else {
-    classNames.push(hit ? "bg-red-600" : "bg-gray-100");
+    classNames.push(hit ? occurrenceClosedHitBgColor : occurrenceClosedMissBgColor);
 
     const ariaLabel = hit
       ? `Hit target on ${formattedDate}`

components/stripe.js

@@ -1,5 +1,12 @@
+import { useTheme } from '../hooks/theme/index';
+
 export default function Stripe() {
+  const [theme] = useTheme();
+  const { stripeBgClass } = theme;
+
   return (
-    <div className="absolute top-0 -right-12 bg-red-600 w-12 h-full"></div>
+    <div
+      className={`absolute top-0 -right-12 ${stripeBgClass} w-12 h-full`}
+    ></div>
   );
 }

hooks/theme/index.js

@@ -0,0 +1,40 @@
+import React, { createContext, useState, useContext } from "react";
+import { getLocalStorageTheme, setLocalStorageTheme } from './local-storage';
+
+const themeDefinitions = {
+  swiss: {
+    stripeBgClass: "bg-red-600",
+    occurrenceClosedHitBgColor: "bg-red-600",
+    occurrenceClosedMissBgColor: "bg-gray-100",
+    occurrenceOpenBgColor: "bg-white",
+    buttonTextColor: "text-red-600",
+    buttonBgColor: "bg-transparent",
+  },
+};
+
+const DEFAULT_THEME = 'swiss';
+export const themeOptions = Object.keys(themeDefinitions);
+
+const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+  debugger;
+  const { theme: localStorageTheme } = getLocalStorageTheme() ?? {};
+  const initialThemeName = localStorageTheme ?? DEFAULT_THEME;
+  const [themeName, setThemeName] = useState(initialThemeName);
+
+  const saveTheme = (theme) => {
+    if (themeOptions.includes(theme)) {
+      setLocalStorageTheme({ theme });
+      setThemeName(theme);
+    }
+  };
+
+  return (
+    <ThemeContext.Provider value={[themeDefinitions[themeName], saveTheme]}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => useContext(ThemeContext);

hooks/theme/local-storage.js

@@ -0,0 +1,15 @@
+const THEME_LOCAL_STORAGE_KEY = "app.theme";
+
+export function getLocalStorageTheme() {
+  try {
+    const jsonData = window.localStorage.getItem(THEME_LOCAL_STORAGE_KEY);
+    const themeData = JSON.parse(jsonData);
+    return themeData;
+  } catch {
+    return;
+  }
+}
+
+export function setLocalStorageTheme(themeData) {
+  window.localStorage.setItem(THEME_LOCAL_STORAGE_KEY, JSON.stringify(themeData));
+}

pages/_app.js

@@ -1,12 +1,16 @@
-import '../styles/globals.css'
+import dynamic from "next/dynamic";
+import "../styles/globals.css";
 import { RhythmsProvider } from "../hooks/rhythms/index";
+import { ThemeProvider } from "../hooks/theme/index";
 
 function MyApp({ Component, pageProps }) {
   return (
-    <RhythmsProvider>
-      <Component {...pageProps} />
-    </RhythmsProvider>
+    <ThemeProvider>
+      <RhythmsProvider>
+        <Component {...pageProps} />
+      </RhythmsProvider>
+    </ThemeProvider>
   );
 }
 
-export default MyApp
+export default MyApp;

pages/index.js

@@ -1,6 +1,7 @@
+import dynamic from 'next/dynamic'
 import Head from "next/head";
 import { useState } from "react";
-import { useRhythms, RhythmsProvider } from "../hooks/rhythms/index";
+import { useRhythms } from "../hooks/rhythms/index";
 import RhythmEdit from "../components/rhythm-edit/rhythm-edit";
 import Stripe from "../components/stripe";
 import Modal from "../components/modal";
@@ -16,7 +17,7 @@ function emptyRhythm() {
   };
 }
 
-export default function Home() {
+function RhythmischApp() {
   const [modalIsOpen, setModal] = useState(false);
   const [rhythmToEdit, setRhythmToEdit] = useState();
   const [, rhythmsDispatch] = useRhythms();
@@ -81,3 +82,5 @@ export default function Home() {
     </>
   );
 }
+
+export default dynamic(() => Promise.resolve(RhythmischApp), { ssr: false });

styles/globals.css

@@ -10,4 +10,4 @@
   .bg-filter-blur-modal {
     backdrop-filter: blur(5px);
   }
-}
+}

tailwind.config.js

@@ -15,7 +15,26 @@ function customContainer({ addComponents, theme }) {
   });
 }
 
+function addColorCssProperties({ addComponents, config }) {
+  const colors = config(`theme.colors`, []);
+  const cssProperties = {};
 
+  for (const color in colors) {
+    const colorObj = colors[color];
+
+    for (colorKey in colorObj) {
+      const hexValue = colorObj[colorKey].toString();
+      const cssPropertyName = `--color-${color}-${colorKey}`.replace(
+        /-default$/,
+        ""
+      );
+
+      cssProperties[cssPropertyName] = hexValue;
+    }
+  }
+
+  addComponents({ ':root': cssProperties });
+}
 
 module.exports = {
   purge: ["./pages/**/*.js", "./components/**/*.js"],
@@ -29,5 +48,5 @@ module.exports = {
   variants: {
     extend: {},
   },
-  plugins: [customContainer],
+  plugins: [customContainer, addColorCssProperties],
 };