feat(core): added dark mode

Signed-off-by: coder12git <[email protected]>
sudhanshutech · Nov 5, 2023 · 230bdd0 · 230bdd0
1 parent 9606021
commit 230bdd0
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 22 deletions.
diff --git a/site/gatsby-config.js b/site/gatsby-config.js
@@ -6,5 +6,5 @@ module.exports = {
     title: `Sistent Design System | Layer5`,
     siteUrl: `https://design.layer5.io`
   },
-  plugins: ["gatsby-plugin-postcss"]
+  plugins: ["gatsby-plugin-postcss", 'gatsby-plugin-dark-mode']
 };
diff --git a/site/package-lock.json b/site/package-lock.json
diff --git a/site/package.json b/site/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "autoprefixer": "^10.4.16",
     "gatsby": "^5.12.4",
+    "gatsby-plugin-dark-mode": "^1.1.2",
     "gatsby-plugin-postcss": "^6.12.0",
     "postcss": "^8.4.31",
     "react": "^18.2.0",

diff --git a/site/src/assets/images/SearchDark.svg b/site/src/assets/images/SearchDark.svg
diff --git a/site/src/components/Navigation/index.js b/site/src/components/Navigation/index.js
@@ -1,36 +1,37 @@
 import React from "react";
 import Search from '../../assets/images/Search.svg';
-import Weather from '../../assets/images/Weather.svg';
+import SearchDark from "../../assets/images/SearchDark.svg";
+import ThemeToggle from "../Theme";
 
 const Navbar = ()=>{
    return (
     <>
-    <div className=" w-[1440px] h-[100px] px-10 py-6 bg-[#FDFDFD] justify-between items-center inline-flex">
+    <div className=" w-[1440px] h-[100px] px-10 py-6 bg-background-default justify-between items-center inline-flex">
     <div className="h-12 justify-center items-center gap-4 flex">
-        <div className="w-12 h-12 relative rounded-lg border border-[#647176]" />
-        <div className="grow shrink basis-0"><span className="text-[#000D12] text-2xl font-bold font-qanelas leading-loose">Sistent </span><span className="text-[#000D12] text-2xl font-medium font-qanelas-medium leading-loose">Design System</span></div>
+        <div className="w-12 h-12 relative rounded-lg border border-border-strong" />
+        <div className="grow shrink basis-0"><span className="text-text-default text-2xl font-bold font-qanelas leading-loose">Sistent </span><span className="text-text-default text-2xl font-medium font-qanelas-medium leading-loose">Design System</span></div>
     </div>
     <div className="justify-start items-center gap-8 flex">
         <div className="justify-start items-start gap-8 flex">
-            <div className="w-[148px] p-2 rounded-lg border border-[#007763] justify-center items-center gap-1 flex">
-                <div className="grow shrink basis-0 text-center text-[#007763] text-base font-normal font-openSans leading-7">Guidelines</div>
+            <div className="w-[148px] p-2 rounded-lg border border-text-brand justify-center items-center gap-1 flex">
+                <div className="grow shrink basis-0 text-center text-text-brand text-base font-normal font-openSans leading-7">Guidelines</div>
             </div>
-            <div className="w-[148px] px-4 py-2 rounded-lg border border-[#007763] justify-center items-center gap-1 flex">
-                <div className="grow shrink basis-0 text-center text-[#007763] text-base font-normal font-openSans leading-7">Core Elements</div>
+            <div className="w-[148px] px-4 py-2 rounded-lg border border-text-brand justify-center items-center gap-1 flex">
+                <div className="grow shrink basis-0 text-center text-text-brand text-base font-normal font-openSans leading-7">Core Elements</div>
             </div>
-            <div className="w-[148px] p-2 rounded-lg border border-[#007763] justify-center items-center gap-1 flex">
-                <div className="grow shrink basis-0 text-center text-[#007763] text-base font-normal font-openSans leading-7">Resources</div>
+            <div className="w-[148px] p-2 rounded-lg border border-text-brand justify-center items-center gap-1 flex">
+                <div className="grow shrink basis-0 text-center text-text-brand text-base font-normal font-openSans leading-7">Resources</div>
             </div>
         </div>
         <div className="justify-end items-center gap-8 flex">
-            <div className="w-6 h-6 relative"><img src={Search} alt="/" /></div>
+            <div className="w-6 h-6 relative"><img src={localStorage.getItem('theme')==='dark'? SearchDark : Search}/></div>
             <div className="w-6 h-6 justify-center items-center flex">
-                <div className="w-6 h-6 relative flex-col justify-start items-start flex"><img src={Weather} alt="" /></div>
+                <div className="w-6 h-6 relative flex-col justify-start items-start flex"><ThemeToggle/></div>
             </div>
         </div>
     </div>
 </div>
-<hr className="border-[#EAEDEE] border-solid"/>
+<hr className="border-border-default border-solid"/>
 </>
    )
 };

