Add support for dark mode (#28)

gleam-lang · Mar 6, 2024 · 47abf37 · 47abf37
1 parent ec9c3f6
commit 47abf37
Show file tree

Hide file tree

Showing 5 changed files with 283 additions and 26 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,3 @@
+[*]
+indent_style = space
+indent_size = 2
diff --git a/priv/static/common.css b/priv/static/common.css
@@ -0,0 +1,41 @@
+/* This file contains design tokens used in core Gleam projects */
+:root {
+  /* Branding */
+  --faff-pink: #ffaff3;
+  --white: #fefefc;
+  --unnamed-blue: #a6f0fc;
+  --aged-plastic-yellow: #fffbe8;
+  --unexpected-aubergine: #584355;
+  --underwater-blue: #292d3e;
+  --charcoal: #2f2f2f;
+  --black: #1e1e1e;
+  --blacker: #151515;
+
+  /* Other greys */
+  --off-white: #f5f5f5;
+
+  /* Other colors */
+  --menthol: #c8ffa7;
+  --caramel: #ffd596;
+  --deep-saffron: #ff9d35;
+  --tomato: #ff6262;
+
+  /* Semantic colors */
+  --brand-success: var(--menthol);
+  --brand-warning: var(--caramel);
+  --brand-error: var(--tomato);
+
+  /* Light theme */
+  --light-theme-background: var(--white);
+  --light-theme-background-dim: var(--off-white);
+  --light-theme-text: var(--black);
+  --light-theme-text-secondary: var(--charcoal);
+  --light-theme-code: var(--black);
+
+  /* Dark theme */
+  --dark-theme-background: var(--underwater-blue);
+  --dark-theme-background-dim: var(--black);
+  --dark-theme-text: var(--white);
+  --dark-theme-text-secondary: var(--aged-plastic-yellow);
+  --dark-theme-code: var(--deep-saffron);
+}
diff --git a/priv/static/styles.css b/priv/static/styles.css
@@ -15,16 +15,6 @@
   --font-family-normal: "Outfit", sans-serif;
   --font-family-title: "Lexend", sans-serif;
 
-  --color-charcoal: #2f2f2f;
-  --color-graphite: #545454;
-  --color-black: #1e1e1e;
-  --color-blacker: #151515;
-  --color-white: #fefefc;
-  --color-faff-pink: #ffaff3;
-  --color-aged-plastic-yellow: #fffbe8;
-  --color-unnamed-blue: #a6f0fc;
-  --color-unexpected-aubergine: #584355;
-
   --font-size-normal: 16px;
   --font-size-small: 14px;
 
@@ -34,23 +24,53 @@
   --gap-l: calc(var(--gap) * 2);
 }
 
+:root {
+  --color-header-background: var(--faff-pink);
+  --color-header-input-background: var(--light-theme-background);
+  --color-header-link: var(--light-theme-text);
+  --color-header-text: var(--light-theme-text);
+}
+
+html.theme-light {
+  --color-background: var(--light-theme-background);
+  --color-text: var(--light-theme-text);
+  --color-text-secondary: var(--light-theme-text-secondary);
+  --color-link: var(--color-text);
+  --color-link-decoration: var(--faff-pink);
+  --color-package-name: var(--color-text);
+  --color-package-name-decoration: var(--faff-pink);
+  color-scheme: light;
+}
+
+html.theme-dark {
+  --color-background: var(--dark-theme-background);
+  --color-text: var(--dark-theme-text);
+  --color-text-secondary: var(--dark-theme-text-secondary);
+  --color-link: var(--dark-theme-text);
+  --color-link-decoration: var(--faff-pink);
+  --color-package-name: var(--faff-pink);
+  --color-package-name-decoration: var(--unexpected-aubergine);
+  color-scheme: dark;
+}
+
 * {
   box-sizing: border-box;
 }
 
 body {
   padding: 0;
   margin: 0;
-  background: var(--color-white);
+  background-color: var(--color-background);
   font-family: var(--font-family-normal);
-  background-color: var(--color-white);
+  font-size: var(--font-size);
   font-size: var(--font-size-normal);
+  color: var(--color-text);
 }
 
 a,
 a:visited {
-  color: unset;
-  text-decoration-color: var(--color-faff-pink);
+  color: var(--color-link);
+  text-decoration-color: var(--color-link-decoration);
 }
 
 h1,
