Add dark theme support

Author: ghivert

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);
+}

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)])
 }

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) {

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)
 }

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)])
 }

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)),

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")),