Dark Mode by geromequa · Pull Request #2730 · e-valuation/EvaP

geromequa · 2026-05-18T18:44:11Z

Closes #1039.

…color usage in all relevant components

…ere but colors.scss

richardebeling

generally looks good -- we can also merge partial progress here if we just "hide" the selector, in case you already want to get some changes / fixes in.

richardebeling · 2026-06-29T18:24:52Z

+        })
+      })
+  })
+})()


missing trailing newline

richardebeling · 2026-06-29T18:25:21Z

+/*!
+ * Adapted color mode toggler from Bootstrap's docs (https://getbootstrap.com/)
+ */
+


What's this about? This reads like copyright trouble

richardebeling · 2026-06-29T18:25:31Z

+    /*if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {*/
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    //}


commented code (repeated below)

richardebeling · 2026-06-29T18:40:47Z

+    console.log("setTheme");
+    console.log(theme);


Let's remove these, I think the document.setAttribute below should always work and not trigger too many debugging scenarios (applies to all console.logs here)

richardebeling · 2026-07-13T16:42:26Z

 }

-@include button-disabled-variant(".btn-primary", $evap-dark-blue, $evap-light-blue);
+@include button-disabled-variant(".btn-primary", $primary, $primary-accent); //TODO check which variants are needed


TODO check which variants are needed

janno42

please move the mode selection dropdown between mode selection and user dropdown
please add a tooltip "Color mode" to the mode selection dropdown
import { unwrap } from "./utils"; in color-mode-toggler.js fails with Uncaught SyntaxError: import declarations may only appear at top level of a module

janno42

on page reload, the page briefly flashes in light mode, even if it should be in dark mode
don't print getPreferredTheme in console please :)
the collapsible's header in the global rewards overview needs a different color:

highlighted rows are too bright, and the white text can't be read anymore:

the horizontal lines in modals should be less bright:

"grayed out" bars (grade distribution and voter progress) should be darker:

highlighted results rows on the student index page should be more highlighted (here the first row is highlighted in black):

on the results page, the border around the selected evaluation should be brighter:

on the results page, the outline, center bar, and arrows of bipolar distributions should be dark:

maybe the participants badge should be inverted (many voters: bright, few voters: dark). what do you think?
selected buttons in btn-switch should be lighter (the contrast change should be similar to the one in light mode):

btn-light seems to have no hover effect
callouts (all types, not only info) and alerts should be darker (when open and when closed), the link contrast should be fixed, and the close button should be darker.

the vote buttons should be darker:

the icon on the additional textanswer button should have the usual btn-light color:

'card-outline-primary' should have the primary color :)

the red border on questions with error should be brighter:

the dropdown arrow in input fields should be brighter:

because you're more or less on it already, could you make the colors of the input fields in light mode consistent?:

disabled inputs should have the same color, even if they are tomselect inputs

we need different colors for badges in dark mode
the xmark for evaluations where grades will not be uploaded should be brighter:

highlighted rows in the merge view should be darker:

the background contrast of the selected tab should be higher:

janno42

I found a few more things that I would be very happy if you could adjust as well. If you don't have time, please let me know so we can finish soon and avoid too many merge conflicts.

janno42 · 2026-08-11T11:35:16Z

The colors of badges and buttons should be the same

primary: something between the current values, maybe shade-color($primary, 40%)

secondary: like the current badge

success: like the current badge

info: maybe tint-color($info-accent, 20%)

warning: like the current badge

danger: like the current badge

light/dark: switch the colors from the light theme

janno42 · 2026-08-11T11:35:47Z

+    .callout-warning {
+        background-color: shade-color($warning, 50%);
+        border-color: $warning;
+        color: $light-gray;


Suggested change

color: $light-gray;

color: $warning-accent;

janno42 · 2026-08-11T11:36:01Z

+    .callout-danger {
+        background-color: shade-color($danger, 50%);
+        border-color: $danger;
+        color: $light-gray;


Suggested change

color: $light-gray;

color: $danger-accent;

janno42 · 2026-08-11T11:41:25Z

The hover effect on callout infoboxes should not change the text color and have a darker background than now

janno42 · 2026-08-11T11:43:43Z

@@ -21,16 +21,16 @@

 .progress-container-warning {


This should stay a shade of yellow in dark mode, currently it's blue 😅

janno42 · 2026-08-11T14:38:14Z

The header should have no hover effect

janno42 · 2026-08-11T14:42:31Z

the chevrons and the center line should be dark (with light shadow)

when hovered, chevrons and text should be light (with dark shadow)

janno42 · 2026-08-11T14:45:56Z

the badge-participants's background color should range from $primary (highest number) to shade-color($primary, 50%) (lowest number)

janno42 · 2026-08-11T14:51:09Z

-    color: $evap-dark-yellow;
+    color: $warning;
 }

 .error-label {
-    color: $evap-dark-red;
+    color: $danger;


In light mode, these should stay the dark variants

janno42 · 2026-08-11T15:04:26Z

The ordering icons should be darker if inactive and lighter if active

geromequa added 12 commits May 18, 2026 18:02

add dark background-image

27bacf3

add dark background svg

48aba54

add color moder toggler to navbar

2a6f37c

refactor {primary, secondary, danger, warning, success, info}-accent …

0c8170d

…color usage in all relevant components

change icons to use bootstrap color variants

4783ce9

remove custom colors (except white,black + gray variants) from everwh…

2c8a249

…ere but colors.scss

improve breadcrumb text color

4babe91

darkmode: fix datetimepicker + tomselect components

d97acaf

add darkmode background-colors

e0f93f4

make "light" button work in darkmode

aca2b16

darkmode: misc fixes

cd73639

darkmode: more misc fixes

02e5ee2

richardebeling reviewed Jul 13, 2026

View reviewed changes

geromequa added 5 commits July 13, 2026 19:48

load color-theme before page render

fa6c817

update dark theme colors

3f320ad

darkmode: more misc improvements

97ce9e1

fix color-mode-toggler

397aea0

fix import

28ddcf0

geromequa marked this pull request as ready for review July 13, 2026 19:16

janno42 self-requested a review July 13, 2026 19:16

janno42 requested changes Jul 20, 2026

View reviewed changes

fix color mode toggler againg

56bc3b2

janno42 requested changes Jul 20, 2026

View reviewed changes

added tooltip to color mode picker

0ae4d55

richardebeling mentioned this pull request Aug 3, 2026

Email template: Better colors in client-enforced dark mode #2771

Open

geromequa requested a review from janno42 August 10, 2026 19:39

changes as requested by janno42

8200fd5

janno42 requested changes Aug 11, 2026

View reviewed changes

+                      })
+                    })
+                })
+              })()

                
                    No newline at end of file

Uh oh!

Conversation

geromequa commented May 18, 2026

Uh oh!

richardebeling left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

janno42 left a comment

Choose a reason for hiding this comment

Uh oh!

janno42 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

janno42 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

janno42 Aug 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

janno42 left a comment •

edited

Loading

janno42 Aug 11, 2026 •

edited

Loading