From 4b5d731695fb0a27f0e95d653331d81844d953da Mon Sep 17 00:00:00 2001 From: Ava Silver Date: Sat, 1 Aug 2026 00:08:58 -0400 Subject: [PATCH 1/2] add dark mode --- car/app.py | 1 + car/static/dark.css | 18 +++++++++++++++ car/static/light.css | 18 +++++++++++++++ car/static/mycoolstylesheet.css | 40 ++++++++++++++++----------------- car/templates/base.html | 5 +++++ car/templates/settings.html | 1 + 6 files changed, 63 insertions(+), 20 deletions(-) create mode 100644 car/static/dark.css create mode 100644 car/static/light.css 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..bd0b7c6 --- /dev/null +++ b/car/static/dark.css @@ -0,0 +1,18 @@ +: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; +} diff --git a/car/static/light.css b/car/static/light.css new file mode 100644 index 0000000..c5b1e47 --- /dev/null +++ b/car/static/light.css @@ -0,0 +1,18 @@ +: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; +} diff --git a/car/static/mycoolstylesheet.css b/car/static/mycoolstylesheet.css index 103d78d..fb6f2c1 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,10 +15,10 @@ 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%; @@ -26,11 +28,11 @@ button { 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 +50,9 @@ ul { margin:18px 0px 8px 0px; } footer { - color:#555; + color: var(--footer-color); } - h1 a { text-decoration:none; } @@ -60,7 +61,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 +69,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 +87,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 +122,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 +153,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") }} From 67424878c8297bc6b85ba98e08a2a3c8b1fba4ec Mon Sep 17 00:00:00 2001 From: Ava Silver Date: Sat, 1 Aug 2026 00:23:28 -0400 Subject: [PATCH 2/2] update button styling --- car/static/dark.css | 7 +++++++ car/static/light.css | 7 +++++++ car/static/mycoolstylesheet.css | 16 +++++++++++++++- 3 files changed, 29 insertions(+), 1 deletion(-) diff --git a/car/static/dark.css b/car/static/dark.css index bd0b7c6..85f4a3a 100644 --- a/car/static/dark.css +++ b/car/static/dark.css @@ -15,4 +15,11 @@ --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 index c5b1e47..cd1a494 100644 --- a/car/static/light.css +++ b/car/static/light.css @@ -15,4 +15,11 @@ --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 fb6f2c1..67af7ed 100644 --- a/car/static/mycoolstylesheet.css +++ b/car/static/mycoolstylesheet.css @@ -23,7 +23,21 @@ div.form-field > input[type="text"] { 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 {