Skip to content

Dark Mode #2730

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
geromequa wants to merge 18 commits into
base: main
Choose a base branch
from
Open

Dark Mode #2730

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
27bacf3
add dark background-image
geromequa May 18, 2026
48aba54
add dark background svg
geromequa May 18, 2026
2a6f37c
add color moder toggler to navbar
geromequa May 18, 2026
0c8170d
refactor {primary, secondary, danger, warning, success, info}-accent …
geromequa Jun 8, 2026
4783ce9
change icons to use bootstrap color variants
geromequa Jun 22, 2026
2c8a249
remove custom colors (except white,black + gray variants) from everwh…
geromequa Jun 22, 2026
4babe91
improve breadcrumb text color
geromequa Jun 22, 2026
d97acaf
darkmode: fix datetimepicker + tomselect components
geromequa Jul 6, 2026
e0f93f4
add darkmode background-colors
geromequa Jul 6, 2026
aca2b16
make "light" button work in darkmode
geromequa Jul 6, 2026
cd73639
darkmode: misc fixes
geromequa Jul 6, 2026
02e5ee2
darkmode: more misc fixes
geromequa Jul 6, 2026
fa6c817
load color-theme before page render
geromequa Jul 13, 2026
3f320ad
update dark theme colors
geromequa Jul 13, 2026
97ce9e1
darkmode: more misc improvements
geromequa Jul 13, 2026
397aea0
fix color-mode-toggler
geromequa Jul 13, 2026
28ddcf0
fix import
geromequa Jul 13, 2026
56bc3b2
fix color mode toggler againg
geromequa Jul 20, 2026
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
1 change: 1 addition & 0 deletions evap/evaluation/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@
<script type="text/javascript" src="{% static 'js/tom-select.complete.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/plugins/jquery.formset.js' %}"></script>
<script type="text/javascript" src="{% static 'js/Sortable.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/color-mode-toggler.js' %}"></script>

