Dark Mode

src/css/dark-theme.css

@@ -0,0 +1,74 @@
+/* Dark mode styles */
+
+body.dark-theme {
+    color: white;
+    background-color: black;
+}
+
+.btn.dark-theme {
+    background-color: #161616;
+    color: #B7B7B7;
+}
+
+.btn.dark-theme:hover {
+    z-index: 10;
+    border-color: #888888;
+    background: black;
+}
+
+.visually-hidden:focus + .btn.dark-theme,
+.btn.dark-theme:hover {
+    z-index: 10;
+    border-color: #888888;
+    background: black;
+}
+
+.visually-hidden:checked + .btn.dark-theme {
+    font-weight: bold;
+    color: white;
+    background: #000042;
+}
+
+.visually-hidden:disabled + .btn.dark-theme {
+    color: black;
+}
+
+fieldset.dark-theme {
+    background-color: #222222;
+}
+
+select.dark-theme {
+    background-color: black;
+    color: white;
+}
+
+a.links-lighten.dark-theme {
+    color: #7A9CFF;
+}
+
+a.links-lighten.dark-theme:hover {
+    color: #C2D0FF;
+}
+
+a.links-lighten.dark-theme:visited {
+    color: #BC8BEA;
+}
+
+a.links-lighten.dark-theme:visited:hover {
+    color: #DACAF7;
+}
+
+input.dark-theme {
+    background-color: black;
+    color: white;
+}
+
+textarea.dark-theme {
+    background-color: black;
+    color: white;
+}
+
+.wrapper.dark-theme {
+    background-color: black;
+    color: white;
+}

src/index.template.html

@@ -7,6 +7,7 @@
     <link type="text/css" rel="stylesheet" href="./js/vendor/select2/select2.css" />
     <link type="text/css" rel="stylesheet" href="./css/main.css?" />
     <link type="text/css" rel="stylesheet" href="./css/vendor/bootstrap.css" />
+    <link rel="stylesheet" type="text/css" href="./css/dark-theme.css">
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-26211653-3"></script>
     <script>
@@ -140,7 +141,7 @@
                     <label>Type</label>
                     <select aria-label="type1" class="type1 terrain-trigger calc-trigger"></select>
                     <select aria-label="type2" class="type2 terrain-trigger calc-trigger"></select>
-                    <small class="right">(<a class="analysis" target="_blank" href="">Smogon&nbsp;analysis</a>)</small>
+                    <small class="right">(<a class="analysis links-lighten" target="_blank" href="">Smogon&nbsp;analysis</a>)</small>
                 </div>
                 <div class="gen-specific g9">
                     <label>Tera Type</label>
@@ -1019,7 +1020,7 @@
                     <label>Type</label>
                     <select aria-label="Type 1" class="type1 terrain-trigger calc-trigger"></select>
                     <select aria-label="Type 2" class="type2 terrain-trigger calc-trigger"></select>
-                    <small class="right">(<a class="analysis" target="_blank" href="">Smogon&nbsp;analysis</a>)</small>
+                    <small class="right">(<a class="analysis links-lighten" target="_blank" href="">Smogon&nbsp;analysis</a>)</small>
                 </div>
                 <div class="gen-specific g9">
                     <label>Tera Type</label>
@@ -1576,12 +1577,15 @@
     <script type="text/javascript" src="./js/shared_controls.js?"></script>
     <script type="text/javascript" src="./js/index_randoms_controls.js?"></script>
     <script type="text/javascript" src="./js/moveset_import.js?"></script>
+    <script type="text/javascript" src="./js/dark-theme-toggle.js?" defer></script>
 </div>
 
 <div class="credits">Created by Honko, maintained by Austin and Kris
-    <ul><li><a href="https://github.com/smogon/damage-calc/contributors" target="_blank">Contributors</a></li>
-    <li><a href="https://www.smogon.com/forums/threads/pok%C3%A9mon-showdown-damage-calculator.3593546/" target="_blank">Bug Reports</a></li>
-    <li><a href="https://github.com/smogon/damage-calc" target="_blank">GitHub repository</a></li></ul>
+    <ul><li><a href="https://github.com/smogon/damage-calc/contributors" class="links-lighten" target="_blank">Contributors</a></li>
+    <li><a href="https://www.smogon.com/forums/threads/pok%C3%A9mon-showdown-damage-calculator.3593546/" class="links-lighten" target="_blank">Bug Reports</a></li>
+    <li><a href="https://github.com/smogon/damage-calc" class="links-lighten" target="_blank">GitHub repository</a></li></ul>
+
+    <button type="button" id="dark-theme-toggle"></button>
 </div>
 
 </body>

src/js/dark-theme-toggle.js

@@ -0,0 +1,55 @@
+/*
+* Dark mode toggle
+*
+* In its current state, it will cause a FOIT.
+* Based on Internet research, the only way to
+* prevent this is to have a server-side language
+* insert the dark-theme class before it begins to
+* render.
+*/
+
+var prefersDarkTheme = localStorage.getItem('darkTheme');
+
+/*
+* localStorage will only store strings
+* This means that if it has the value 'false',
+* It will be truey and incorrectly cause the
+* dark theme to load.
+*/
+if (prefersDarkTheme == 'true') {
+	prefersDarkTheme = true;
+} else {
+	prefersDarkTheme = false;
+}
+
+var darkThemeButton = document.getElementById('dark-theme-toggle');
+darkThemeButton.innerText = prefersDarkTheme ? 'Click for Light Theme' : 'Click for Dark Theme';
+
+/*
+* Function that toggles light and dark mode
+* Doesn't use jQuery, probably could with some modification
+*/
+function toggleTheme() {
+	prefersDarkTheme = !prefersDarkTheme;
+
+	// Toggle for all elements
+	var elements = document.getElementsByTagName('*');
+	for (var index = 0; index < elements.length; index++) {
+		var element = elements[index];
+		element.classList.toggle('dark-theme');
+	}
+
+	localStorage.setItem('darkTheme', prefersDarkTheme);
+	darkThemeButton.innerText = prefersDarkTheme ? 'Click for Light Theme' : 'Click for Dark Theme';
+}
+
+darkThemeButton.addEventListener('click', function () {
+	// Idk why this can't be directly called, but oh well
+	toggleTheme();
+});
+
+// Loads dark mode if user prefers it from beginning
+if (prefersDarkTheme) {
+	prefersDarkTheme = false;
+	toggleTheme();
+}