Add feature to toggle between light mode and dark mode wip (#83)

* Feat: add dark/lightmode to docs website --------- Co-authored-by: Erik van der Bas <[email protected]>
timber · Sep 13, 2024 · 5e51caa · 5e51caa
1 parent e13f1a0
commit 5e51caa
Show file tree

Hide file tree

Showing 20 changed files with 333 additions and 152 deletions.
diff --git a/_data/navTop.js b/_data/navTop.js
@@ -11,12 +11,4 @@ module.exports = [
     name: 'Sponsor us',
     url: 'https://opencollective.com/timber',
   },
-  {
-    image: {
-      alt: 'Star on Github',
-      src: '/build/img/github.png',
-      style: 'width: 29px; height: 29px; border: 0',
-    },
-    url: 'https://github.com/timber/timber',
-  },
 ];
diff --git a/_includes/header.njk b/_includes/header.njk
@@ -1,12 +1,17 @@
 <header class="header">
     <div class="logoContainer">
         <a href="{{ '/'|url }}">
-            <img
-                src="{{ '/build/img/timber-logo.svg'|url }}"
-                alt="Timber Logo"
-                style="width: 105px; height: 30px; border: 0"
-                role="img"
-            />
+            <svg aria-hidden="true" focusable="false" class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.45 30">
+							<title>Logo Tiny White</title>
+							<path class="text" d="M32.41,13.27H28.73V10H39.88v3.26h-3.7v13H32.41Z"/>
+							<path class="text" d="M44.28,9.1A2.26,2.26,0,1,1,42,11.36,2.26,2.26,0,0,1,44.28,9.1Zm-1.77,6h3.56V26.3H42.51Z"/>
+							<path class="text" d="M62.61,26.3V20.25c0-1.51-.51-2.42-1.72-2.42S59,18.51,59,20.67V26.3H55.55V20.23c0-1.51-.49-2.4-1.68-2.4s-1.93.7-1.93,2.91V26.3H48.5V15.09h3.44v1.63a3.51,3.51,0,0,1,3.24-1.91,3.28,3.28,0,0,1,3.4,2,3.83,3.83,0,0,1,3.51-2C65.35,14.81,66,17,66,19.39V26.3Z"/>
+							<path class="text" d="M72,26.3H68.45V10H72v6.68a4.06,4.06,0,0,1,3.44-1.89c3.24,0,5.47,2.54,5.47,5.89s-2.23,5.89-5.47,5.89A4,4,0,0,1,72,24.72Zm5.35-5.61a2.68,2.68,0,1,0-5.35,0,2.68,2.68,0,1,0,5.35,0Z"/>
+							<path class="text" d="M86.31,21.56c.07,1.35.63,2.49,2.49,2.49a1.92,1.92,0,0,0,2.07-1.28h3.49C94,24.88,92,26.61,88.82,26.61c-3.93,0-6.05-2.44-6.05-5.91a5.58,5.58,0,0,1,6-5.91c3.51,0,5.77,2.37,5.77,5.12a9,9,0,0,1-.12,1.65Zm0-2H91a2.35,2.35,0,0,0-4.7,0Z"/>
+							<path class="text" d="M104.45,18.32a4.67,4.67,0,0,0-1.26-.16c-2,0-3.24,1-3.24,3.77V26.3H96.4V15.09H100V16.9a3.91,3.91,0,0,1,3.42-2,2.52,2.52,0,0,1,1.07.19Z"/>
+							<polygon class="shape" points="24.65 26.39 23.09 24.39 14.12 24.39 14.12 22.24 21.42 22.24 19.87 20.24 14.12 20.24 14.12 18.09 21.73 18.09 20.29 16.09 14.12 16.09 14.12 13.94 18.75 13.94 17.31 11.94 14.12 11.94 14.12 9.79 18.5 9.79 17.09 7.79 14.12 7.79 14.12 5.64 15.57 5.64 14.16 3.64 14.12 3.64 14.12 0 7.54 9.17 11.24 9.18 3.77 19.59 7.62 19.59 0 30 14.12 30 14.12 26.39 24.65 26.39"/>
+						</svg>
+						<span class="sr-only">Timber</span>
         </a>
     </div>
 
@@ -31,9 +36,17 @@
                     </a>
                 </li>
             {% endfor %}