diff --git a/site/src/components/Sidebar/index.js b/site/src/components/Sidebar/index.js
@@ -28,7 +28,7 @@ const Sidebar = () => {
   }
     return (
         <div className='pt-8 pr-4'>
-        <div className="w-[280px] h-[800px] pr-1 pt-2 border-r border-gray-200 justify-start items-start gap-1 inline-flex">
+        <div className="w-[280px] h-[800px] pr-1 pt-2 border-r border-border-default justify-start items-start gap-1 inline-flex">
             <div className="flex-col justify-start items-start gap-1 inline-flex">
                 <div className="w-[264px] rounded-lg justify-center items-center gap-1 inline-flex">
                     {  drop1? 
@@ -173,8 +173,8 @@ const Sidebar = () => {
                 </div>
             </div>
             <div className="opacity-0 w-2 h-[800px] relative">
-                <div className="w-1 h-[800px] left-[2px] top-0 absolute bg-gray-500 rounded-lg" />
-                <div className="w-2 h-[396px] left-0 top-0 absolute bg-gray-200 rounded-lg" />
+                <div className="w-1 h-[800px] left-[2px] top-0 absolute bg-border-strong rounded-lg" />
+                <div className="w-2 h-[396px] left-0 top-0 absolute bg-border-default rounded-lg">Hello</div>
             </div>
         </div> 
         </div>

diff --git a/site/src/components/Theme/index.js b/site/src/components/Theme/index.js
@@ -0,0 +1,33 @@
+import React from "react"
+import { ThemeToggler } from "gatsby-plugin-dark-mode"
+import Weather from '../../assets/images/Weather.svg';
+import Search from '../../assets/images/Search.svg';
+// import SearchDark from "../../assets/images/Search-dark.svg";
+
+export default function ThemeToggle() {
+     return (
+       <ThemeToggler>
+        {({ theme, toggleTheme }) => (
+          <img
+          src={theme === 'dark' ? Search : Weather }
+          alt="Toggle Theme"
+          onClick={() => toggleTheme(theme === 'dark' ? 'light' : 'dark')}
+        />         
+
+         )}
+        </ThemeToggler>
+     )
+}
+
+// export function SearchToggle(){
+//   return (
+//     <ThemeToggler>
+//         {({ theme}) => (
+//           <img
+//           src={theme === 'dark' ? SearchDark : Search }
+//           alt="Toggle Search"
+//         />    
+//         )}
+//         </ThemeToggler>
+//   )
+// }
diff --git a/site/src/pages/index.js b/site/src/pages/index.js
@@ -14,6 +14,8 @@ import Typography from "./identity/typography";
 import Elevation from "./identity/elevation";
 import Spacing from "./identity/spacing";
 import PageLayout from "./identity/page-layouts";
+import ThemeToggle from "../components/Theme";
+import '../styles/global.css';
 
 const IndexPage = () => {
 const routes = (
@@ -30,16 +32,16 @@ const routes = (
   </Routes>
 )
   return (
-    <>
+    <div>
     <Router>
     <Navbar/>
-    <div className="flex gap-8">
+    <div className='flex gap-8'>
       <Sidebar/>
       <main>{routes}</main>
     </div>
     <Footer/>
     </Router>
-    </>
+    </div>
   )
 }
 

diff --git a/site/src/styles/global.css b/site/src/styles/global.css
@@ -5,6 +5,31 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Global.css */
+:root {
+    --border-strong: #647176;
+    --border-default: #EAEDEE;
+    --background-default: #FDFDFD;
+    --text-brand: #007763;
+    --background-brand-default: #007763;
+    --text-default: #000D12;
+    --search-default: #15272F;
+}
+
+  /* Define dark mode styles */
+.dark {
+    --border-strong: #8D9FA7;
+    --border-default: #15272F;
+    --background-default: #000D12;
+    --text-brand: #00B39F;
+    --background-brand-default: #00B39F;
+    --text-default: #FDFDFD;
+    --search-default: #E7EFF3;
+} 
+
+body {
+    background-color: var(--background-default);
+}
 @font-face {
     font-family: "Qanelas Soft Black";
     src: url('../assets/fonts/qanelas-soft/QanelasSoftBlack.otf') format('opentype');

diff --git a/site/tailwind.config.js b/site/tailwind.config.js
@@ -5,12 +5,23 @@ module.exports = {
     `./src/components/**/*.{js,jsx,ts,tsx}`,
   ],
   theme: {
-    extend: {},
+    darkMode: 'class',
+    extend: {
+      colors: {
+        'border-strong': 'var(--border-strong)',
+        'border-default': 'var(--border-default)',
+        'background-default': 'var(--background-default)',
+        'text-brand': 'var(--text-brand)',
+        'background-brand-default': 'var(--background-brand-default)',
+        'text-default': 'var(--text-default)',
+        'search-default': 'var(--search-default)'
+      },
+    },
     fontFamily: {
       'openSans': ['Open Sans', 'sans-serif'],
       'qanelas':['Qanelas Soft Bold', 'sans-serif'],
       'qanelas-medium':['Qanelas Soft Medium', 'sans-serif']
-    }
+    },
   },
   plugins: [],
 }