feat: tidied themes and added bgs

the-standard · May 24, 2024 · 62b082b · 62b082b
1 parent 7263633
commit 62b082b
Show file tree

Hide file tree

Showing 10 changed files with 32 additions and 69 deletions.
diff --git a/src/App.css b/src/App.css
@@ -74,7 +74,6 @@
     rgba(255, 255, 255, 0.0) 101.11%
   );
   --glass-inset: inset 1px 1px 1px 0px rgba(255, 255, 255, 0.3), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --bg-image: url(/src/assets/bg-dark.webp);
   --glass-accent: 0, 0, 0;
   --input-bg: rgba(var(--glass-accent), 0.6);
   --input-bg-disabled: rgba(var(--glass-accent), 0.3);
@@ -98,7 +97,6 @@
     rgba(255, 255, 255, 0.2) 101.11%
   );
   --glass-inset: inset 1px 1px 1px 0px rgba(255, 255, 255, 0.9), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --bg-image: url(/src/assets/bg-light.webp);
   --glass-accent: 255, 255, 255;
   --input-bg: rgba(var(--glass-accent), 0.6);
   --input-bg-disabled: rgba(var(--glass-accent), 0.3);
@@ -117,6 +115,19 @@
     0 2px 4px -2px rgb(0 0 0 / 0.3);
 }
 
+*[data-theme='deluxe-dark'] {
+  --bg-image: url(/src/assets/bg-deluxe-dark.webp);
+}
+*[data-theme='deluxe-light'] {
+  --bg-image: url(/src/assets/bg-deluxe-light.webp);
+}
+*[data-theme='nebula-dark'] {
+  --bg-image: url(/src/assets/bg-nebula-dark.webp);
+}
+*[data-theme='nebula-light'] {
+  --bg-image: url(/src/assets/bg-nebula-light.webp);
+}
+
 .glass-alt-bg {
   background: var(--table-alt);
 }

diff --git a/src/assets/bg-deluxe-dark.webp b/src/assets/bg-deluxe-dark.webp
diff --git a/src/assets/bg-deluxe-light.webp b/src/assets/bg-deluxe-light.webp
diff --git a/src/assets/bg-dark.webp → src/assets/bg-nebula-dark.webp b/src/assets/bg-dark.webp → src/assets/bg-nebula-dark.webp
diff --git a/src/assets/bg-light.webp → src/assets/bg-nebula-light.webp b/src/assets/bg-light.webp → src/assets/bg-nebula-light.webp
diff --git a/src/components/ThemeHandler.jsx b/src/components/ThemeHandler.jsx
@@ -20,11 +20,11 @@ const ThemeHandler = ({children}) => {
         window.matchMedia &&
         window.matchMedia('(prefers-color-scheme: dark)').matches
       ) {
-        localStorage.setItem("theme", "dark");
-        setCurrentTheme("dark");
+        localStorage.setItem("theme", "deluxe-dark");
+        setCurrentTheme("deluxe-dark");
       } else {
-        localStorage.setItem("theme", "light");
-        setCurrentTheme("light");
+        localStorage.setItem("theme", "deluxe-light");
+        setCurrentTheme("deluxe-light");
       }
     }
   }, [])

