From 65e12dad1fce3a98d986fac6febddb69c6cb7ee8 Mon Sep 17 00:00:00 2001
From: shrianshChari <30420527+shrianshChari@users.noreply.github.com>
Date: Mon, 27 Mar 2023 23:20:47 -0400
Subject: [PATCH] Dark Mode (#525)
* Finished dark theme
* Fixing code for tests; I miss es6
* Reduced FOIT, but is still there
* Added dark theme to Dynamax buttons
* Removed duplicate classes
* Added dark mode to Randoms calc
* Removed unnecessary dark-theme class
* Added Dark Mode for Honkalculator
Has small styling issues that I couldn't figure out how to fix
* Styled secret "Search" label
---
src/css/dark-theme.css | 116 +++++++++++++++++++++++++++++++++
src/honkalculate.template.html | 27 ++++++--
src/index.template.html | 28 ++++++--
src/js/dark-theme-toggle.js | 35 ++++++++++
src/randoms.template.html | 43 ++++++++----
5 files changed, 223 insertions(+), 26 deletions(-)
create mode 100644 src/css/dark-theme.css
create mode 100644 src/js/dark-theme-toggle.js
diff --git a/src/css/dark-theme.css b/src/css/dark-theme.css
new file mode 100644
index 000000000..411309303
--- /dev/null
+++ b/src/css/dark-theme.css
@@ -0,0 +1,116 @@
+/* Dark mode styles */
+
+body {
+ color: white;
+ background-color: black;
+}
+
+.btn {
+ background-color: #161616;
+ color: #B7B7B7;
+}
+
+.btn:hover {
+ z-index: 10;
+ border-color: #888888;
+ background: black;
+}
+
+.visually-hidden:focus + .btn,
+.btn:hover {
+ z-index: 10;
+ border-color: #888888;
+ background: black;
+}
+
+.visually-hidden:checked + .btn {
+ font-weight: bold;
+ color: white;
+ background: #000042;
+}
+
+.visually-hidden:disabled + .btn {
+ color: black;
+}
+
+fieldset {
+ background-color: #222222;
+}
+
+select {
+ background-color: black;
+ color: white;
+}
+
+a.links-lighten {
+ color: #7A9CFF;
+}
+
+a.links-lighten:hover {
+ color: #C2D0FF;
+}
+
+a.links-lighten:visited {
+ color: #BC8BEA;
+}
+
+a.links-lighten:visited:hover {
+ color: #DACAF7;
+}
+
+input {
+ background-color: black;
+ color: white;
+}
+
+textarea {
+ background-color: black;
+ color: white;
+}
+
+.wrapper {
+ background-color: black;
+ color: white;
+}
+
+a.collapsible-link {
+ color: white;
+}
+
+.bs-btn {
+ background-color: #161616;
+ color: #B7B7B7;
+}
+
+.bs-btn:hover {
+ z-index: 10;
+ border-color: #888888;
+ background: black;
+}
+
+.popover-content {
+ background-color: #161616;
+ color: #B7B7B7;
+}
+
+.dataTables_info {
+ color: #B7B7B7 !important; /* I know, don't use !important, but w/e */
+}
+
+.search-label {
+ color: #B7B7B7;
+}
+
+tr.odd, tr.even {
+ background-color: rgb(0 0 0) !important;
+}
+
+
+td.sorting_1 {
+ background-color: rgb(25 25 25) !important;
+}
+
+
+label:not(.btn) {
+ color: white;
+}
diff --git a/src/honkalculate.template.html b/src/honkalculate.template.html
index 2bf4985d5..930a4e7be 100644
--- a/src/honkalculate.template.html
+++ b/src/honkalculate.template.html
@@ -9,6 +9,7 @@
+
+
+
-
+