From f995485c0901c364eae38d816ed4e90ad9ffbefc Mon Sep 17 00:00:00 2001 From: Sat Naing Date: Fri, 9 Sep 2022 00:48:23 +0630 Subject: [PATCH] Add light/dark mode functionality --- src/components/Header.astro | 15 +++++++++++++++ src/layouts/Layout.astro | 13 ++++++++++++- src/styles/base.css | 8 ++++++++ 3 files changed, 35 insertions(+), 1 deletion(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index ad3ea51..352d007 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -59,3 +59,18 @@ @apply w-6 h-6 fill-skin-base hover:fill-skin-accent; } + + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index f20f8dd..3d731bc 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -35,8 +35,19 @@ const { title } = Astro.props; href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" /> + + - + diff --git a/src/styles/base.css b/src/styles/base.css index cad8e28..8620e85 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -19,6 +19,14 @@ --color-card: 63, 75, 90; --color-border: 236, 233, 233; } + #sun-svg, + .theme-dark #moon-svg { + display: none; + } + #moon-svg, + .theme-dark #sun-svg { + display: block; + } } @layer components {