🎨 Style: Add light/dark color scheme duality

- Move all existing images from src/app/ to public/images/ - Replace all raster (png and jpg) with vector (svg) images - Add light and dark images - Add Icon component (project's logo) - Replace Image component to Icon component in Navbar and IconButton
semantyk · Jul 6, 2024 · 8f4ede5 · 8f4ede5
1 parent f3a2f36
commit 8f4ede5
Show file tree

Hide file tree

Showing 19 changed files with 232 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -19,9 +19,9 @@
 <h3 align='center'><i>Ideas Wonder</i></h3>
 <p align='center'>
   <picture>
-    <source srcset="https://www.semantyk.com/icon-dark.png" media="
+    <source srcset="https://www.semantyk.com/icon-dark.svg" media="
 (prefers-color-scheme: dark)" />
-    <source srcset="https://www.semantyk.com/icon-light.png" media="
+    <source srcset="https://www.semantyk.com/icon.svg" media="
 (prefers-color-scheme: light)" />
     <img src="https://www.semantyk.com/icon-light.png" alt="Semantyk" 
 width="250" />

diff --git a/public/images/SEO-dark.svg b/public/images/SEO-dark.svg
diff --git a/public/images/SEO.svg b/public/images/SEO.svg
diff --git a/public/images/apple-icon-dark.jpg b/public/images/apple-icon-dark.jpg
diff --git a/src/app/apple-icon.jpg → public/images/apple-icon.jpg b/src/app/apple-icon.jpg → public/images/apple-icon.jpg
diff --git a/public/images/icon-dark.svg b/public/images/icon-dark.svg
diff --git a/public/images/icon.svg b/public/images/icon.svg
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/icon-dark.png b/src/app/icon-dark.png
diff --git a/src/app/icon-light.png b/src/app/icon-light.png
diff --git a/src/app/layout.jsx b/src/app/layout.jsx
@@ -21,8 +21,9 @@ import React from "react";
 import "@semantyk/app/layout.css";
 import { getMetadata } from "@semantyk/backend/logic/seo";
 import SessionProvider from "@semantyk/frontend/logic/SessionProvider";
-import Footer from "@semantyk/frontend/ui/components/molecules/Footer";
 import Analytics from "@semantyk/frontend/logic/analytics/Analytics";
+import Footer from "@semantyk/frontend/ui/components/molecules/Footer";
+import ColorSchemeProvider from "@semantyk/frontend/logic/ColorSchemeProvider";
 
 
 //* Main
@@ -33,12 +34,12 @@ export default function RootLayout({ children }) {
     return (
         <html lang="en">
         <Analytics/>
-        <body id="App" className={"bg-dark text-light"}>
-        <SessionProvider>
-            {children}
-            <Footer/>
-        </SessionProvider>
-        </body>
+        <ColorSchemeProvider>
+            <SessionProvider>
+                {children}
+                <Footer/>
+            </SessionProvider>
+        </ColorSchemeProvider>
         </html>
     );
 }
diff --git a/src/app/opengraph-image.png b/src/app/opengraph-image.png
diff --git a/src/app/twitter-image.png b/src/app/twitter-image.png
diff --git a/src/backend/logic/seo.js b/src/backend/logic/seo.js
@@ -43,15 +43,45 @@ export async function getMetadata() {
         description: `${app.slogan} | ${app.description}`,
         href: "/",
         icons: {
-            apple: "/apple-icon.png",
-            icon: "/icon-dark.png",
-            shortcut: "/favicon.ico"
+            apple: [
+                {
+                    media: "(prefers-color-scheme: light)",
+                    url: "/images/apple-icon.jpg"
+                },
+                {
+                    media: "(prefers-color-scheme: dark)",
+                    url: "/images/apple-icon-dark.jpg",
+                }
+            ],
+            icon: [{
+                media: "(prefers-color-scheme: light)",
+                url: "/images/icon.svg"
+            }, {
+                media: "(prefers-color-scheme: dark)",
+                url: "/images/icon-dark.svg"
+            }],
+            shortcut: [{
+                media: "(prefers-color-scheme: light)",
+                url: "/images/icon.svg"
+            }, {
+                media: "(prefers-color-scheme: dark)",
+                url: "/images/icon-dark.svg"
+            }],
         },
         keywords: app.keywords,
         lang: app.lang,
         openGraph: {
             description: `${app.slogan} | ${app.description}`,
-            images: ["/opengraph-image.png"],
+            images: [
+                {
+                    media: "(prefers-color-scheme: light)",
+                    url: "/images/seo.svg"
+                },
+                {
+                    media: "(prefers-color-scheme: dark)",
+                    url: "/images/seo-dark.svg"
+                }
+            ],
             locale: app.lang,
             siteName: app.name,
             title: app.name,
@@ -67,7 +97,16 @@ export async function getMetadata() {
             creator: app.twitter,
             creatorId: "",
             description: `${app.slogan} | ${app.description}`,
-            images: ["/opengraph-image.png"],
+            images: [
+                {
+                    media: "(prefers-color-scheme: light)",
+                    url: "/images/seo.svg"
+                },
+                {
+                    media: "(prefers-color-scheme: dark)",
+                    url: "/images/seo-dark.svg"
+                }
+            ],
             siteId: "",
             title: app.name,
         }

diff --git a/src/frontend/hooks/useColorScheme.js b/src/frontend/hooks/useColorScheme.js
@@ -0,0 +1,43 @@
+/*
+ * –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+ * # `useColorScheme.js`
+ * client | Semantyk
+ *
+ * This file contains the logic for the color scheme hook.
+ *
+ * Created: Jul 05, 2024
+ * Modified: Jul 05, 2024
+ *
+ * Author(s): Semantyk Team
+ * Maintainer(s): Daniel Bakas <https://id.danielbakas.com>
+ *
+ * Copyright © Semantyk 2024. All rights reserved.
+ * –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+ */
+
+//* Imports
+import { useEffect, useState } from "react";
+
+export default function useColorScheme() {
+    const [colorScheme, setColorScheme] = useState("light");
+    const [textColorScheme, setTextColorScheme] = useState("dark");
+
+    useEffect(() => {
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: light)");
+        setColorScheme(mediaQuery.matches ? "light" : "dark");
+        setTextColorScheme(mediaQuery.matches ? "dark" : "light");
+
+        const handleChange = (event) => {
+            setColorScheme(event.matches ? "light" : "dark");
+            setTextColorScheme(mediaQuery.matches ? "dark" : "light");
+        };
+
+        mediaQuery.addEventListener("change", handleChange);
+
+        return () => {
+            mediaQuery.removeEventListener("change", handleChange);
+        };
+    }, []);
+
+    return { colorScheme, textColorScheme };
+};
diff --git a/src/frontend/logic/ColorSchemeProvider.jsx b/src/frontend/logic/ColorSchemeProvider.jsx
@@ -0,0 +1,33 @@
+/*
+ * –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+ * # `ColorSchemeProvider.jsx` | `logic`
+ * client | Semantyk
+ *
+ * This file contains the `ColorSchemeProvider` component.
+ *
+ * Created: Dec 4, 2023
+ * Modified: Jul 5, 2024
+ *
+ * Author: Semantyk Team
+ * Maintainer: Daniel Bakas <https://id.danielbakas.com>
+ *
+ * Copyright © Semantyk 2024. All rights reserved.
+ * –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+ */
+
+"use client";
+
+//* Imports
+import React from "react";
+import useColorScheme from "@semantyk/frontend/hooks/useColorScheme";
+
+export default function ColorSchemeProvider({ children }) {
+    // Hooks
+    const { colorScheme, textColorScheme } = useColorScheme();
+    // Return
+    return (
+        <body id="App" className={`bg-${colorScheme} text-${textColorScheme}`}>
+        {children}
+        </body>
+    );
+}
diff --git a/src/frontend/ui/components/atoms/buttons/IconButton/index.jsx b/src/frontend/ui/components/atoms/buttons/IconButton/index.jsx
@@ -19,10 +19,10 @@
 
 //* Imports
 import React from "react";
-//* Local Imports
 import Link from "next/link";
-import Image from "next/image";
-import icon from "@semantyk/app/icon-dark.png";
+//* Local Imports
+import Icon from "@semantyk/frontend/ui/components/atoms/icons/Icon";
+
 
 //* Main
 export default function IconButton(props) {
@@ -31,7 +31,7 @@ export default function IconButton(props) {
     // Return
     return (
         <Link href={href}>
-            <Image src={icon} alt="Semantyk" title="Semantyk" {...rest}/>
+            <Icon {...rest}/>
         </Link>
     );
 }
diff --git a/src/frontend/ui/components/molecules/NavBar/index.jsx b/src/frontend/ui/components/molecules/NavBar/index.jsx
@@ -19,21 +19,21 @@
 import React from "react";
 import Link from "next/link";
 import { Nav, Navbar } from "react-bootstrap";
-import Image from "next/image";
 //* Local Imports
 import useNavLinks from "@semantyk/frontend/hooks/useNavLinks";
-import icon from "@semantyk/app/icon-dark.png";
+import Icon from "@semantyk/frontend/ui/components/atoms/icons/Icon";
+import useColorScheme from "@semantyk/frontend/hooks/useColorScheme";
 
 //* Main
 export default function NavBar() {
     // Hooks
+    const { colorScheme } = useColorScheme();
     const navLinks = useNavLinks();
     // Return
     return (
-        <Navbar expand="sm" variant="dark">
+        <Navbar expand="sm" variant={colorScheme}>
             <Navbar.Brand as={Link} href={"/"}>
-                <Image src={icon} alt="Semantyk" title="Semantyk" height="40"
-                       width="40"/>
+                <Icon height={40} width={40}/>
             </Navbar.Brand>
             <Navbar.Toggle aria-controls="responsive-navbar-nav"/>
             <Navbar.Collapse className="justify-content-between">

diff --git a/vitest.setup.js b/vitest.setup.js
@@ -17,4 +17,18 @@
  */
 
 //* Imports
-import "@testing-library/jest-dom";
+import "@testing-library/jest-dom";
+
+//* Main
+// window.matchMedia
+Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: vi.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+    })),
+});