dynamic theme toggling is actually a pain

credit https://github.com/mmcesim
tritonhacks · Feb 5, 2024 · 712af56 · 712af56 · phentos · Mar 26, 2024
1 parent 6fe9144
commit 712af56
Show file tree

Hide file tree

Showing 29 changed files with 17,311 additions and 41 deletions.
diff --git a/_config.yml b/_config.yml
@@ -1,15 +1,13 @@
 title: Web Development Documentation
 description: Web Development Starter Kit for the 2024 Triton Hackathon hosted by CS Foreach @ UCSD.
 theme: just-the-docs
-color_scheme: dark
+color_scheme: light
 
 url: https://tritonhacks.github.io/thwebdev-24
 
+back_to_top: true
+back_to_top_text: "Back to top"
+
+aux_links_new_tab: true
 aux_links:
   CS Foreach: https://www.csforeach.org/
-
-defaults:
-  - scope:
-      path: "" # An empty string here means all files in the project
-    values:
-      dark_mode_script: "dark-mode-toggle.html"
diff --git a/_includes/components/aux_nav.html b/_includes/components/aux_nav.html
@@ -0,0 +1,37 @@
+<nav aria-label="Auxiliary" class="aux-nav">
+    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+      <symbol id="svg-sun" viewBox="0 0 24 24">
+        <title>Light mode</title>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather-sun">
+          <circle cx="12" cy="12" r="5"></circle>
+          <line x1="12" y1="1" x2="12" y2="3"></line>
+          <line x1="12" y1="21" x2="12" y2="23"></line>
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+          <line x1="1" y1="12" x2="3" y2="12"></line>
+          <line x1="21" y1="12" x2="23" y2="12"></line>
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+        </svg>
+      </symbol>
+      <symbol id="svg-moon" viewBox="0 0 24 24">
+        <title>Dark mode</title>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon-tabler-moon">
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
+        </svg>
+      </symbol>
+    </svg>
+    <ul class="aux-nav-list">
+      <li class="aux-nav-list-item">
+        <a id="theme-toggle" class="site-button"><svg width='18px' height='18px'><use href="#svg-sun"></use></svg></a>
+      </li>
+      <li class="aux-nav-list-item">
+        <a href="https://csforeach.ucsd.edu/" class="site-button" target="_blank" rel="noopener noreferrer">
+          CS Foreach
+        </a>
+      </li>
+    </ul>
+  </nav>
diff --git a/_includes/dark-mode-toggle.html b/_includes/dark-mode-toggle.html
diff --git a/_includes/head.html b/_includes/head.html
@@ -0,0 +1,14 @@
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+
+    <script>
+      if (localStorage.getItem('theme') === 'dark') document.documentElement.classList.add('dark-mode');
+    </script>
+    <script type="text/javascript" src="{{ '/assets/js/theme-switch.js' | relative_url }}"></script>
+    <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-switchable.css' | relative_url }}">
+
+    <script src="{{ '/assets/js/just-the-docs.js' | relative_url }}"></script>
+
+
+  </head>
diff --git a/_includes/head_custom.html b/_includes/head_custom.html
@@ -0,0 +1,8 @@
+{% if page.mathjax %}
+  <script type="text/x-mathjax-config">
+    {{ site.mathjax.config }};
+  </script>
+  <script type="text/javascript" async 
+    src="{{ site.mathjax.source }}">
+  </script>
+{% endif %}
diff --git a/_includes/header_custom.html b/_includes/header_custom.html
diff --git a/_includes/nav_footer_custom.html b/_includes/nav_footer_custom.html
@@ -0,0 +1,3 @@
+<footer class="site-footer">
+    TritonHacks Web Development 2024 Starter Kit, ® CS Foreach
+  </footer>
diff --git a/_includes/title.html b/_includes/title.html
@@ -0,0 +1,3 @@
+<img src="https://avatars.githubusercontent.com/u/80286044?s=200&v=4" width="48">
+<pre> </pre>
+Web Development