diff --git a/src/components/ui/SideNav.jsx b/src/components/ui/SideNav.jsx
@@ -25,6 +25,8 @@ const SideNav = (props) => {
   const navigate = useNavigate();
   const { currentTheme } = useCurrentTheme();
 
+  const isLight = currentTheme && currentTheme.includes('light');
+
   return (
     <Menu className="p-0 text-base-content tst-sidenav">
       <div className="flex flex-row flex-no-wrap space-x-2 md:hidden p-2 h-16">
@@ -35,7 +37,7 @@ const SideNav = (props) => {
           onClick={() => navigate("/")}
         >
           <img
-            src={currentTheme === 'light' ? (StandardioLogoBlack) : (StandardioLogoWhite)}
+            src={isLight ? (StandardioLogoBlack) : (StandardioLogoWhite)}
             alt="TheStandard.io Logo"
             className="h-5"
           />

diff --git a/src/components/ui/ThemeToggle.jsx b/src/components/ui/ThemeToggle.jsx
@@ -44,7 +44,7 @@ const ThemeToggle = (props) => {
     setCurrentTheme(newTheme);
   }
 
-  const isLight = chosenTheme.includes('light');
+  const isLight = chosenTheme && chosenTheme.includes('light');
 
   return (
     <div

diff --git a/src/components/ui/TopNav.jsx b/src/components/ui/TopNav.jsx
@@ -18,6 +18,8 @@ const TopNav = (props) => {
   const navigate = useNavigate();
   const { currentTheme } = useCurrentTheme();
 
+  const isLight = currentTheme && currentTheme.includes('light');
+
   if (address) {
     return (
       <div className="navbar sticky shadow-md tst-topnav">
@@ -35,7 +37,7 @@ const TopNav = (props) => {
             onClick={() => navigate("/")}
           >
             <img
-              src={currentTheme === 'light' ? (StandardioLogoBlack) : (StandardioLogoWhite)}
+              src={isLight ? (StandardioLogoBlack) : (StandardioLogoWhite)}
               alt="TheStandard.io Logo"
               className="h-6"
             />  

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -12,75 +12,23 @@ export default {
   ],
   theme: {
     extend: {
-      colors: {
-        "nav": "oklch(var(--nav) / <alpha-value>)",
-      },
+      colors: {},
     },
   },
   daisyui: {
     themes: [
       {
-        'light': {
-          'primary' : '#5617de',           /* Primary color */
-          // 'primary' : '#570df8',           /* Primary color */
-          // 'primary-focus' : '#4506cb',     /* Primary color - focused */
-          'primary-content' : '#ffffff',   /* Foreground content color to use on primary color */
-
-          'secondary' : '#f000b8',         /* Secondary color */
-          'secondary-focus' : '#bd0091',   /* Secondary color - focused */
-          'secondary-content' : '#ffffff', /* Foreground content color to use on secondary color */
-
-          'accent' : '#37cdbe',            /* Accent color */
-          'accent-focus' : '#2ba69a',      /* Accent color - focused */
-          'accent-content' : '#ffffff',    /* Foreground content color to use on accent color */
-
-          'neutral' : '#3b424e',           /* Neutral color */
-          'neutral-focus' : '#2a2e37',     /* Neutral color - focused */
-          'neutral-content' : '#ffffff',   /* Foreground content color to use on neutral color */
-
-          'base-100' : '#ffffff',          /* Base color of page, used for blank backgrounds */
-          'base-200' : '#f9fafb',          /* Base color, a little darker */
-          'base-300' : '#ced3d9',          /* Base color, even more darker */
-          'base-content' : '#1e2734',      /* Foreground content color to use on base color */
-
-          'info' : '#1c92f2',              /* Info */
-          'success' : '#009485',           /* Success */
-          'warning' : '#ff9900',           /* Warning */
-          'error' : '#ff5724',             /* Error */
-
-          '--rounded-box': '0.65rem',          /* border-radius for cards and other big elements */
-          '--rounded-btn': '0.65rem',        /* border-radius for buttons and similar elements */
-          '--rounded-badge': '0.65rem',      /* border-radius for badge and other small elements */
-
-          '--animation-btn': '.25s',       /* bounce animation time for button */
-          '--animation-input': '.2s',       /* bounce animation time for checkbox, toggle, etc */
-
-          '--btn-text-case': 'uppercase',   /* default text case for buttons */
-          '--navbar-padding': '.5rem',      /* default padding for navbar */
-          '--border-btn': '1px',            /* default border size for button */
-
-          '--nav' : '100% 0 0',             /* Colour of side and top nav */
+        'deluxe-light': {
+          ...require("daisyui/src/theming/themes")["light"],
+          'primary' : '#5617de',
+          'base-content' : 'rgba(0,0,0,0.8)',
         },
       },
       {
-        'dark': {
+        'deluxe-dark': {
           ...require("daisyui/src/theming/themes")["dark"],
-          'primary' : '#5617de',           /* Primary color */
-
-          'base-content' : 'rgba(255,255,255,0.8)',      /* Foreground content color to use on base color */
-
-          '--rounded-box': '0.65rem',          /* border-radius for cards and other big elements */
-          '--rounded-btn': '0.65rem',        /* border-radius for buttons and similar elements */
-          '--rounded-badge': '0.65rem',      /* border-radius for badge and other small elements */
-
-          '--animation-btn': '.25s',       /* bounce animation time for button */
-          '--animation-input': '.2s',       /* bounce animation time for checkbox, toggle, etc */
-
-          '--btn-text-case': 'uppercase',   /* default text case for buttons */
-          '--navbar-padding': '.5rem',      /* default padding for navbar */
-          '--border-btn': '1px',            /* default border size for button */
-
-          '--nav' : '0% 0 0',             /* Colour of side and top nav */
+          'primary' : '#5617de',
+          'base-content' : 'rgba(255,255,255,0.8)',
         },
       },
     ],