From 1c198a13ee247599bd6dfcddb73eecf2c71cb657 Mon Sep 17 00:00:00 2001 From: Kae-Tempest Date: Wed, 19 Feb 2025 16:08:41 +0100 Subject: [PATCH] [Front] Add new icon for Dark and Light --- front/assets/dark.scss | 8 +++++-- front/assets/image/icon_dark.png | Bin 0 -> 3119 bytes front/assets/image/icon_white.png | Bin 0 -> 3527 bytes front/assets/image/user_light.png | Bin 0 -> 2965 bytes front/assets/light.scss | 8 +++++-- front/components/Navbar.vue | 11 +++++----- front/composables/useSystemTheme.ts | 33 ++++++++++++++++++++++++++++ front/nuxt.config.ts | 4 ++-- front/public/logo.png | Bin 0 -> 1188 bytes 9 files changed, 53 insertions(+), 11 deletions(-) create mode 100644 front/assets/image/icon_dark.png create mode 100644 front/assets/image/icon_white.png create mode 100644 front/assets/image/user_light.png create mode 100644 front/composables/useSystemTheme.ts create mode 100644 front/public/logo.png diff --git a/front/assets/dark.scss b/front/assets/dark.scss index 6c17b4c..bc4fa39 100644 --- a/front/assets/dark.scss +++ b/front/assets/dark.scss @@ -21,12 +21,16 @@ & > div { & > div { - & > h1 > a { - color: var(--neutral-50); + & > img { + width: 100%; + transform: translateX(-10px); } & > div > div { & > img { + margin-left: 10px; + width: 30px; + height: 30px; border: solid 2px var(--blue-600); } diff --git a/front/assets/image/icon_dark.png b/front/assets/image/icon_dark.png new file mode 100644 index 0000000000000000000000000000000000000000..0103c5a7117d5870fcd6b09cd78eb6dc6240b5be GIT binary patch literal 3119 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�XSeC#I)Q6nHJ$RdoI9d*l2kI>k`aO!r>9+ur|{PGHzO*%Gq53ILnICI}T`=Ye`JQ!8LbGTF+QSkfma%&rAQ9P^bwk#_q1+C; z^2`Tp`Czrq+7tgz+e@RKDuYX_lMOI6!MD}!Xm&qqa4wL@J2CBYf)z-uw019V0pQPz zroTL}#5@3Z;d`SwI&_MwEY5C1T-mE%2y&7*ZnP{(zT1iM73UP#wwE~87V7t}9bx1n z*cdQp1Sv=-D;v{4F;PUK*zCXCYH-Ie5TVz8Rerk6DwV62=J+TlgG2bDY!GISY*p+{ zLdR%x+VKRc9v`fCzQoZ7UXIitM}pqG<-O@4WM$Qokk+-z zOx-qpdMW%vuDYMcFrHPM5aQA_(ulM1T+lrRpYQgc(@OlpO$UT~S-2p2+>ex z+@N@{EUz5yZ*|9KHT!;nbV_dvD*F;A4I)c1Rp9{NC0%RMa8KyV??gDp>0Yf>+vLa7 z7z3$4m}0u+s6bJ>E)oMo5%t2Xwio8MjpH~6S|7&T;5(lU`H1U6BLQm$SM_3UpOh@k2KfA^; zmp%%aHq11z;-_NEnR`4fz>2r-GqxnJ`4z46&vr9Y8}1;=>hZP=r)s((;WAu$9%pC73>zFe(qfC n@%0D)uiX5vVpZ@^^7z#5R)$SpYa9iT(jcTE+TewrTkL-Th$(k) literal 0 HcmV?d00001 diff --git a/front/assets/light.scss b/front/assets/light.scss index 4623c30..35d7fb3 100644 --- a/front/assets/light.scss +++ b/front/assets/light.scss @@ -12,12 +12,16 @@ & > div { & > div { - & > h1 > a { - color: var(--neutral-950); + & > img { + width: 100%; + transform: translateX(-10px); } & > div > div { & > img { + margin-left: 10px; + width: 30px; + height: 30px; border: solid 2px var(--blue-600); } diff --git a/front/components/Navbar.vue b/front/components/Navbar.vue index 45fe21a..0d36ed0 100644 --- a/front/components/Navbar.vue +++ b/front/components/Navbar.vue @@ -18,6 +18,8 @@ const isDropDownOpen = ref(false); const isShowModal = ref(false) const showProfileModal = ref(false) +const { isDark } = useSystemTheme() + onMounted(async () => { document.addEventListener('click', () => isDropDownOpen.value = false) }) @@ -40,14 +42,13 @@ const logout = async () => {