Merge pull request #4 from deriv-com/meenu-implement-theme

deriv-com · Mar 11, 2024 · c08ddc2 · c08ddc2
2 parents dad0cfd + 51588f4
commit c08ddc2
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 13 deletions.
diff --git a/lib/components/Typography/typography.scss b/lib/components/Typography/typography.scss
@@ -11,54 +11,55 @@
         line-height: var(--semantic-typography-heading-hero-lineHeight);
         padding-top: var(--semantic-typography-heading-hero-paragraphSpacing);
         padding-bottom: var(--semantic-typography-heading-hero-paragraphSpacing);
+        color: var(--semantic-color-typography-prominent);
         letter-spacing: normal;
     }
 
     &__h1 {
         // @each $property, $value in $semantic-typography-heading-h1 {
         //     #{$property}: $value;
         // }
-
+        color: var(--semantic-color-typography-prominent);
         // @include semantic-typography-heading-h1();
     }
 
     &__h2 {
         // @each $property, $value in $semantic-typography-heading-h2 {
         //     #{$property}: $value;
         // }
-
+        
         // @include semantic-typography-heading-h2();
     }
 
     &__h3 {
         // @each $property, $value in $semantic-typography-heading-h3 {
         //     #{$property}: $value;
         // }
-
+        
         // @include semantic-typography-heading-h3();
     }
 
     &__h4 {
         // @each $property, $value in $semantic-typography-heading-h4 {
         //     #{$property}: $value;
         // }
-
+        
         // @include semantic-typography-heading-h4();
     }
 
     &__h5 {
         // @each $property, $value in $semantic-typography-heading-h5 {
         //     #{$property}: $value;
         // }
-
+        
         // @include semantic-typography-heading-h5();
     }
 
     &__h6 {
         // @each $property, $value in $semantic-typography-heading-h6 {
         //     #{$property}: $value;
         // }
-
+        
         // @include semantic-typography-heading-h6();
     }
 
@@ -67,7 +68,7 @@
             // @each $property, $value in $semantic-typography-body-xl-regular-default {
             //     #{$property}: $value;
             // }
-
+            
             // @include semantic-typography-body-xl-regular-default();
 
             // Add the Bold / Italic / Underline rules below. 

diff --git a/lib/components/hooks/useTheme.tsx b/lib/components/hooks/useTheme.tsx
@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { ThemeContext } from "../providers/theme/themeContext";
+
+const UseTheme = () => {
+    const { theme, toggleTheme } = useContext(ThemeContext);
+    return { theme, toggleTheme };
+};
+
+export default UseTheme;
diff --git a/lib/components/providers/theme/themeContext.tsx b/lib/components/providers/theme/themeContext.tsx
@@ -0,0 +1,11 @@
+import React, { type Dispatch, type SetStateAction } from "react";
+
+export type Theme = "dark" | "light";
+
+export const initialThemeState = {
+    theme: "light" as Theme,
+    setTheme: (() => null) as Dispatch<SetStateAction<Theme>>,
+    toggleTheme: (() => null) as () => void,
+};
+
+export const ThemeContext = React.createContext(initialThemeState);
diff --git a/lib/components/providers/theme/themeProvider.tsx b/lib/components/providers/theme/themeProvider.tsx
@@ -0,0 +1,36 @@
+import { useEffect, useState, PropsWithChildren } from "react";
+import { ThemeContext, initialThemeState } from "./themeContext";
+import { Theme } from "./themeContext";
+
+export const ThemeProvider = ({ children }: PropsWithChildren) => {
+    const savedThemeLocal = window?.localStorage.getItem(
+        "globalTheme",
+    ) as Theme;
+    const [theme, setTheme] = useState<Theme>(
+        savedThemeLocal ?? initialThemeState.theme,
+    );
+
+    const applyThemeClass = (newTheme: Theme) => {
+        document.body.classList.remove(`theme--${theme}`);
+        document.body.classList.add(`theme--${newTheme}`);
+    };
+
+    const toggleTheme = () => {
+        const newTheme = theme === "dark" ? "light" : "dark";
+        setTheme(newTheme);
+        applyThemeClass(newTheme);
+    };
+
+    useEffect(() => {
+        if (!document.body.classList.contains(`theme--${theme}`)) {
+            applyThemeClass(theme);
+        }
+        window?.localStorage.setItem("globalTheme", theme);
+    }, [theme]);
+
+    return (
+        <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+};
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,13 +1,16 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { Typography, H1, Hero, BodyText } from "../dist/components/Typography";
+import { Typography, H1, Hero } from "../dist/components/Typography";
+import { ThemeProvider } from "../lib/components/providers/theme/themeProvider";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
-        <Typography as="span">Quill UI</Typography>
-        <Hero>Quill UI</Hero>
-        <H1>Quill UI</H1>
-        <H1 as="div">Quill UI - h1 as div</H1>
-        <H1 as="span">Quill UI - h1 as span</H1>
+        <ThemeProvider>
+            <Typography as="span">Quill UI</Typography>
+            <Hero>Quill UI</Hero>
+            <H1>Quill UI</H1>
+            <H1 as="div">Quill UI - h1 as div</H1>
+            <H1 as="span">Quill UI - h1 as span</H1>
+        </ThemeProvider>
     </React.StrictMode>,
 );