diff --git a/content/header/index.md b/content/header/index.md index 747014f..fb57915 100644 --- a/content/header/index.md +++ b/content/header/index.md @@ -3,7 +3,8 @@ title: "Header" insert_anchor_links: "left" template: "partials/header.html" extra: - logoPath: "images/new_logo_tft.png" + logoPathLight: "images/mycelium_white.png" + logoPathDark: "images/mycelium_dark.png" --- diff --git a/css/index.css b/css/index.css index 10e3b2d..123496a 100644 --- a/css/index.css +++ b/css/index.css @@ -12,11 +12,78 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); -.dashboard:hover { - - background: #74ddc3 !important; +/* Defaul lightMode */ +body.light-mode { + background-color: #ffffff; + color: #000000; } +body.light-mode .semigray { + + color: #424242 !important; +} + +body.light-mode .semigray2 { + + color: #424242 !important; +} + +body.light-mode .dropdown a{ + @apply + px-0 + text-black +} + +body.light-mode .dropdown{ + background-color: rgb(255 255 255 / 100%); + color: #121212; +} + +body.light-mode .d_menu { + background-color: #e5e5e5; +} + +body.light-mode .icon { + + fill: #424242 !important; +} + +/* Dark Mode */ +body { + background-color: #121212; + color: #ffffff; +} + +body .semigray { + color: #e5e7eb !important; +} + +body .semigray2 { + color: #d1d5db !important; +} + +body .icon { + fill: #ffffff !important; +} + +body .dropdown a{ + @apply + px-0 + text-white +} + +body .dropdown{ + background-color: rgb(0 0 0 / 50%); + color: #fff; +} + +body .d_menu { + background-color: rgba(34 34 34); +} + + + + /* Custom CSS for header partial */ .backdrop-blur { @@ -287,7 +354,7 @@ background-color:#5596f5 !important; h5 { @apply text-lg my-1 tracking-normal font-medium; font-family: "Inter", sans-serif !important; - color: #fff !important + } h6 { @apply text-md not-italic font-normal my-1; @@ -295,7 +362,7 @@ background-color:#5596f5 !important; } p { @apply text-lg; - color: #3d3d3d; + font-family: "Inter", sans-serif !important; } blockquote { diff --git a/static/images/mycelium_dark.png b/static/images/mycelium_dark.png new file mode 100644 index 0000000..0696f4c Binary files /dev/null and b/static/images/mycelium_dark.png differ diff --git a/static/images/mycelium_white.png b/static/images/mycelium_white.png new file mode 100644 index 0000000..997fc2c Binary files /dev/null and b/static/images/mycelium_white.png differ diff --git a/static/js/custom.js b/static/js/custom.js index 1998788..f22048e 100644 --- a/static/js/custom.js +++ b/static/js/custom.js @@ -191,3 +191,34 @@ function formatStatsData(stats) { readingTime(); getStats(); document.getElementById("year").innerHTML = new Date().getFullYear(); + + +// Get elements +const toggleSwitch = document.getElementById('lightModeSwitch'); +const body = document.body; + +// Apply saved theme on load +document.addEventListener('DOMContentLoaded', () => { + const savedTheme = localStorage.getItem('theme') || 'light'; // Default is light mode + + if (savedTheme === 'light') { + body.classList.add('light-mode'); + toggleSwitch.checked = true; + } else { + body.classList.remove('light-mode'); + toggleSwitch.checked = false; + } +}); + +// Toggle between light and dark mode +toggleSwitch.addEventListener('change', () => { + if (toggleSwitch.checked) { + body.classList.add('light-mode'); + localStorage.setItem('theme', 'light'); + } else { + body.classList.remove('light-mode'); + localStorage.setItem('theme', 'dark'); + } +}); + + diff --git a/templates/_default/base.html b/templates/_default/base.html index 6552ce3..d0c5269 100644 --- a/templates/_default/base.html +++ b/templates/_default/base.html @@ -3,7 +3,7 @@ {% include "partials/head.html" %} {% include "partials/header.html" %} - +