Adding Light and Dark mode

_quarto.yml

@@ -20,7 +20,6 @@ book:
   repo-actions: [edit, issue]
   chapters:
     - index.qmd
-
     - preface-2e.qmd
     - intro.qmd
 
@@ -74,12 +73,27 @@ book:
 format:
   html:
     theme:
-      - cosmo
-      - r4ds.scss
+      light: [cosmo, r4ds-light.scss]
+      dark: [cosmo, r4ds-dark.scss]
     code-link: true
-
     author-meta: "Hadley Wickham, Mine Çetinkaya-Rundel, and Garrett Grolemund"
-    include-in-header: "plausible.html"
+    include-in-header:
+      - plausible.html
+      - text: |
+          <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              const theme = localStorage.getItem('quarto-color-scheme');
+              if (theme) document.body.setAttribute('data-theme', theme);
+            });
+          </script>
+    include-before-body:
+      - text: |
+          <div class="theme-toggle">
+            <button onclick="window.quartoToggleColorScheme()" class="theme-toggle-button">
+              <span class="theme-toggle-dark">🌙</span>
+              <span class="theme-toggle-light">☀️</span>
+            </button>
+          </div>
     callout-appearance: simple
 
 editor: source

r4ds-dark.scss

@@ -0,0 +1,35 @@
+// r4ds-dark.scss
+/*-- scss:defaults --*/
+$body-bg: #1a1a1a;
+$body-color: #e6e6e6;
+$link-color: #66b3ff;
+$code-block-bg: #2d2d2d;
+
+/*-- scss:rules --*/
+.sidebar-title {
+  color: $body-color;
+}
+
+/* Theme toggle styles */
+.theme-toggle {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 1000;
+}
+
+.theme-toggle-button {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  font-size: 1.2rem;
+}
+
+[data-theme="light"] .theme-toggle-dark {
+  display: none;
+}
+
+[data-theme="dark"] .theme-toggle-light {
+  display: none;
+}

r4ds-light.scss

@@ -0,0 +1,35 @@
+// r4ds-light.scss
+/*-- scss:defaults --*/
+$body-bg: #ffffff;
+$body-color: #404040;
+$link-color: #0073e6;
+$code-block-bg: #f8f9fa;
+
+/*-- scss:rules --*/
+.sidebar-title {
+  color: $body-color;
+}
+
+/* Theme toggle styles */
+.theme-toggle {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 1000;
+}
+
+.theme-toggle-button {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  font-size: 1.2rem;
+}
+
+[data-theme="light"] .theme-toggle-dark {
+  display: none;
+}
+
+[data-theme="dark"] .theme-toggle-light {
+  display: none;
+}