+								<li>
+										<a class="nav-link" href="https://github.com/timber/timber" target="_blank" rel="noreferrer noopener">
+												<span class="sr-only">Star on Github</span>
+												<svg viewBox="0 0 98 96" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" clip-rule="evenodd"></path></svg>
+										</a>
+								</li>
         </ul>
     </nav>
 
+		{% include 'theme-switcher.njk' %}
+
     <button
         class="navMobileToggle js-menu-open"
         type="button"

diff --git a/_includes/theme-switcher.njk b/_includes/theme-switcher.njk
@@ -0,0 +1,26 @@
+<button
+		class="themeSwitcher"
+		type="button"
+		onclick="window.switchTheme()"
+>
+		<span class="themeSwitcher__indicator themeSwitcher__indicator--dark">
+				<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun">
+						<circle cx="12" cy="12" r="4"/>
+						<path d="M12 2v2"/>
+						<path d="M12 20v2"/>
+						<path d="m4.93 4.93 1.41 1.41"/>
+						<path d="m17.66 17.66 1.41 1.41"/>
+						<path d="M2 12h2"/><path d="M20 12h2"/>
+						<path d="m6.34 17.66-1.41 1.41"/>
+						<path d="m19.07 4.93-1.41 1.41"/>
+				</svg>
+		</span>
+		<span class="themeSwitcher__indicator themeSwitcher__indicator--light">
+				<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon">
+						<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
+				</svg>
+		</span>
+		<span class="sr-only">
+				Toggle Light Dark Mode
+		</span>
+</button>
diff --git a/assets/img/timber-logo.svg b/assets/img/timber-logo.svg
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -1,5 +1,6 @@
 import { slideup } from './navigation';
 import Turbolinks from 'turbolinks';
+import "./themeSwitcher";
 
 Turbolinks.start();
 

