Added dark mode toggle and css theme

2025-11-18 16:47:05 -05:00 · 2020-08-11 02:13:41 -04:00
parent 65a50ceda0
commit 7dcff4a52e
6 changed files with 180 additions and 44 deletions
--- a/README.md
+++ b/README.md
@@ -11,13 +11,19 @@ Submitted questions are up-to-date as of **August 10th**.

 ---

+August 10th: 
+- Added a dark mode.
+- Added icon labels to the text/icon toggle for both question pages.
+- Used local storage to keep toggle state.
+
+
 TODOS:

 - Organize the filters to show all the questions for pools of Shadows.
 - Show corresponding personality only when filtering by Persona.
 - Organize Shadows by level instead.
 - Make and merge PRs from other users that forked this repo.
- Maybe add a dark mode of the theme.
+

 ---

--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,3 +1,10 @@
+<script>
+  const theme = localStorage.getItem('theme');
+  if (theme === 'dark') {
+    document.documentElement.setAttribute('data-theme', 'dark');
+  }
+</script>
+ 
 <!doctype html>
 <html lang="{{ site.lang | default: "en-US" }}">
  <head>
@@ -5,14 +12,14 @@
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>{{ site.title | default: site.github.repository_name }} by {{ site.github.owner_name }}</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width">
-    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
-    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
+    <link rel="icon" href="./favicon.ico" type="image/x-icon">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
@@ -21,7 +28,51 @@
  <body>
    <div class="wrapper">
      <header>
-        <h1>{{ site.title | default: site.github.repository_name }}</h1>
+        <div style="display: flex">
+          <h1 style="flex: 1">{{ site.title | default: site.github.repository_name }}</h1>
+          <div>
+            <label class="switch" id="themeSwitchLabel">
+              <input type="checkbox" id="themeSwitch" onClick="toggleTheme()"/>
+              <span class="slider round">
+                <i class="fas fa-moon"></i>
+                <i class="fas fa-sun"></i>
+              </span>
+            </label>
+          </div>
+        </div>
        <p class="view"><a href="{{ site.github.repository_url }}">View this joyce-chen Project on GitHub <small>{{ github_name }}</small></a></p>
        <p><a href="https://forms.gle/JtH9YUekRKVEkYgc6">If you want to contribute to the guide, fill out this form. Thank you! [New: Confirm reaction option]</a></p>
      </header>
+
+
+      <script>
+        const userPrefers = getComputedStyle(document.documentElement).getPropertyValue('content');	
+
+        if (theme === "dark") {
+          document.getElementById("themeSwitch").checked = true;
+        } else if (theme === "light") {
+          document.getElementById("themeSwitch").checked = false;
+        } else if  (userPrefers === "dark") {
+          document.documentElement.setAttribute('data-theme', 'dark');
+          window.localStorage.setItem('theme', 'dark');
+          document.getElementById("themeSwitch").checked = true;
+        } else {
+          document.documentElement.setAttribute('data-theme', 'light');
+          window.localStorage.setItem('theme', 'light');
+          document.getElementById("themeSwitch").checked = false;
+        }
+
+        function toggleTheme() {
+          let currentMode = document.documentElement.getAttribute('data-theme');
+          if (currentMode === "dark") {
+            document.documentElement.setAttribute('data-theme', 'light');
+            window.localStorage.setItem('theme', 'light');
+            document.getElementById("themeSwitch").checked = false;
+          } else {
+            document.documentElement.setAttribute('data-theme', 'dark');
+            window.localStorage.setItem('theme', 'dark');
+            document.getElementById("themeSwitch").checked = true;
+          }
+        }
+      </script>
+      
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -3,7 +3,7 @@

@import "{{ site.theme }}";

