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
-}
-
-export const HudozkaLogo: React.FC<HudozkaLogoProps> = ({ dark }) => (
-    <div className={`${s.container} ${dark ? s.dark : ""}`}>
+function HudozkaLogo() {
+    return (
+        <div className={s.container}>
             <Image
-            src={image}
+                src={src}
                 width={36}
                 height={36}
                 alt={"Hudozka"}
             />
         </div>
-)
+    )
+}
+
+export default HudozkaLogo

src/components/HudozkaLogo/logo.module.css

@@ -9,7 +9,9 @@
     border-radius: var(--radius-small);
 }
 
-.dark {
+/* DARK THEME */
+@media (prefers-color-scheme: dark) {
+    .container {
         background-color: #f9ea12;
 
         --shadow-color: 60deg 100% 29%;
@@ -24,8 +26,9 @@
             -0.1px 7.5px 8.4px -2.5px hsl(var(--shadow-color) / 0.34);
 
         box-shadow: var(--shadow-elevation-high);
-}
+    }
 
-.dark img {
+    .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 />