diff --git a/assets/js/themeSwitcher.js b/assets/js/themeSwitcher.js
@@ -0,0 +1,20 @@
+window.switchTheme = () => {
+	const isDark = window.localStorage.getItem('theme') === 'dark';
+	document.documentElement.setAttribute('data-theme', isDark ? 'light' : 'dark');
+
+	localStorage.setItem("theme", document.documentElement.getAttribute('data-theme'));
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+	const theme = (() => {
+		if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+			return localStorage.getItem('theme');
+		}
+		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			return 'dark';
+		}
+		return 'light';
+	})();
+	document.documentElement.setAttribute('data-theme', theme);
+	window.localStorage.setItem('theme', theme);
+});
diff --git a/assets/sass/_base.scss b/assets/sass/_base.scss
@@ -1,3 +1,5 @@
+
+
 html {
 	-webkit-tap-highlight-color: rgba(0,0,0,0);
 	box-sizing: border-box;
@@ -15,20 +17,87 @@ html {
 }
 
 body {
+	--text-color: #{$white};
+	--bg-color: #{$main-bg};
+	--version-note: #222;
+	--link-color: #{$white};
+	--link-border-color: #{$green-light};
+	--header-bg-color: #{$black};
+	--header-logo-text-color: #{$white};
+	--header-logo-shape-color: #{$green-light};
+	--sidebar-link-active-color: #{$green-light};
+	--sidebar-border-color: #{$grey-dark};
+	--sidebar-version-link-color: #{$white};
+	--sidebar-version-link-hover-color: #{$black};
+	--sidebar-version-link-hover-background-color: #{$white};
+	--sidebar-version-link-border-color: #{$white};
+	--sidebar-version-link-border-hover-color: #{$black};
+	--theme-switcher-color: #{$white};
+	--theme-switcher-indicator--dark-display: none;
+	--theme-switcher-indicator--light-display: block;
+	--version-note-link-color: #{$white};
+	--version-note-link-border-color: #{$green-light};
+	--toc-link-hover-color: #{$green-light};
+	--code-color: #{$green-light};
+	--code-background-color: #{$grey-dark};
+	--code-link-border-color: #{$green-light};
+	--table-code-text-color: #{$green-light};
+	--headings-code-color: #{$green-light};
+	--direct-link-hover-color: #{$green-light};
+	--nav-mobile-toggle-color: #{$green-light};
+	--pre-code-color: #{$green-light};
+
+	color: var(--text-color);
+	background-color: var(--bg-color);
 	display: flex;
 	min-height: 100vh;
-  	flex-direction: column;
-
-    color: $text-color;
-    padding: 0;
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    background-color: $main-bg;
-    height: 100%;
+	flex-direction: column;
+	padding: 0;
+	margin: 0;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	height: 100%;
 	line-height: 1.6;
-    -webkit-text-size-adjust: none; /* Never autoresize text */
-    @include font-text;
+	-webkit-text-size-adjust: none; /* Never autoresize text */
+	@include font-text;
+
+	/*
+	All colors that are applied to ligth theme should be defined here,
+	and then use these custom properties in each components as needed.
+	*/
+	html[data-theme="light"] & {
+		--text-color: #{$black};
+		--link-color: #{$black};
+		--link-border-color: #{$green};
+		--toc-text-decoration: underline;
+		--text-color-inverse: #{$white};
+		--bg-color: #{$white};
+		--version-note: #{$green};
+		--header-bg-color: #{$white};
+		--header-logo-text-color: #{$black};
+		--header-logo-shape-color: #{$black};
+		--sidebar-link-active-color: #{$green};
+		--sidebar-border-color: #{$border-color};
+		--sidebar-version-link-color: #{$black};
+		--sidebar-version-link-hover-color: #{$white};
+		--sidebar-version-link-hover-background-color: #{$green};
+		--sidebar-version-link-border-color: #{$black};
+		--sidebar-version-link-hover-border-color: #{$green};
+		--theme-switcher-color: #{$black};
+		--theme-switcher-indicator--dark-display: block;
+		--theme-switcher-indicator--light-display: none;
+		--version-note-link-color: #{$white};
+		--version-note-link-border-color: #{$white};
+		--toc-link-hover-color: #{$green};
+		--code-color: #007f4b;
+		--code-background-color: #{$grey-lighter};
+		--code-link-border-color: #{$green};
+		--table-code-text-color: #{$green};
+		--headings-code-color: #{$green};
+		--direct-link-hover-color: #{$green};
+		--nav-mobile-toggle-color: #{$black};
+		--pre-code-color: #{$white};
+	}
 }
 
 .wrapper {

diff --git a/assets/sass/_code.scss b/assets/sass/_code.scss
@@ -1,57 +1,62 @@
 code {
-	color: $green-light;
+	color: var(--code-color);
+	background-color: var(--code-background-color);
 	white-space: pre-wrap;
 	text-transform: none;
 	font-weight: $font-weight-normal;
+	padding: 3px 5px;
+	border-radius: 2px;
 	@include font-code;
 }
 
-p > code,
-li > code,
+pre:not([class*="language-"]) code {
+  color: var(--pre-code-color);
+}
+
 a > code {
-	padding: 3px 5px;
-	background: $grey-dark;
-	border-radius: 2px;
+	border-bottom: 1px solid var(--code-link-border-color);
+
+	&:hover {
+	  // Increase border width so it has a clear hover style.
+	  border-width: 2px;
+	}
 }
 
-p > code,
-li > code {
-	margin: 0 2px;
+td code {
+  background-color: transparent;
 }
 
 h1, h2, h3, h4, h5, h6 {
 	code {
 		font-size: inherit;
+		// Keep color same as heading, although make it italic to stand out a bit.
+		color: var(--headings-code-color);
+		background-color: transparent;
 	}
 }
 
-a > code {
-	color: $green-light;
-	@include font-code;
-	border-bottom: 1px solid $green-light;
-}
-
 a:has(> code){
 	margin: 0 2px;
 }
 
 .method-name,
 .method-name a,
 .property-name {
-	color: $green-light;
+	color: var(--code-link-border-color);
 	@include font-code;
 }
 
 .method-type,
 .method-type code,
-.property-type, 
+.property-type,
 .property-type code{
 	color: $purple;
 	@include font-code;
 }
 
 table code {
 	word-break: normal;
+	color: var(--table-code-text-color);
 }
 
 pre > code {
@@ -63,16 +68,13 @@ pre {
 	background-color: $code-bg;
 	color: $text-color;
 	border-radius: 4px;
-
-	padding: 2em $gutter-width/2;
-	margin: 5px 0 20px $gutter-width/-2;
-	width: calc(100% + #{$gutter-width/2});
-
+	padding: 1em;
+	margin-block: 5px 20px;
 	clear: right;
 
 	& > p {
 		margin: 0;
 	}
 
 	@include font-code;
-}
+}