@@ -70,17 +90,20 @@ h6 {
 }
 
 .site-header {
-  background-color: var(--color-faff-pink);
-  top: 0;
+  color-scheme: light;
   width: 100%;
+  background-color: var(--color-header-background);
+  color: var(--color-header-text);
+  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1)
 }
 
 .site-header a {
+  color: var(--color-header-link);
+  text-decoration: none;
   color: black;
   display: flex;
   align-items: center;
   white-space: nowrap;
-  margin-bottom: var(--gap-s);
 }
 
 .site-header .logo {
@@ -91,14 +114,54 @@ h6 {
 }
 
 .site-header nav {
-  display: block;
+  display: flex;
+  gap: var(--gap-s);
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.site-header .nav-right {
+  display: flex;
+  gap: var(--gap);
+  align-items: center;
+  flex-grow: 1;
+  justify-content: flex-end;
+}
+
+html.theme-dark .theme-button.-dark {
+  display: none;
+}
+
+html.theme-light .theme-button.-light {
+  display: none;
+}
+
+.theme-button {
+  appearance: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  background: none;
+  color: inherit;
+  display: flex;
+  gap: 0.25em;
+  font-size: var(--font-size-normal);
+}
+
+.theme-button svg {
+  display: inline-block;
+  fill: currentColor;
+  height: 1em;
+  width: 1em;
 }
 
 .search-form {
   display: flex;
 }
 
 .search-form input[type="search"] {
+  background: var(--color-header-input-background);
   height: 30px;
   border: none;
   flex-grow: 1;
@@ -109,7 +172,7 @@ h6 {
 }
 
 .search-form input[type="submit"] {
-  background: var(--color-white);
+  background: var(--color-header-input-background);
   border: none;
   border-radius: 0 100px 100px 0;
   height: 30px;
@@ -173,7 +236,7 @@ h6 {
 
 .package-date-time {
   float: right;
-  color: var(--color-graphite);
+  color: var(--color-text-secondary);
   margin-top: 0.3rem;
 }
 
@@ -197,11 +260,14 @@ h6 {
 
 .package-links a {
   margin-right: var(--gap);
-  color: var(--color-unexpected-aubergine);
   font-size: var(--font-size-small);
-  text-decoration: none;
 }
 
-.package-list h2 {
+.package-list .package-name {
   margin: 0 var(--gap) var(--gap-s) 0;
 }
+
+.package-list .package-name > a {
+  color: var(--color-package-name);
+  text-decoration-color: var(--color-package-name-decoration);
+}
diff --git a/src/packages/web/icons.gleam b/src/packages/web/icons.gleam
@@ -0,0 +1,65 @@
+import lustre/attribute.{attribute}
+import lustre/element.{type Element}
+import lustre/element/svg
+
+pub fn icon_moon() -> Element(Nil) {
+  svg.svg(
+    [attribute.id("icon-moon"), attribute.attribute("viewBox", "0 0 24 24")],
+    [
+      svg.path([
+        attribute.attribute(
+          "d",
+          "M21.996 12.882c0.022-0.233-0.038-0.476-0.188-0.681-0.325-0.446-0.951-0.544-1.397-0.219-0.95 0.693-2.060 1.086-3.188 1.162-1.368 0.092-2.765-0.283-3.95-1.158-1.333-0.985-2.139-2.415-2.367-3.935s0.124-3.124 1.109-4.456c0.142-0.191 0.216-0.435 0.191-0.691-0.053-0.55-0.542-0.952-1.092-0.898-2.258 0.22-4.314 1.18-5.895 2.651-1.736 1.615-2.902 3.847-3.137 6.386-0.254 2.749 0.631 5.343 2.266 7.311s4.022 3.313 6.772 3.567 5.343-0.631 7.311-2.266 3.313-4.022 3.567-6.772zM19.567 14.674c-0.49 1.363-1.335 2.543-2.416 3.441-1.576 1.309-3.648 2.016-5.848 1.813s-4.108-1.278-5.417-2.854-2.016-3.648-1.813-5.848c0.187-2.032 1.117-3.814 2.507-5.106 0.782-0.728 1.71-1.3 2.731-1.672-0.456 1.264-0.577 2.606-0.384 3.899 0.303 2.023 1.38 3.934 3.156 5.247 1.578 1.167 3.448 1.668 5.272 1.545 0.752-0.050 1.496-0.207 2.21-0.465z",
+        ),
+      ]),
+    ],
+  )
+}
+
+pub fn icon_sun() -> Element(Nil) {
+  svg.svg(
+    [attribute.id("icon-sun"), attribute.attribute("viewBox", "0 0 24 24")],
+    [
+      svg.path([
+        attribute.attribute(
+          "d",
+          "M18 12c0-1.657-0.673-3.158-1.757-4.243s-2.586-1.757-4.243-1.757-3.158 0.673-4.243 1.757-1.757 2.586-1.757 4.243 0.673 3.158 1.757 4.243 2.586 1.757 4.243 1.757 3.158-0.673 4.243-1.757 1.757-2.586 1.757-4.243zM16 12c0 1.105-0.447 2.103-1.172 2.828s-1.723 1.172-2.828 1.172-2.103-0.447-2.828-1.172-1.172-1.723-1.172-2.828 0.447-2.103 1.172-2.828 1.723-1.172 2.828-1.172 2.103 0.447 2.828 1.172 1.172 1.723 1.172 2.828zM11 1v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM11 21v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM3.513 4.927l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM17.653 19.067l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM1 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM21 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM4.927 20.487l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM19.067 6.347l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z",
+        ),
+      ]),
+    ],
+  )
+}
+
+pub fn icon_toggle_left() -> Element(Nil) {
+  svg.svg(
+    [
+      attribute.id("icon-toggle-left"),
+      attribute.attribute("viewBox", "0 0 24 24"),
+    ],
+    [
+      svg.path([
+        attribute.attribute(
+          "d",
+          "M8 4c-2.209 0-4.21 0.897-5.657 2.343s-2.343 3.448-2.343 5.657 0.897 4.21 2.343 5.657 3.448 2.343 5.657 2.343h8c2.209 0 4.21-0.897 5.657-2.343s2.343-3.448 2.343-5.657-0.897-4.21-2.343-5.657-3.448-2.343-5.657-2.343zM8 6h8c1.657 0 3.156 0.67 4.243 1.757s1.757 2.586 1.757 4.243-0.67 3.156-1.757 4.243-2.586 1.757-4.243 1.757h-8c-1.657 0-3.156-0.67-4.243-1.757s-1.757-2.586-1.757-4.243 0.67-3.156 1.757-4.243 2.586-1.757 4.243-1.757zM12 12c0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172-2.106 0.449-2.828 1.172-1.172 1.724-1.172 2.828 0.449 2.106 1.172 2.828 1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828zM10 12c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414z",
+        ),
+      ]),
+    ],
+  )
+}
+
+pub fn icon_toggle_right() -> Element(Nil) {
+  svg.svg(
+    [
+      attribute.id("icon-toggle-right"),
+      attribute.attribute("viewBox", "0 0 24 24"),
+    ],
+    [
+      svg.path([
+        attribute.attribute(
+          "d",
+          "M8 4c-2.209 0-4.21 0.897-5.657 2.343s-2.343 3.448-2.343 5.657 0.897 4.21 2.343 5.657 3.448 2.343 5.657 2.343h8c2.209 0 4.21-0.897 5.657-2.343s2.343-3.448 2.343-5.657-0.897-4.21-2.343-5.657-3.448-2.343-5.657-2.343zM8 6h8c1.657 0 3.156 0.67 4.243 1.757s1.757 2.586 1.757 4.243-0.67 3.156-1.757 4.243-2.586 1.757-4.243 1.757h-8c-1.657 0-3.156-0.67-4.243-1.757s-1.757-2.586-1.757-4.243 0.67-3.156 1.757-4.243 2.586-1.757 4.243-1.757zM20 12c0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172-2.106 0.449-2.828 1.172-1.172 1.724-1.172 2.828 0.449 2.106 1.172 2.828 1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828zM18 12c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414z",
+        ),
+      ]),
+    ],
+  )
+}