From 7f0913006cabd624d3c0a1144b0f8091e701ebb8 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Sat, 10 Oct 2020 21:57:25 +0000
Subject: [PATCH] Improve dark mode css and contrast

---
 webclient/src/App.js    |  1 +
 webclient/src/dark.css  | 57 +++++++++++++++++++++++++++++++++++++++++
 webclient/src/light.css | 20 ---------------
 3 files changed, 58 insertions(+), 20 deletions(-)
 create mode 100644 webclient/src/dark.css

diff --git a/webclient/src/App.js b/webclient/src/App.js
index 9a5dcc3..2172b72 100644
--- a/webclient/src/App.js
+++ b/webclient/src/App.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useReducer, useContext } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
 import './semantic-ui/semantic.min.css';
 import './light.css';
+import './dark.css';
 import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
 import Darkmode from 'darkmode-js';
 import { isAdmin, requester } from './utils.js';
diff --git a/webclient/src/dark.css b/webclient/src/dark.css
new file mode 100644
index 0000000..c2a53cf
--- /dev/null
+++ b/webclient/src/dark.css
@@ -0,0 +1,57 @@
+.darkmode-layer, .darkmode-toggle {
+	z-index: 500;
+}
+
+.darkmode--activated .ui.image {
+	mix-blend-mode: difference;
+	filter: brightness(75%);
+}
+
+.darkmode--activated i.green.circle.icon {
+	mix-blend-mode: difference;
+	color: #21ba4582 !important;
+
+}
+
+.darkmode--activated i.yellow.circle.icon {
+	mix-blend-mode: difference;
+	color: #fbbd0882 !important;
+}
+
+.darkmode--activated i.red.circle.icon {
+	mix-blend-mode: difference;
+	color: #db282882 !important;
+}
+
+.darkmode--activated .footer {
+	mix-blend-mode: difference;
+}
+
+.darkmode--activated .ql-toolbar.ql-snow,
+.darkmode--activated .ql-container.ql-snow,
+.darkmode--activated .ui.segment,
+.darkmode--activated .ui.form .field input,
+.darkmode--activated .ui.form .field .selection.dropdown,
+.darkmode--activated .ui.form .field .ui.checkbox label::before,
+.darkmode--activated .ui.form .field textarea {
+	border: 1px solid rgba(34,36,38,.50) !important;
+}
+
+.darkmode--activated .ui.basic.table tbody tr {
+	border-bottom: 1px solid rgba(34,36,38,.50) !important;
+}
+
+.darkmode--activated .ui.button {
+	background: #c9c9c9 !important;
+}
+
+.darkmode--activated .ui.red.button {
+	mix-blend-mode: difference;
+	background: #db282882 !important;
+}
+
+.darkmode--activated .ui.green.button,
+.darkmode--activated .ui.button.toggle.active {
+	mix-blend-mode: difference;
+	background: #21ba4582 !important;
+}
diff --git a/webclient/src/light.css b/webclient/src/light.css
index eeddb3b..999c807 100644
--- a/webclient/src/light.css
+++ b/webclient/src/light.css
@@ -150,23 +150,3 @@ body {
 	margin-left: -3.5px;
 	margin-right: 0.5em;
 }
-
-
-.darkmode-layer, .darkmode-toggle {
-	z-index: 500;
-}
-
-.darkmode--activated .ui.image {
-	mix-blend-mode: difference;
-	filter: brightness(50%);
-}
-
-.darkmode--activated i.green.circle.icon,
-.darkmode--activated i.yellow.circle.icon,
-.darkmode--activated i.red.circle.icon {
-	mix-blend-mode: difference;
-}
-
-.darkmode--activated .footer {
-	mix-blend-mode: difference;
-}