From a72acbd63f78c3b108b0a6faf0ba09179b892c8d Mon Sep 17 00:00:00 2001 From: Guillaume Hivert Date: Thu, 21 Nov 2024 00:51:22 +0100 Subject: [PATCH] Add dark theme support --- landing_page/public/base.css | 35 +++++++++++++++++++ landing_page/src/components/button.gleam | 6 ++-- landing_page/src/components/copy_button.gleam | 14 +++++--- landing_page/src/components/footer.gleam | 2 +- landing_page/src/components/navbar.gleam | 6 ++-- landing_page/src/components/windows.gleam | 18 +++++----- landing_page/src/landing_page.gleam | 8 ++--- 7 files changed, 64 insertions(+), 25 deletions(-) diff --git a/landing_page/public/base.css b/landing_page/public/base.css index 78e1239..8ae16a3 100644 --- a/landing_page/public/base.css +++ b/landing_page/public/base.css @@ -20,3 +20,38 @@ code { line-height: 1.5; font-size: 0.8rem; } + +:root { + --background: #ffffff; + --dark-background: #eeeeee; + --border-color: #cccccc; + --button-hover: #f5f5f5; + --text-color: #000000; + --text-grey: #888888; + --icon-hover: #000000; + --navbar-background: rgba(255, 255, 255, 0.9); + + --window-border: rgb(223, 234, 255); + --window-bg: rgb(241, 246, 255); +} + +@media (prefers-color-scheme: dark) { + :root { + --background: #222222; + --dark-background: #000000; + --border-color: #444444; + --button-hover: #0a0a0a; + --text-color: #ffffff; + --text-grey: #888888; + --icon-hover: #ffffff; + --navbar-background: rgba(34, 34, 34, 0.9); + + --window-bg: rgb(45, 46, 50); + --window-border: rgb(109, 110, 112); + } +} + +body { + background: var(--background); + color: var(--text-color); +} diff --git a/landing_page/src/components/button.gleam b/landing_page/src/components/button.gleam index 3190667..185bc74 100644 --- a/landing_page/src/components/button.gleam +++ b/landing_page/src/components/button.gleam @@ -8,7 +8,7 @@ fn primary_class() { s.class([ s.display("block"), s.text_decoration("none"), - s.background("#eee"), + s.background("var(--dark-background)"), s.border_radius(px(6)), s.padding_("9px 16px"), s.font_size(rem(1.0)), @@ -55,8 +55,8 @@ pub fn example(color, text) { pub fn link(link, content) { s.class([ s.compose(primary_class()), - s.background("#fff"), - s.border("1px solid #ccc"), + s.background("var(--background)"), + s.border("1px solid var(--border-color)"), ]) |> sh.a([a.href(link)], [h.text(content)]) } diff --git a/landing_page/src/components/copy_button.gleam b/landing_page/src/components/copy_button.gleam index 0b60de1..b0624d5 100644 --- a/landing_page/src/components/copy_button.gleam +++ b/landing_page/src/components/copy_button.gleam @@ -39,7 +39,7 @@ fn on_copy(text, set_copied) { fn code_install() { s.class([ - s.border("1px solid #ccc"), + s.border("1px solid var(--border-color)"), s.border_radius(px(8)), s.display("flex"), s.align_items("center"), @@ -48,14 +48,20 @@ fn code_install() { s.gap(px(9)), s.font_size(rem(0.7)), s.font_weight("450"), - s.background("white"), + s.background("var(--background)"), s.cursor("pointer"), - s.hover([s.background("#f5f5f5")]), + s.color("var(--text-color)"), + s.hover([s.background("var(--button-hover)")]), ]) } fn sm_button_class() { - s.class([s.background("#eee"), s.border_radius(px(6)), s.padding(px(4))]) + s.class([ + s.background("var(--dark-background)"), + s.border_radius(px(6)), + s.padding(px(4)), + s.color("inherit"), + ]) } pub fn title(text) { diff --git a/landing_page/src/components/footer.gleam b/landing_page/src/components/footer.gleam index 0d82b64..aaf4223 100644 --- a/landing_page/src/components/footer.gleam +++ b/landing_page/src/components/footer.gleam @@ -33,7 +33,7 @@ fn footer_details(children) { s.font_size(rem(0.8)), s.line_height("1.4"), s.font_weight("500"), - s.color("#888"), + s.color("var(--text-grey)"), ]) |> sh.div([], children) } diff --git a/landing_page/src/components/navbar.gleam b/landing_page/src/components/navbar.gleam index 6a5773b..7aeb833 100644 --- a/landing_page/src/components/navbar.gleam +++ b/landing_page/src/components/navbar.gleam @@ -25,11 +25,11 @@ pub fn nav(attributes, children) { s.padding(px(18)), s.margin(px(18)), s.gap(px(36)), - s.background("rgba(255, 255, 255, 0.9)"), + s.background("var(--navbar-background)"), s.position("sticky"), s.border_radius(px(10)), s.top(px(18)), - s.border("1px solid #eee"), + s.border("1px solid var(--dark-background)"), s.backdrop_filter("blur(8px)"), ]) |> sh.nav(attributes, children) @@ -39,7 +39,7 @@ fn external_icon(url, icon) { s.class([ s.color("#aaa"), s.transition("all .3s"), - s.hover([s.color("#000000")]), + s.hover([s.color("var(--text-color)")]), ]) |> sh.a([a.href(url)], [icons.small(icon)]) } diff --git a/landing_page/src/components/windows.gleam b/landing_page/src/components/windows.gleam index 4730b5a..c6468fd 100644 --- a/landing_page/src/components/windows.gleam +++ b/landing_page/src/components/windows.gleam @@ -5,13 +5,11 @@ import sketch as s import sketch/redraw/html as sh import sketch/size.{percent, px} -const border = "rgb(223, 234, 255)" - pub fn scaffold(children) { s.class([ - s.background("rgb(241, 246, 255)"), + s.background("var(--window-bg)"), s.border_radius(px(10)), - s.border("1px solid " <> border), + s.border("1px solid var(--window-border)"), s.overflow("hidden"), s.flex("1"), s.display("flex"), @@ -24,9 +22,9 @@ pub fn scaffold(children) { pub fn render(children) { s.class([ - s.background("rgb(241, 246, 255)"), + s.background("var(--window-bg)"), s.border_radius(px(10)), - s.border("1px solid " <> border), + s.border("1px solid var(--window-border)"), s.overflow("hidden"), s.flex("1"), s.margin(px(24)), @@ -44,7 +42,7 @@ pub fn traffic_lights() { s.display("flex"), s.gap(px(5)), s.padding(px(10)), - s.border_bottom("1px solid " <> border), + s.border_bottom("1px solid var(--window-border)"), ]) |> sh.div([], [ traffic_light(Red), @@ -77,7 +75,7 @@ fn traffic_light(color) { pub fn editor(content) { let content = a.inner_html(ffi.highlight(content)) s.class([ - s.background("#fff"), + s.background("var(--background)"), s.padding(px(10)), s.display("flex"), s.overflow("auto"), @@ -89,7 +87,7 @@ pub fn editor(content) { pub fn css(content) { let content = a.inner_html(ffi.highlight_css(content)) s.class([ - s.background("#fff"), + s.background("var(--background)"), s.padding(px(10)), s.display("flex"), s.max_height(px(400)), @@ -102,7 +100,7 @@ pub fn css(content) { pub fn html(content) { let content = a.inner_html(ffi.highlight_xml(content)) s.class([ - s.background("#fff"), + s.background("var(--background)"), s.padding(px(10)), s.display("flex"), s.max_height(px(400)), diff --git a/landing_page/src/landing_page.gleam b/landing_page/src/landing_page.gleam index 265877e..4187857 100644 --- a/landing_page/src/landing_page.gleam +++ b/landing_page/src/landing_page.gleam @@ -77,7 +77,7 @@ fn scroll_to(id: String) { fn lustre_section() { let copy_button = copy_button.copy_button() use <- redraw.component__("LustreSection") - section("lustre-section", "#eee", [ + section("lustre-section", "var(--dark-background)", [ column([], [ copy_button.title("Sketch Lustre"), copy_button(#("gleam add sketch sketch_lustre")), @@ -108,7 +108,7 @@ fn lustre_section() { fn redraw_section() { let copy_button = copy_button.copy_button() use <- redraw.component__("RedrawSection") - section("redraw-section", "#fff", [ + section("redraw-section", "var(--background)", [ column([], [ copy_button.title("Sketch Redraw"), copy_button(#("gleam add sketch sketch_redraw")), @@ -139,7 +139,7 @@ fn redraw_section() { fn plain_css_section() { let copy_button = copy_button.copy_button() use <- redraw.component__("PlainCssSection") - section("plain-css-section", "#eee", [ + section("plain-css-section", "var(--dark-background)", [ column([], [ copy_button.title("Sketch CSS"), copy_button(#("gleam add sketch sketch_css")), @@ -171,7 +171,7 @@ fn plain_css_section() { fn wisp_section() { let copy_button = copy_button.copy_button() use <- redraw.component__("WispSection") - section("wisp-section", "#fff", [ + section("wisp-section", "var(--background)", [ column([], [ copy_button.title("Sketch SSR"), copy_button(#("gleam add sketch")),