🎨 Style: Add light and dark versions for the icon

- Rename icon.png to icon-dark.png - Add icon-light.png
semantyk · Jul 5, 2024 · f3a2f36 · f3a2f36
1 parent ed0bac9
commit f3a2f36
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,14 @@
 <h1 align='center'>Client | Semantyk</h1>
 <h3 align='center'><i>Ideas Wonder</i></h3>
 <p align='center'>
-  <img alt='Semantyk' src='https://www.semantyk.com/icon.png' width='250'/>
+  <picture>
+    <source srcset="https://www.semantyk.com/icon-dark.png" media="
+(prefers-color-scheme: dark)" />
+    <source srcset="https://www.semantyk.com/icon-light.png" media="
+(prefers-color-scheme: light)" />
+    <img src="https://www.semantyk.com/icon-light.png" alt="Semantyk" 
+width="250" />
+  </picture>
 </p>
 
 ## License

diff --git a/src/app/icon.png → src/app/icon-dark.png b/src/app/icon.png → src/app/icon-dark.png
diff --git a/src/app/icon-light.png b/src/app/icon-light.png
diff --git a/src/backend/logic/seo.js b/src/backend/logic/seo.js
@@ -44,7 +44,7 @@ export async function getMetadata() {
         href: "/",
         icons: {
             apple: "/apple-icon.png",
-            icon: "/icon.png",
+            icon: "/icon-dark.png",
             shortcut: "/favicon.ico"
         },
         keywords: app.keywords,

diff --git a/src/frontend/ui/components/atoms/buttons/IconButton/index.jsx b/src/frontend/ui/components/atoms/buttons/IconButton/index.jsx
@@ -22,7 +22,7 @@ import React from "react";
 //* Local Imports
 import Link from "next/link";
 import Image from "next/image";
-import icon from "@semantyk/app/icon.png";
+import icon from "@semantyk/app/icon-dark.png";
 
 //* Main
 export default function IconButton(props) {

diff --git a/src/frontend/ui/components/molecules/NavBar/index.jsx b/src/frontend/ui/components/molecules/NavBar/index.jsx
@@ -22,7 +22,7 @@ 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.png";
+import icon from "@semantyk/app/icon-dark.png";
 
 //* Main
 export default function NavBar() {