-html {
+html, html[data-theme='light'] {
  --bg-color: #fff;
  --p5-red: #dc3545;
  --headings: #222;
@@ -11,35 +11,66 @@ html {
  --table-heading: #444;
  --table-head-bg: rgba(0, 0, 0, 0.05);
  --table-text: #727272;
+  --table-result-text: rgb(60, 60, 60);
+  --table-unconfirmed-bg: rgb(247, 205, 209);
+  --table-unconfirmed-text: rgb(60, 60, 60);
  --table-border: #e5e5e5;
+  --hr-line: #e5e5e5;
  --form-bg: #fff;
+  --form-border: #dee2e6;
+  --form-text: #495057;
  --filter-head-bg: #f7f7f7;
  --filter-bg: #fff;
  --filter-btn: #f1f1f1;
+  --filter-btn-text: #727272;
+  --filter-btn-text-hover: #727272;
+  --filter-btn-text-active: white;
  --filter-btn-hover: #ddd;
  --filter-btn-active: #666;
+  --switch-bg: #ccc;
+  --theme-switch-bg: #2a2a2a;
+  --fa-font-icon: black;
 }

 html[data-theme='dark']  {
-  --bg-color: #1d1d1d;
+  --bg-color: #121212;// #1d1d1d;
  --p5-red: #dc3545;
  --headings: #dedede;
  --text: #e6e6e6;
  --table-heading: #dedede;
  --table-head-bg: #2a2a2a;
  --table-text: #e6e6e6;
-  --table-border: #dedede;
-  --table-bg: #1d1d1d;
-  --form-bg: #1d1d1d;
+  --table-result-text: #e6e6e6;
+  --table-unconfirmed-text: #e6e6e6;
+  --table-unconfirmed-bg: rgba(182, 76, 87, 0.705);
+  --table-border: #383838;//#dedede;
+  --table-bg: #121212;//#1d1d1d;
+  --hr-line: #2e2e2e;
+  --form-bg: #2e2e2e;//#121212;//#1d1d1d;
+  --form-border: #383838;
+  --form-text: #e6e6e6;
  --filter-head: #2e2e2e;
-  --filter-body: #1d1d1d;
-  --filter-btn: #f1f1f1;
-  --filter-btn-hover: #ddd;
-  --filter-btn-active: #666;
+  --filter-body: #121212;//#1d1d1d;
+  --filter-btn: #373737;
+  --filter-btn-text: #e6e6e6;
+  --filter-btn-text-hover: #121212;
+  --filter-btn-text-active: #121212;
+  --filter-btn-hover: #666;
+  --filter-btn-active: #ddd;
+  --switch-bg: #2a2a2a;
+  --theme-switch-bg: #2a2a2a;
+  --fa-font-icon: white;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    content: "dark";
+  }
 }

 body {
  background-color: var(--bg-color);
+  transition: background 0.2s linear;
 }
 h1, h2, h3, h4, h5, h6 {
  color: var(--headings);
@@ -61,23 +92,37 @@ nav {
  width: auto;
  position: static !important;
 }
+strong {
+  color: var(--headings);
+}
+hr {
+  background: var(--hr-line);
+}

-// FORM
+// ----------- FORM ----------- //
 #searchBar {
  background-color: var(--form-bg);
+  border: 1px solid var(--form-border) !important;
+}
+.form-control {
+  color: var(--form-text);
 }
 .form-control:focus {
+  color: var(--form-text);
  outline: 0 !important;
  border-color: initial;
  box-shadow: none;
 }
+.input-group-text {
+  border: 1px solid var(--form-border) !important;
+}

-// ALL QUESTIONS
+// ----------- ALL QUESTIONS ----------- //
 #questions {
  margin-top: 1rem;
 }

