From db14cd47bbbc5f524969a1b5112c90831a2b7f0e Mon Sep 17 00:00:00 2001 From: Munish Mummadi Date: Tue, 1 Sep 2026 21:26:54 -0400 Subject: [PATCH 1/5] feat: expand css assets for dark theme token and detec the saved theme Signed-off-by: Munish Mummadi --- _includes/head.html | 13 +++++++ assets/css/style.css.liquid | 73 ++++++++++++++++++++++++++++++------- 2 files changed, 73 insertions(+), 13 deletions(-) diff --git a/_includes/head.html b/_includes/head.html index 6ad55ccc18..a4aea93fca 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -1,6 +1,19 @@ + + + + {% if title == "Home" %} {{ site.tagline }} diff --git a/assets/css/style.css.liquid b/assets/css/style.css.liquid index f76f92d215..a11bdb8ae4 100644 --- a/assets/css/style.css.liquid +++ b/assets/css/style.css.liquid @@ -8,6 +8,27 @@ permalink: /css/style.css /* @link https://utopia.fyi/type/calculator?c=320,16,1.414,1680,16,1.414,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ :root { + /* Expand styling to properly impl light and dark mode*/ + --color-primary: #1B8381; + --color-primary-hover: #004746; + --color-accent: #209e9b; + + --bg-page: #ffffff; + --bg-surface: #f8fafc; + --bg-dropdown: #ffffff; + --bg-card: #ffffff; + --bg-code: #f1f5f9; + + --text-primary: #2d3748; + --text-secondary: #4b4b4b; + --text-muted: #696969; + --text-title: #1a202c; + + --border-color: #e3e8f0; + --border-subtle: hs1(0, 0%, 90%); + --nav-hover-bg: hsl(0, 0%, 95; + --dropdown-shadow: 0px 6px 4px rgba(0, 0, 0, .07), 0px 6px 30px rgba(0, 0, 0, .06), 0px 8px 10px rgba(0, 0, .1); + --turquoise: #209e9b; --midturquoise: #1B8381; --darkturquoise: #004746; @@ -35,6 +56,32 @@ permalink: /css/style.css --step-5: clamp(2.4883rem, 2.266rem + 1.1117vw, 3.4332rem); } +/* Overrides for dark theme */ +[data-theme="dark"] { + --color-primary: #2dd4bf; + --color-primary-hover: #5eead4; + --color-accent: #14b8a6; + + --bg-page: #0f141c; + --bg-surface: #171f2c; + --bg-dropdown: #1e293b; + --bg-card: #171f2c; + --bg-code: #1e293b; + + --text-primary: #e2ee8f0; + --text-secondary: #94a3b8; + --text-muted: #64748b; + --text-title: #f8fafc; + + --border-color: #334155; + --border-subtle: #1e293b; + --nav-hover-bg: rgba(255, 255, 255, 0.08); + --dropdown-shadow: 0px 8px 24px rgba(0, 0, 0, 0.5; + + --dark-grey: #cbd5e1; + --light-grey: #94a3b8; +} + /* CSS Reset */ /* Box sizing rules */ @@ -123,7 +170,7 @@ body { flex: 1; } -h1, +h1, h2, h3, h4, @@ -299,8 +346,8 @@ nav .inner-container { } - a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, - .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, + a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, + .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, .navbar-item.has-dropdown:hover .navbar-link { background-color: hsl(0, 0%, 95%); @@ -343,7 +390,7 @@ nav .inner-container { .navbar-item .has-dropdown:hover { background-color: var(--white); } - + .navbar-end { display: flex; } @@ -502,7 +549,7 @@ nav .inner-container { padding-bottom: .5rem; max-width: 64.25rem; } - + .blog .card-content .post-summary { font-size: var(--step-0); max-width: 64.25rem; @@ -540,10 +587,10 @@ nav .inner-container { color: var(--white); } -/* Sponsorship */ +/* Sponsorship */ .sponsorship h2 { color: var(--darkturquoise); -} +} /* Contact */ @@ -909,8 +956,8 @@ a.button { z-index: 20; background-color: var(--white); min-width: max-content; - box-shadow: 0px 6px 4px rgba(0, 0, 0, .07), - 0px 6px 30px rgba(0, 0, 0, .06), + box-shadow: 0px 6px 4px rgba(0, 0, 0, .07), + 0px 6px 30px rgba(0, 0, 0, .06), 0px 8px 10px rgba(0, 0, 0, .1); border-radius: 4px; } @@ -961,7 +1008,7 @@ a.button { display: none; } -.navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:focus .navbar-dropdown, +.navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:focus .navbar-dropdown, .navbar-item.is-hoverable:focus-within .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown { display: block; } @@ -982,7 +1029,7 @@ a.button { .navbar-menu.is-active { display: block; - } + } .navbar-menu { background-color: var(--white); @@ -1013,7 +1060,7 @@ a.button { padding: .5rem 2rem; } - /* Mobile Hover Nav Selection */ + /* Mobile Hover Nav Selection */ a.navbar-item, .navbar-item.has-dropdown .navbar-link { padding: .5rem 2rem .5rem .5rem; @@ -1026,7 +1073,7 @@ a.button { .has-dropdown .navbar-link::after { right: 1.25rem; } - + .blog > .inner-container { padding: 0 var(--24px); } From 8e20dc6b3c606f72c9b6ed0e286a2f92f32dd307 Mon Sep 17 00:00:00 2001 From: Munish Mummadi Date: Tue, 1 Sep 2026 21:41:13 -0400 Subject: [PATCH 2/5] feat: updated header with toggle Signed-off-by: Munish Mummadi --- _includes/header.html | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/_includes/header.html b/_includes/header.html index 1bcdfd6176..0c3f3bdc86 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -3,7 +3,9 @@
- {{ title }} + + {{ title + {{ title }} {% include "social-buttons.html" %}
@@ -69,9 +77,16 @@ hamburger.setAttribute('aria-expanded', !isExpanded); menu.classList.toggle('is-active', isExpanded); }; - - // Toggle on click hamburger.addEventListener('click', toggleMenu); - - \ No newline at end of file + // Theme switch logic + const themeToggle = document.getElementById('themeToggle'); + themeToggle?.addEventListener('click', () => { + const currentTheme = document.documentElement.getAttribute('dark-theme') ||'light'; + const nextTheme = currentTheme == 'dark' ? 'light' : 'dark'; + document.documentElement.setAttribute('data-theme', nextTheme); + try{ + localStorage.setItem('theme', nextTheme) + } catch (e) {} + }); + From eebdc688c15780fcef4392142703dddd1b189337 Mon Sep 17 00:00:00 2001 From: Munish Mummadi Date: Tue, 1 Sep 2026 21:58:14 -0400 Subject: [PATCH 3/5] feat: dedicated theme tokens for rendering text & cleanup cleanup feat: dedicated inverse text tokens for rendering text Signed-off-by: Munish Mummadi --- _includes/downloads-list.html | 2 +- _includes/head.html | 2 +- _includes/header.html | 6 +-- assets/css/style.css.liquid | 86 +++++++++++++++++++++++------------ 4 files changed, 61 insertions(+), 35 deletions(-) diff --git a/_includes/downloads-list.html b/_includes/downloads-list.html index 787f36cd0c..843e25746d 100644 --- a/_includes/downloads-list.html +++ b/_includes/downloads-list.html @@ -49,7 +49,7 @@

{{ download.name }}

.download-item > a > i { font-size: 2.5em; - color: black; + color: var(--text-primary); } .download-item > a > h2 { diff --git a/_includes/head.html b/_includes/head.html index a4aea93fca..ce61cbfe74 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -7,7 +7,7 @@ (function () { try { var savedTheme = localStorage.getItem('theme'); - var systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matchs; + var systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; var theme = savedTheme ? savedTheme : (systemPrefersDark ? 'dark' : 'light'); document.documentElement.setAttribute('data-theme', theme); } catch (e) {} diff --git a/_includes/header.html b/_includes/header.html index 0c3f3bdc86..bcbf5073a9 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -4,8 +4,8 @@
- {{ title - {{ title }} + {{ title }} + {{ title }}