diff --git a/car/app.py b/car/app.py
index 8cf3288..3e85db2 100644
--- a/car/app.py
+++ b/car/app.py
@@ -48,6 +48,7 @@
"use_map": 1,
"autolink": 1,
"zoom_phone": 0,
+ "dark_mode": 0,
}
BASE_URL = "https://car.yourallyinmontgomery.org"
diff --git a/car/static/dark.css b/car/static/dark.css
new file mode 100644
index 0000000..85f4a3a
--- /dev/null
+++ b/car/static/dark.css
@@ -0,0 +1,25 @@
+:root {
+ --bg-color: #16181d;
+ --text-color: #e5e7eb;
+ --heading-border: #555;
+ --heading-border-dashed: #444;
+ --footer-color: #999;
+ --stripe-bg: #202225;
+ --link-visited: #9db4ff;
+ --danger-color: #ff6b6b;
+ --success-color: #4ade80;
+ --muted-color: #9ca3af;
+ --in-progress-color: pink;
+ --in-progress-bg: #555;
+ --last-note-color: #ccc;
+ --header-bg: #21242b;
+ --highlight-bg: #b59f00;
+ --credits-color: #9db1ff;
+ --btn-bg: #2e2d61;
+ --btn-text: #ffffff;
+ --btn-border: #1d1c3d;
+ --btn-hover-bg: #3b3a78;
+ --btn-active-bg: #343285;
+ --btn-disabled-bg: #444;
+ --btn-disabled-text: #888;
+}
diff --git a/car/static/light.css b/car/static/light.css
new file mode 100644
index 0000000..cd1a494
--- /dev/null
+++ b/car/static/light.css
@@ -0,0 +1,25 @@
+:root {
+ --bg-color: #ffffff;
+ --text-color: #000000;
+ --heading-border: black;
+ --heading-border-dashed: #ccc;
+ --footer-color: #555;
+ --stripe-bg: #f5f5f5;
+ --link-visited: blue;
+ --danger-color: red;
+ --success-color: green;
+ --muted-color: gray;
+ --in-progress-color: pink;
+ --in-progress-bg: #333;
+ --last-note-color: #222;
+ --header-bg: #eee;
+ --highlight-bg: yellow;
+ --credits-color: #77d;
+ --btn-bg: #b8b7f7;
+ --btn-text: #000000;
+ --btn-border: #555582;
+ --btn-hover-bg: #7b7bad;
+ --btn-active-bg: #6b6bc2;
+ --btn-disabled-bg: #ccc;
+ --btn-disabled-text: #777;
+}
diff --git a/car/static/mycoolstylesheet.css b/car/static/mycoolstylesheet.css
index 103d78d..67af7ed 100644
--- a/car/static/mycoolstylesheet.css
+++ b/car/static/mycoolstylesheet.css
@@ -2,6 +2,8 @@ body {
font-family:sans-serif;
font-size: 14pt;
line-height: 1.6;
+ background-color: var(--bg-color);
+ color: var(--text-color);
}
div.form-field {
margin-bottom: 1em;
@@ -13,24 +15,38 @@ div.form-field > input[type="text"] {
}
.big {
font-size: 200%;
- border: 1px solid red;
+ border: 1px solid var(--danger-color);
}
.important {
- color: red;
+ color: var(--danger-color);
}
button {
font-size: 150%;
width: 100%;
- margin-top:12px;
+ margin-top: 12px;
+ padding: 0.5em 1em;
+ background-color: var(--btn-bg);
+ color: var(--btn-text);
+ border: 1px solid var(--btn-border);
+ border-radius: 6px;
+ cursor: pointer;
+ transition: background-color 0.15s ease;
+}
+button:hover { background-color: var(--btn-hover-bg); }
+button:active { background-color: var(--btn-active-bg); }
+button:disabled {
+ background-color: var(--btn-disabled-bg);
+ color: var(--btn-disabled-text);
+ cursor: not-allowed;
}
h1,h2,h3 {
line-height:initial;
- border-top:1px solid black;
+ border-top:1px solid var(--heading-border);
margin:12px 0px 0px 0px;
}
h2,h3 {
- border-bottom:1px dashed #ccc;
+ border-bottom:1px dashed var(--heading-border-dashed);
margin-top:48px;
}
@@ -48,10 +64,9 @@ ul {
margin:18px 0px 8px 0px;
}
footer {
- color:#555;
+ color: var(--footer-color);
}
-
h1 a {
text-decoration:none;
}
@@ -60,7 +75,6 @@ h1 a::before {
margin-right:10px;
}
-/*this is the part where i style the list of turfs*/
ul.secretly-a-table {
list-style-type:none;
padding:0px;
@@ -69,7 +83,7 @@ ul.secretly-a-table li {
padding:1px 4px;
}
ul.secretly-a-table li:nth-child(odd) {
- background-color:#f5f5f5;
+ background-color: var(--stripe-bg);
}
ul#door-crumbs {
@@ -87,33 +101,33 @@ ul#door-crumbs :last-child {
text-align:right;
}
-a:visited { color: blue; }
+a:visited { color: var(--link-visited); }
/* dispositions */
div.dnc-warning {
font-size: 200%;
font-weight: bolder;
- color: red;
+ color: var(--danger-color);
}
a[data-disposition="done"] {
- color: green;
+ color: var(--success-color);
text-decoration: line-through;
}
a[data-disposition="attempted"] {
- color: gray;
+ color: var(--muted-color);
text-decoration: line-through;
}
a[data-disposition="do-not-contact"], a[data-disposition="refused"] {
- color: red;
+ color: var(--danger-color);
text-decoration: line-through;
}
a[data-disposition="in-progress"] {
- color: pink;
- background-color: #333;
+ color: var(--in-progress-color);
+ background-color: var(--in-progress-bg);
}
span.disposition {
@@ -122,17 +136,17 @@ span.disposition {
div.last-note {
font-size: 80%;
- color: #222;
+ color: var(--last-note-color);
margin-left: 1.5em;
}
/* header */
header {
- background-color: #eee;
+ background-color: var(--header-bg);
padding: 0.3em;
.message {
- color: red;
+ color: var(--danger-color);
font-weight: bolder;
}
}
@@ -153,14 +167,14 @@ header {
}
.last-door {
- background: yellow !important;
+ background: var(--highlight-bg) !important;
}
.credits-link, .credits-link:visited {
display: block;
padding-top: 1em;
font-size: 80%;
- color: #77d;
+ color: var(--credits-color);
text-decoration: none;
}
diff --git a/car/templates/base.html b/car/templates/base.html
index 84eacb1..0d9c17f 100644
--- a/car/templates/base.html
+++ b/car/templates/base.html
@@ -90,6 +90,11 @@
+ {% if session.dark_mode|default(False) %}
+
+ {% else %}
+
+ {% endif %}
diff --git a/car/templates/settings.html b/car/templates/settings.html
index d80735a..5629043 100644
--- a/car/templates/settings.html
+++ b/car/templates/settings.html
@@ -16,6 +16,7 @@ 🔧 Settings
{{ render_setting("use_map", "Enable turf maps") }}
{{ render_setting("autolink", "Door addresses link to Google Maps") }}
{{ render_setting("zoom_phone", "Call links use Zoom Phone") }}
+ {{ render_setting("dark_mode", "Enable dark mode") }}