Skip to content

WIP: Add support for dark mode #533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dannycolin wants to merge 1 commit into
base: main
Choose a base branch
from
Open

WIP: Add support for dark mode #533

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 136 additions & 12 deletions moderator/moderate/static/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,46 @@
margin: 0;
}

:root {
color-scheme: light dark;

--breadcrumb-background-color: light-dark(#f5f5f5, #282828);
--breadcrumb-active-color: light-dark(#777777, #999999);
--button-secondary-background-color: light-dark(#333333, #ffffff);
--button-secondary-color: light-dark(#ffffff, #1e1e1e);
--button-secondary-pressed-background-color: light-dark(#777777, #bbbbbb);
--button-secondary-pressed-color: light-dark(#ffffff, #1e1e1e);
--close-button-color: light-dark(rgba(0, 0, 0, 0.5), rgba(250, 250, 250, 0.75));
--close-button-hover-color: light-dark(rgba(0, 0, 0, 1.0), rgba(250, 250, 250, 1.0));
--close-button-text-shadow-color: light-dark(#ffffff, #1e1e1e);
--combobox-background-color: light-dark(#ffffff, #1e1e1e);
--combobox-border-color: light-dark(#aaaaaa, #444444);
--combobox-tag-background-color: light-dark(#ffffff, #282828);
--combobox-tag-border-color: light-dark(#aaaaaa, #444444);
--combobox-tag-color: light-dark(#000000, #fafafa);
--errorlist-color: light-dark(#a94442, #c27c7a);
--footer-background-color: light-dark(#333333, #282828);
--form-control-background-color: light-dark(#ffffff, #1e1e1e);
--form-control-border-color: light-dark(#cccccc, #444444);
--form-control-color: light-dark(#555555, #fafafa);
--link-color: light-dark(#337ab7, #63a0d4);
--modal-background-color: light-dark(#ffffff, #282828);
--modal-border-color: light-dark(#e5e5e5, #333333);
--modal-color: light-dark(#666666, #fafafa);
--nav-link-color: light-dark(#666666, #fafafa);
--nav-link-hover-color: light-dark(#333333, #cccccc);
--page-background: light-dark(#eeeeee, #1e1e1e);
--page-foreground: light-dark(#666666, #fafafa);
--panel-background: light-dark(#ffffff, #282828);
--panel-border-color: light-dark(#dddddd, #333333);
--question-counter-color: light-dark(#666666, #999999);
--question-text-box-shadow-color:
light-dark(rgba(200, 173, 227, 0.4), none);
--reply-row-background-color: light-dark(#f0f0f0, #333333);
--reply-row-border-color: light-dark(#286090, #63a0d4);
--reply-row-color: light-dark(#666666, #fafafa);
}

html,
body {
height: 100%;
Expand All @@ -59,8 +99,8 @@ body {
body {
padding: 0;
margin: 0;
background-color: #eee;
color: #666;
background-color: var(--page-background);
color: var(--page-foreground);
font-size: 16px;
line-height: 1.4;
font-family: "Open Sans", sans-serif;
Expand All @@ -80,6 +120,7 @@ h3 {
}

a {
color: var(--link-color);
text-decoration: underline;
}

Expand All @@ -99,6 +140,12 @@ a {
margin: 15px;
}

@media (prefers-color-scheme: dark) {
.main-logo {
filter: invert(100%);
}
}

#logout {
padding: 15px;
}
Expand All @@ -111,7 +158,12 @@ a {

.navbar-default .navbar-nav>li>a,
.navbar-default .btn-link {
color: #666;
color: var(--nav-link-color);
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .btn-link:hover {
color: var(--nav-link-hover-color);
}

#navbar {
Expand All @@ -127,14 +179,80 @@ a {
ul.errorlist {
list-style: none;
list-style-position: outside;
color: #a94442;
color: var(--errorlist-color);
padding: 5px 0 0 0;
}

.breadcrumb {
background-color: var(--breadcrumb-background-color);
}

.breadcrumb > .active {
color: var(--breadcrumb-active-color);
}

.form-group > input,
.form-group > textarea,
.form-control {
color: var(--form-control-color);
background-color: var(--form-control-background-color);
border: 1px solid var(--form-control-border-color);
}

.close {
color: var(--close-button-color);
text-shadow: 0 1px 0 var(--close-button-text-shadow-color);
opacity: 1;
}

.close:hover {
color: var(--close-button-hover-color);
opacity: 1;
}

/* Combobox
*
* We use !important because select2.css is loaded at the bottom of create_event
* template.
*
* TODO: Move select2.css to the head block of create_event and make sure its
* styling aren't overriden by bootstrap or main.css.
==================== */
.select2-container--default .select2-selection {
background-color: var(--combobox-background-color) !important;
border-color: var(--combobox-border-color) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: var(--combobox-tag-background-color) !important;
border-color: var(--combobox-tag-border-color) !important;
color: var(--combobox-tag-color) !important;
}

/* Modals
==================== */
.modal-content {
background-color: var(--modal-background-color);
color: var(--modal-color);
}

.modal-header {
border-bottom: 1px solid var(--modal-border-color);
}
.modal-footer {
border-top: 1px solid var(--modal-border-color);
}

/* Events
==================== */

.panel {
background-color: var(--panel-background);
color: var(--page-foreground);
}

.panel-default {
border-color: var(--panel-border-color);
margin-bottom: 30px;
position: relative;
}
Expand All @@ -157,7 +275,7 @@ ul.errorlist {

.questions-counter {
float: right;
color: #666;
color: var(--question-counter-color);
margin-top: -35px;
text-align: right;
}
Expand Down Expand Up @@ -215,7 +333,7 @@ ul.errorlist {
.question-text :is(input, textarea) {
margin-top: 10px;
width: 100%;
box-shadow: 0 0 0 2px rgba(200, 173, 227, 0.4);
box-shadow: 0 0 0 2px var(--question-text-box-shadow-color);
}

.checkbox-anonymous {
Expand Down Expand Up @@ -314,16 +432,22 @@ ul.errorlist {
margin-top: 3px;
}

.vote-container .btn-light {
background-color: var(--button-secondary-background-color);
color: var(--button-secondary-color);
}

.vote-container .btn-dark {
background-color: #333;
color: white;
background-color: var(--button-secondary-pressed-background-color);
color: var(--button-secondary-pressed-color);
}

.reply-row {
background-color: #f0f0f0;
background-color: var(--reply-row-background-color);
color: var(--reply-row-color);
padding: 1em;
margin-top: 0.5em;
border-left: 5px solid #286090;
border-left: 5px solid var(--reply-row-border-color);
font-style: italic;
overflow-wrap: break-word;
word-wrap: break-word;
Expand Down Expand Up @@ -462,7 +586,7 @@ ul.errorlist {
.site-footer {
height: 190px;
color: #a6a7a9;
background-color: #333;
background-color: var(--footer-background-color);
padding: 40px 0;
font-size: 0.9em;
line-height: 1.3;
Expand Down Expand Up @@ -570,4 +694,4 @@ ul.errorlist {
text-align: center;
width: 100%;
}
}
}
33 changes: 33 additions & 0 deletions moderator/moderate/static/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,3 +44,36 @@ jQuery(function ($) {
$('#logout_form').submit();
});
});

/**
* Toggle Theme
*/
function setDefaultTheme() {
const theme = localStorage.getItem('theme');
if (!theme) {
const prefersLightTheme = window.matchMedia('(prefers-color-scheme: light)');
if (prefersLightTheme.matches) {
localStorage.setItem("theme", "light");
Comment on lines +51 to +56
Copy link
Contributor

@janbrasna janbrasna May 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oooh, that's a nice angle with just light-dark() having that natively, and setting document.colorScheme for user customization 💟 🚀 — love that approach!

I'd have one wish here though: Please don't store the preference upon first visit, basically unless the user changes the preference from their defaults. The prefers-color-scheme can change over time (my OS sets it light during daylight and dark at sunset, along with any color shift etc.) — this would effectively lock it at a theme based on the moment I've first visited the site.

That's why most of the UIs use a three-way light/dark/auto, to be able to "unset" whatever preference was made back to media preference defaults… To avoid having a third state, I'd imagine just unsetting the cookie every time the theme matches the preferred theme when switching, being a default at that moment, could also mimic an implicit "auto"/reset?

Copy link
Contributor

@janbrasna janbrasna May 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm curious here regarding https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme#declaring_color_scheme_preferences quoting:

"Along with the above CSS, also include the <meta name="color-scheme"> HTML <meta> tag in the <head>, before any CSS style information, to inform user agents about the preferred color scheme, helping prevent unwanted screen flashes during the page load."

Is that relevant to this use per se, or any flashing-after-parsing-the-stored-prefs is avoided elsewhere?

Copy link
Author

@dannycolin dannycolin May 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't store the preference upon first visit, basically unless the user changes the preference from their defaults. The prefers-color-scheme can change over time (my OS sets it light during daylight and dark at sunset [...] That's why most of the UIs use a three-way light/dark/auto

Oh good point! I will update the implementation to support it.

Is that relevant to this use per se, or any flashing-after-parsing-the-stored-prefs is avoided elsewhere?

I was also wondering if it can happen with the current use case. Maybe we should use a meta tag to be on the safe side. It's only a matter of targeting the tag property instead of document.documentElement so it's an easy modification to make :).

return;
}
localStorage.setItem("theme", "dark");
}
}

function toggleTheme() {
const toggle = document.getElementById("toggle-theme");
toggle.addEventListener("click", () => {
const theme = localStorage.getItem("theme");

if (theme == "dark") {
document.documentElement.style.colorScheme = "light";
localStorage.setItem("theme", "light");
} else {
document.documentElement.style.colorScheme = "dark";
localStorage.setItem("theme", "dark");
}
});
}

setDefaultTheme();
toggleTheme();
5 changes: 4 additions & 1 deletion moderator/moderate/templates/base.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@
<li>
<button id="logout" class="btn btn-link" type="button">Log out</button>
</li>
<li>
<button id="toggle-theme" class="btn btn-link" type="button">Toggle Theme</button>
</li>
</ul>
<form id="logout_form" class="hidden" action="{{ url('oidc_logout') }}" method="post">
{% csrf_token %}
Expand Down Expand Up @@ -136,4 +139,4 @@
{% block js %}{% endblock %}
</body>

</html>
</html>