-// LINKS
+// ----------- LINKS ----------- //
 a {
  color: var(--p5-red);
  font-weight: normal;
@@ -90,17 +135,22 @@ a:active {
  color: var(--p5-red);
  font-weight: normal;
 }
+a:focus {
+  color: var(--p5-red);
+  font-weight: bold;
+}
 a:visited {
  color: var(--p5-red);
  font-weight: normal;
 }

-// TABLES
+// ----------- TABLES ----------- //
 table {
  width: auto;
  background-color: var(--table-bg);
  border: 1px solid var(--table-border);
  color: var(--table-text);
+  font: 14px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  
  th {
    font-weight: bold;
@@ -109,39 +159,34 @@ table {
    background-color: var(--table-head-bg);
    border-color: var(--table-border);
  }
-
+  td {
+    border-bottom: 1px solid var(--table-border);
+  }
  .subheader {
    text-align: center;
    font-variant: small-caps;
    font-weight: bold;
  }
-
  .extra {
    display: inline;
  }
-
  .result {
    text-align: center;
-    color: rgb(60, 60, 60);
+    color: var(--table-result-text);
  }
-
  .text {
    display: block;
  }
-
  .symbol {
    display: none;
  }
-
 }
-
 .unconfirmed {
-  background-color:rgb(247, 205, 209);
-  color: rgb(60, 60, 60);
+  background-color: var(--table-unconfirmed-bg);
+  color: var(--table-unconfirmed-text) !important;
 }

-
-// SWITCH
+// ----------- SWITCH ----------- //
 .switch {
  position: relative;
  display: inline-block;
@@ -160,7 +205,7 @@ table {
  left: 0;
  right: 0;
  bottom: 0;
-  background-color: #ccc;
+  background-color: var(--switch-bg);
  -webkit-transition: .4s;
  transition: .4s;
 }
@@ -179,21 +224,47 @@ input:checked + .slider {
  background-color: var(--p5-red);
 }
 input:focus + .slider {
-  box-shadow: 0 0 1px var(--p5-red);
+  box-shadow: 0 0 5px var(--p5-red);
 }
 input:checked + .slider:before {
-  -webkit-transform: translateX(26px);
-  -ms-transform: translateX(26px);
-  transform: translateX(26px);
+  left: calc(100% - 30px);
 }
 .slider.round {
  border-radius: 34px;
+  display: flex;
+  padding: 11px;
+  justify-content: space-between;
 }
 .slider.round:before {
  border-radius: 50%;
+  z-index: 2;
+}
+.fa-icons {
+  color: black;
+  transform: scale(1.25);
+}
+.fa-font {
+  color: var(--fa-font-icon);
+  transform: scale(1.15);
 }

-// FILTER
+// ----------- DARK MODE ----------- //
+#themeSwitchLabel .slider {
+  background-color: var(--theme-switch-bg);
+}
+#themeSwitchLabel .slider.round  {
+  padding: 10px;
+}
+.fa-moon {
+  color: #f1c40f;
+  transform: scale(1.5);
+}
+.fa-sun {
+  color: #f39c12;
+  transform: scale(1.5);
+}
+
+// ----------- FILTER ----------- //
 .card {
  background-color: var(--filter-head);
 }
@@ -207,9 +278,11 @@ input:checked + .slider:before {
  cursor: pointer;
  font-size: small;
  margin: .2rem .2rem;
+  color: var(--filter-btn-text);
 }
 .filter-btn:hover {
  background-color: var(--filter-btn-hover);
+  color: var(--filter-btn-text-hover);
 }
 .filter-btn:focus {
  outline: none;
@@ -217,7 +290,7 @@ input:checked + .slider:before {
 }
 .filter-btn.active {
  background-color: var(--filter-btn-active);
-  color: white;
+  color: var(--filter-btn-text-active);
 }
 .hidden {
  display: none;
--- a/index.md
+++ b/index.md
@@ -12,7 +12,10 @@
 	<div style="flex: 1; text-align: center;">
 		<label class="switch">
 			<input type="checkbox" id="originalCompact" onClick="toggleOriginalCompact(false)">
-			<span class="slider round"></span>
+			<span class="slider round">
+				<i class="fas fa-icons"></i>
+                <i class="fas fa-font"></i>
+			</span>
 		</label>
 	</div>
 </div>
--- a/royal.md
+++ b/royal.md
@@ -12,7 +12,10 @@
 	<div style="flex: 1; text-align: center;">
 		<label class="switch">
 			<input type="checkbox" id="royalCompact" onClick="toggleRoyalCompact(false)">
-			<span class="slider round"></span>
+			<span class="slider round">
+				<i class="fas fa-icons"></i>
+                <i class="fas fa-font"></i>
+			</span>
 		</label>
 	</div>
 </div>