diff --git a/assets/scss/_floating-toggle-theme.scss b/assets/scss/_floating-toggle-theme.scss new file mode 100644 index 00000000..0ea9d160 --- /dev/null +++ b/assets/scss/_floating-toggle-theme.scss @@ -0,0 +1,24 @@ +.theme-toggle-btn { + appearance: none; + -webkit-appearance: none; + background: none; + border: none; + box-shadow: none; + outline: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + transition: transform 0.3s ease; + + &:hover { transform: rotate(20deg); } + + .icon-moon { display: block; } + .icon-sun { display: none; } +} + +[data-theme="light"] .theme-toggle-btn { + .icon-moon { display: none; } + .icon-sun { display: block; filter: brightness(0); } +} diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index 5b7b0632..6acc5dbf 100644 --- a/assets/scss/_header.scss +++ b/assets/scss/_header.scss @@ -30,11 +30,22 @@ inset 0 1px 0 rgba(255, 255, 255, 0.04); } .container { - display: flex; - justify-content: space-between; + display: grid; + grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 1200px; margin: 0 auto; + width: 100%; + } + + .logo { + grid-column: 2; + justify-self: center; + } + + .theme-toggle-btn { + grid-column: 3; + justify-self: end; } .logo { diff --git a/assets/scss/_hero-glass.scss b/assets/scss/_hero-glass.scss index 86de0288..dfbff821 100644 --- a/assets/scss/_hero-glass.scss +++ b/assets/scss/_hero-glass.scss @@ -5,11 +5,31 @@ initial-value: 0deg; } +@property --bg-start { + syntax: ''; + inherits: true; + initial-value: #041013; +} + +@property --bg-mid { + syntax: ''; + inherits: true; + initial-value: #0a151c; +} + +@property --bg-end { + syntax: ''; + inherits: true; + initial-value: #0b1c24; +} + :root { color-scheme: dark; - // --bg: #05060b; --text: #f5f7ff; --muted: rgba(222, 232, 248, 0.78); + --bg-start: #041013; + --bg-mid: #0a151c; + --bg-end: #0b1c24; --accent: #00B39F; --accent-rgba: rgba(0, 179, 159, 0.9); --accent-2: #00D3A9; @@ -23,6 +43,46 @@ --tilt-y: 0deg; } +[data-theme="light"] { + color-scheme: light; + --text: #1a1a1a; + --muted: rgba(30, 30, 30, 0.7); + --bg-start: #d0d0d0; + --bg-mid: #9d9f9f; + --bg-end: #959494; +} + +:root[data-theme="light"] { + h1, h2, h3, h4, h5, h6, p, span, a, li, strong, label, div, button { + color: #1a1a1a !important; + } + + .multi-cursor__role, + .multi-cursor__activity, + .cursor-proof-pill__label, + .cursor-proof-activity, + .browser-pill, + .footer, + .footer *, + .browser-mockup, + .browser-mockup * { + color: #fff !important; + } + + .cursor-proof-pill__value { + color: var(--accent-3) !important; + } + + .site-header { + background: rgba(220, 220, 220, 0.85) !important; + border-bottom-color: rgba(0, 0, 0, 0.08) !important; + + &.scrolled { + background: rgba(200, 200, 200, 0.75) !important; + } + } +} + * { box-sizing: border-box; margin: 0; @@ -41,7 +101,8 @@ body { ), radial-gradient(900px circle at 85% 15%, rgba(0, 211, 169, 0.2), transparent 60%), radial-gradient(800px circle at 15% 80%, rgba(158, 255, 236, 0.16), transparent 55%), - linear-gradient(180deg, #041013 0%, #0a151c 55%, #0b1c24 100%); + linear-gradient(180deg, var(--bg-start) 0%, var(--bg-mid) 55%, var(--bg-end) 100%); + transition: background 0.8s ease-in-out, color 0.6s ease-in-out; overflow-x: hidden; position: relative; } diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 4f5ce35c..271ad1e4 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -18,6 +18,7 @@ @import "feedback"; @import "section-transitions"; @import "scroll-cube"; +@import "floating-toggle-theme"; body { background-color: $dark; diff --git a/layouts/partials/floating-toggle-theme.html b/layouts/partials/floating-toggle-theme.html new file mode 100644 index 00000000..e13b2858 --- /dev/null +++ b/layouts/partials/floating-toggle-theme.html @@ -0,0 +1,5 @@ +
+ +
diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 3a347417..1aa97f2c 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -1,4 +1,5 @@ + diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index a93deca6..0ed264f6 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -22,5 +22,9 @@ Launch Kanvas --> + \ No newline at end of file diff --git a/static/images/mode-toggle-icon-moon.png b/static/images/mode-toggle-icon-moon.png new file mode 100644 index 00000000..63f3e8b1 Binary files /dev/null and b/static/images/mode-toggle-icon-moon.png differ diff --git a/static/images/mode-toggle-icon-sun.png b/static/images/mode-toggle-icon-sun.png new file mode 100644 index 00000000..d865cdaf Binary files /dev/null and b/static/images/mode-toggle-icon-sun.png differ diff --git a/static/scripts/main.js b/static/scripts/main.js index d27f8096..0d9e3d33 100644 --- a/static/scripts/main.js +++ b/static/scripts/main.js @@ -575,9 +575,24 @@ const initVideoHandler = () => { } }; +const initThemeToggle = () => { + const btn = document.getElementById('theme-toggler'); + if (!btn) return; + + const saved = localStorage.getItem('theme') || 'dark'; + document.documentElement.setAttribute('data-theme', saved); + + btn.addEventListener('click', () => { + const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'; + document.documentElement.setAttribute('data-theme', next); + localStorage.setItem('theme', next); + }); +}; + document.addEventListener("DOMContentLoaded", () => { initMarquee(); initScrollAnimations(); + initThemeToggle(); initVideoHandler(); const header = document.querySelector(".site-header");