From 256fe586abe023012ce45171ebb81980fbcf78ab Mon Sep 17 00:00:00 2001 From: ehab-hassan Date: Mon, 13 Jan 2025 16:47:26 +0200 Subject: [PATCH] text light and dark at home page --- config.toml | 8 +++--- css/index.css | 20 ++++++++----- static/js/custom.js | 26 +++++++++++++++++ templates/_default/base.html | 2 +- templates/partials/header.html | 5 ++++ templates/partials/home/farmers.html | 25 ++++++++++------- templates/partials/home/grid_stats.html | 37 +++++++++++++------------ templates/partials/home/hero.html | 12 ++++---- 8 files changed, 90 insertions(+), 45 deletions(-) diff --git a/config.toml b/config.toml index 05ac2c06f..2398112bc 100644 --- a/config.toml +++ b/config.toml @@ -6,12 +6,12 @@ title = "ThreeFold" description = "Our global digital backbone" # When set to "true", a feed is automatically generated. -generate_feed = true +#generate_feed = true # The filename to use for the feed. Used as the template filename, too. # Defaults to "atom.xml", which has a built-in template that renders an Atom 1.0 feed. # There is also a built-in template "rss.xml" that renders an RSS 2.0 feed. -feed_filename = "atom.xml" +#feed_filename = "atom.xml" # The number of articles to include in the feed. All items are included if # this limit is not set (the default). @@ -51,8 +51,8 @@ external_links_no_referrer = true # For example, `...` into `…`, `"quote"` into `“curly”` etc smart_punctuation = true -[build] -not_found = "404.md" +#[build] +#not_found = "404.md" [[taxonomies]] name = "categories" diff --git a/css/index.css b/css/index.css index 8733c7cec..f6442d24a 100644 --- a/css/index.css +++ b/css/index.css @@ -12,6 +12,19 @@ @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'); +/* Default Light Mode */ +body { + background-color: #ffffff; + color: #000000; +} + +/* Dark Mode */ +body.dark-mode { + background-color: #121212; + color: #ffffff; +} + + .dashboard:hover { background: #74ddc3 !important; @@ -263,12 +276,10 @@ background-color:#5596f5 !important; @layer components { h1 { @apply text-4xl lg:text-6xl font-normal; - color: #ffffff; font-family: "Inter", sans-serif !important; } h2 { @apply text-3xl lg:text-4xl my-4 font-normal leading-none; - color: #ffffff; font-family: "Inter", sans-serif !important; } h2 strong { @@ -276,7 +287,6 @@ background-color:#5596f5 !important; } h3 { @apply text-2xl lg:text-3xl my-4 font-extralight; - color: #ffffff; font-family: "Inter", sans-serif !important; } h3 strong { @@ -290,7 +300,6 @@ 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; @@ -298,7 +307,6 @@ background-color:#5596f5 !important; } p { @apply text-lg; - color: #3d3d3d; font-family: "Inter", sans-serif !important; } blockquote { @@ -492,7 +500,6 @@ header { .banner h2, .header h1 { margin: auto; - color: #fff; position: relative; transition: 0.3s; z-index: 1; @@ -500,7 +507,6 @@ header { } .header h1 { - color: #000; transition: none; } diff --git a/static/js/custom.js b/static/js/custom.js index 199878847..40627ccb9 100644 --- a/static/js/custom.js +++ b/static/js/custom.js @@ -191,3 +191,29 @@ function formatStatsData(stats) { readingTime(); getStats(); document.getElementById("year").innerHTML = new Date().getFullYear(); + + + +// Get the toggle switch +const toggleSwitch = document.getElementById('darkModeSwitch'); + +// Apply the saved theme on load +document.addEventListener('DOMContentLoaded', () => { + const savedTheme = localStorage.getItem('theme'); + if (savedTheme === 'dark') { + document.body.classList.add('dark-mode'); + toggleSwitch.checked = true; + } +}); + +// Toggle dark mode +toggleSwitch.addEventListener('change', () => { + if (toggleSwitch.checked) { + document.body.classList.add('dark-mode'); + localStorage.setItem('theme', 'dark'); + } else { + document.body.classList.remove('dark-mode'); + localStorage.setItem('theme', 'light'); + } +}); + diff --git a/templates/_default/base.html b/templates/_default/base.html index 3e626f4cb..690dcfd45 100644 --- a/templates/_default/base.html +++ b/templates/_default/base.html @@ -3,7 +3,7 @@ {% include "partials/head.html" %} {% include "partials/header.html" %} - +