<script type="module" src="{% static 'js/csrf-utils.js' %}"></script>
<script type="module" src="{% static 'js/utils.js' %}"></script>
Expand Down
10 changes: 10 additions & 0 deletions evap/evaluation/templates/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,16 @@
</div>
</li>
{% endif %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="bd-theme" data-bs-toggle="dropdown">
<span id="span-toggle-color-mode-dropdown" class="fas fa-circle-half-stroke"></span>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-tight" aria-labelledby="bd-theme">
<button type="button" class="dropdown-item" data-bs-theme-value="light">{% translate 'Light' %}</button>
<button type="button" class="dropdown-item" data-bs-theme-value="dark">{% translate 'Dark' %}</button>
<button type="button" class="dropdown-item" data-bs-theme-value="auto">{% translate 'Auto' %}</button>
</div>
</li>
</ul>
</div>
</nav>
155 changes: 155 additions & 0 deletions evap/static/images/triangles_dark_gray.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 5 additions & 5 deletions evap/static/scss/_adjustments.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,11 +84,11 @@ body, .fixed-top, .fixed-bottom, .is-fixed, .sticky-top {

// explicitely set alert colors
$alert-colors: (
"secondary" $light-gray $medium-gray,
"success" $evap-light-green $evap-green,
"info" $evap-light-blue $evap-dark-blue,
"warning" $evap-light-yellow $evap-yellow,
"danger" $evap-light-red $evap-red,
"secondary" $secondary-accent $secondary,
"success" $success-accent $success,
"info" $info $info-accent,
"warning" $warning-accent $warning,
"danger" $danger-accent $danger,
"light" $lighter-gray $light-gray,
"dark" $dark-gray $darker-gray
);
Expand Down
6 changes: 6 additions & 0 deletions evap/static/scss/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,17 @@ $darker-gray: #495057;
$black: #000000;

$primary: $evap-dark-blue;
$primary-accent: $evap-light-blue;
$secondary: $dark-gray;
$secondary-accent: $light-gray;
$success: $evap-green;
$success-accent: $evap-light-green;
$info: $evap-light-blue;
$info-accent: $evap-dark-blue;
$warning: $evap-yellow;
$warning-accent: $evap-light-yellow;
$danger: $evap-red;
$danger-accent: $evap-light-red;
$light: $lighter-gray;
$dark: $darker-gray;

Expand Down
12 changes: 6 additions & 6 deletions evap/static/scss/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
.warning-label {
color: $evap-dark-yellow;
color: $warning;
}

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

.light-link {
Expand Down Expand Up @@ -65,10 +65,10 @@ a.no-underline:hover {
.bg-debug {
background: repeating-linear-gradient(
118deg,
tint-color($darker-gray, 12%),
tint-color($darker-gray, 12%) 3.5em,
$darker-gray 3.5em,
$darker-gray 7em
tint-color($dark, 12%),
tint-color($dark, 12%) 3.5em,
$dark 3.5em,
$dark 7em
);
}

Expand Down
2 changes: 1 addition & 1 deletion evap/static/scss/components/_button-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@ div.vote-inputs > textarea {
}

div.vote-inputs label.choice-error {
border-color: $evap-red !important;
border-color: $danger !important;
}
14 changes: 7 additions & 7 deletions evap/static/scss/components/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,14 @@ a:not([href]):not(.disabled) {
cursor: pointer;
}

@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

@richardebeling richardebeling Jul 13, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

TODO check which variants are needed

@include button-disabled-variant(".btn-secondary", $dark-gray, $light-gray);
@include button-disabled-variant(".btn-success", shade-color($evap-green, 25%), $evap-light-green);
@include button-disabled-variant(".btn-danger", $evap-red, $evap-light-red);
@include button-disabled-variant(".btn-warning", shade-color($evap-dark-yellow, 25%), $evap-light-yellow);
@include button-disabled-variant(".btn-info", shade-color($evap-light-blue, 40%), tint-color($evap-light-blue, 10%));
@include button-disabled-variant(".btn-success", shade-color($success, 25%), $success-accent);
@include button-disabled-variant(".btn-danger", $danger, $danger-accent);
@include button-disabled-variant(".btn-warning", shade-color($warning, 25%), $warning-accent);
@include button-disabled-variant(".btn-info", shade-color($info, 40%), tint-color($info-accent, 10%));
@include button-disabled-variant(".btn-light", $medium-gray, $lighter-gray);
@include button-disabled-variant(".btn-dark", $white, $dark-gray, $darker-gray);
@include button-disabled-variant(".btn-dark", $white, $dark-gray, $dark);

.btn-switch {
display: inline-flex;
Expand Down Expand Up @@ -275,7 +275,7 @@ a.collapse-toggle {
border-color: $medium-gray;

& > .fa-comment {
color: $darker-gray;
color: $dark;
}

&.has-contents > .fa-comment {
Expand Down
22 changes: 11 additions & 11 deletions evap/static/scss/components/_callouts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,29 +24,29 @@
}

.callout-warning {
background-color: $evap-light-yellow;
border-color: $evap-yellow;
color: shade-color($evap-yellow, 60%);
background-color: $warning-accent;
border-color: $warning;
color: shade-color($warning, 60%);
}

.callout-danger {
background-color: $evap-light-red;
border-color: $evap-red;
color: shade-color($evap-red, 60%);
background-color: $danger-accent;
border-color: $danger;
color: shade-color($danger, 60%);
}

.callout-info {
background-color: $evap-light-blue;
border-color: $evap-dark-blue;
color: shade-color($evap-dark-blue, 60%);
background-color: $info;
border-color: $info-accent;
color: shade-color($info-accent, 60%);

.callout-header {
color: $evap-dark-blue;
color: $info-accent;
}

&.closed:hover,
&.closed:active {
background-color: shade-color($evap-light-blue, 20%);
background-color: shade-color($info, 20%);
}
}

Expand Down
12 changes: 6 additions & 6 deletions evap/static/scss/components/_card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,26 @@
}

.card-outline-primary {
border-color: rgba($evap-dark-blue, 0.5);
border-color: rgba($primary, 0.5);

> .card-header {
background-color: $evap-light-blue;
background-color: $primary-accent;
}
}

.card-outline-warning {
border-color: $evap-yellow;
border-color: $warning;

> .card-header {
background-color: rgba($evap-yellow, 0.5);
background-color: rgba($warning, 0.5);
}
}

.card-outline-danger {
border-color: $evap-red;
border-color: $danger;

> .card-header {
background-color: rgba($evap-red, 0.5);
background-color: rgba($danger, 0.5);
}
}

Expand Down
2 changes: 1 addition & 1 deletion evap/static/scss/components/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@

&.choice-error {
font-weight: bold;
color: $evap-dark-red;
color: $danger;
}

@include media-breakpoint-up(lg) {
Expand Down
2 changes: 1 addition & 1 deletion evap/static/scss/components/_progress.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@

.progress-container-warning {
.progress {
background-color: $evap-yellow;
background-color: $warning;
}

.progress-bar {
Expand Down
10 changes: 5 additions & 5 deletions evap/static/scss/components/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
}

$table-colors: (
"primary" $evap-dark-blue $white,
"primary" $primary $white,
"secondary" $medium-gray $black,
"success" $evap-green $black,
"info" $evap-light-blue $black,
"warning" $evap-yellow $black,
"danger" $evap-red $white $black,
"success" $success $black,
"info" $info $black,
"warning" $warning $black,
"danger" $danger $white $black,
"light" $light-gray $black,
"dark" $darker-gray $white
);
Expand Down
Loading
Loading