Merge pull request #205 from tmshv/issue-204

logo native dark style

src/components/HudozkaLogo/index.tsx

@@ -1,19 +1,19 @@
 import s from "./logo.module.css"
 
 import Image from "next/image"
-import image from "src/assets/hudozka-logo.png"
+import src from "src/assets/hudozka-logo.png"
 
-export type HudozkaLogoProps = {
-    dark?: boolean
+function HudozkaLogo() {
+    return (
+        <div className={s.container}>
+            <Image
+                src={src}
+                width={36}
+                height={36}
+                alt={"Hudozka"}
+            />
+        </div>
+    )
 }
 
-export const HudozkaLogo: React.FC<HudozkaLogoProps> = ({ dark }) => (
-    <div className={`${s.container} ${dark ? s.dark : ""}`}>
-        <Image
-            src={image}
-            width={36}
-            height={36}
-            alt={"Hudozka"}
-        />
-    </div>
-)
+export default HudozkaLogo

src/components/HudozkaLogo/logo.module.css

@@ -1,31 +1,34 @@
 .container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-  width: var(--size-l);
-  height: var(--size-l);
+    width: var(--size-l);
+    height: var(--size-l);
 
-  border-radius: var(--radius-small);
+    border-radius: var(--radius-small);
 }
 
-.dark {
-  background-color: #f9ea12;
+/* DARK THEME */
+@media (prefers-color-scheme: dark) {
+    .container {
+        background-color: #f9ea12;
 
-  --shadow-color: 60deg 100% 29%;
-  --shadow-elevation-high:
-      0px 0.1px 0.1px hsl(var(--shadow-color) / 0.34),
-      0px 0.4px 0.5px -0.4px hsl(var(--shadow-color) / 0.34),
-      0px 0.8px 0.9px -0.7px hsl(var(--shadow-color) / 0.34),
-      0px 1.3px 1.5px -1.1px hsl(var(--shadow-color) / 0.34),
-      0px 2.1px 2.4px -1.4px hsl(var(--shadow-color) / 0.34),
-      0px 3.3px 3.7px -1.8px hsl(var(--shadow-color) / 0.34),
-      -0.1px 5.1px 5.7px -2.1px hsl(var(--shadow-color) / 0.34),
-      -0.1px 7.5px 8.4px -2.5px hsl(var(--shadow-color) / 0.34);
+        --shadow-color: 60deg 100% 29%;
+        --shadow-elevation-high:
+            0px 0.1px 0.1px hsl(var(--shadow-color) / 0.34),
+            0px 0.4px 0.5px -0.4px hsl(var(--shadow-color) / 0.34),
+            0px 0.8px 0.9px -0.7px hsl(var(--shadow-color) / 0.34),
+            0px 1.3px 1.5px -1.1px hsl(var(--shadow-color) / 0.34),
+            0px 2.1px 2.4px -1.4px hsl(var(--shadow-color) / 0.34),
+            0px 3.3px 3.7px -1.8px hsl(var(--shadow-color) / 0.34),
+            -0.1px 5.1px 5.7px -2.1px hsl(var(--shadow-color) / 0.34),
+            -0.1px 7.5px 8.4px -2.5px hsl(var(--shadow-color) / 0.34);
 
-  box-shadow: var(--shadow-elevation-high);
-}
+        box-shadow: var(--shadow-elevation-high);
+    }
 
-.dark img {
-  filter: invert(0%);
+    .container img {
+        filter: invert(0%);
+    }
 }

src/components/Navigation/DesktopNavigation.tsx

@@ -2,8 +2,7 @@ import { Menu } from "../Menu"
 import { useContext } from "react"
 import { MenuContext } from "@/context/MenuContext"
 import { Box } from "@/ui/Box"
-import { HudozkaLogo } from "../HudozkaLogo"
-import { useDarkTheme } from "@/hooks/useDarkTheme"
+import HudozkaLogo from "../HudozkaLogo"
 import Link from "next/link"
 import { AccessibilityButton } from "../AccessibilityButton"
 import { Spacer } from "../Spacer"
@@ -13,13 +12,12 @@ export type DesktopNavigationProps = {
 }
 
 export const DesktopNavigation: React.FC<DesktopNavigationProps> = ({ style }) => {
-    const dark = useDarkTheme()
     const menu = useContext(MenuContext)
 
     return (
         <Box wrap gap={"var(--size-s)"} style={style}>
             <Link href="/">
-                <HudozkaLogo dark={dark} />
+                <HudozkaLogo />
             </Link>
 
             <Menu

src/components/Navigation/MobileNavigation.tsx

@@ -6,8 +6,7 @@ import { MenuContext } from "@/context/MenuContext"
 import { Box } from "@/ui/Box"
 import { Spacer } from "../Spacer"
 import { useToggle } from "react-use"
-import { HudozkaLogo } from "../HudozkaLogo"
-import { useDarkTheme } from "@/hooks/useDarkTheme"
+import HudozkaLogo from "../HudozkaLogo"
 import { HudozkaTitle } from "../HudozkaTitle"
 import Link from "next/link"
 
@@ -16,7 +15,6 @@ export type MobileNavigationProps = {
 }
 
 export const MobileNavigation: React.FC<MobileNavigationProps> = ({ style }) => {
-    const dark = useDarkTheme()
     const [open, toggleOpen] = useToggle(false)
     const menu = useContext(MenuContext)
 
@@ -48,7 +46,7 @@ export const MobileNavigation: React.FC<MobileNavigationProps> = ({ style }) =>
 
             <Box wrap gap={"var(--size-s)"} style={style}>
                 <Link href="/">
-                    <HudozkaLogo dark={dark} />
+                    <HudozkaLogo />
                 </Link>
                 <HudozkaTitle compact />
                 <Spacer />