From 27bacf3b646d3769853f196c3af9b712c454bfb2 Mon Sep 17 00:00:00 2001 From: Gerome Quantmeyer Date: Mon, 18 May 2026 18:02:26 +0200 Subject: [PATCH 01/18] add dark background-image --- evap/static/scss/evap.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/evap/static/scss/evap.scss b/evap/static/scss/evap.scss index 8fb2b66495..93868cde8a 100644 --- a/evap/static/scss/evap.scss +++ b/evap/static/scss/evap.scss @@ -7,6 +7,7 @@ @import "adjustments"; @import "utilities"; +$color-mode-type: data; html { position: relative; min-height: 100%; @@ -24,6 +25,12 @@ body { } } +@include color-mode(dark) { + body { + background-image: url("../images/triangles_dark_gray.svg"); + } +} + .hide { opacity: 0; cursor: inherit; From 48aba54ee1dd68e0ce29f2839bde5b51856492a8 Mon Sep 17 00:00:00 2001 From: Gerome Quantmeyer Date: Mon, 18 May 2026 18:03:41 +0200 Subject: [PATCH 02/18] add dark background svg --- evap/static/images/triangles_dark_gray.svg | 155 +++++++++++++++++++++ 1 file changed, 155 insertions(+) create mode 100644 evap/static/images/triangles_dark_gray.svg diff --git a/evap/static/images/triangles_dark_gray.svg b/evap/static/images/triangles_dark_gray.svg new file mode 100644 index 0000000000..8cbf2cbba4 --- /dev/null +++ b/evap/static/images/triangles_dark_gray.svg @@ -0,0 +1,155 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 2a6f37c7c881dd509bf9084e3213a17f05119fed Mon Sep 17 00:00:00 2001 From: Gerome Quantmeyer Date: Mon, 18 May 2026 20:12:19 +0200 Subject: [PATCH 03/18] add color moder toggler to navbar --- evap/evaluation/templates/base.html | 1 + evap/evaluation/templates/navbar.html | 10 ++++ evap/static/ts/src/color-mode-toggler.ts | 62 ++++++++++++++++++++++++ 3 files changed, 73 insertions(+) create mode 100644 evap/static/ts/src/color-mode-toggler.ts diff --git a/evap/evaluation/templates/base.html b/evap/evaluation/templates/base.html index c1e3309182..13099ecd18 100644 --- a/evap/evaluation/templates/base.html +++ b/evap/evaluation/templates/base.html @@ -72,6 +72,7 @@ + diff --git a/evap/evaluation/templates/navbar.html b/evap/evaluation/templates/navbar.html index 58589f4053..43a7855d95 100644 --- a/evap/evaluation/templates/navbar.html +++ b/evap/evaluation/templates/navbar.html @@ -130,6 +130,16 @@ {% endif %} +
  • + + + +
    + + + +
    +
    • diff --git a/evap/static/ts/src/color-mode-toggler.ts b/evap/static/ts/src/color-mode-toggler.ts new file mode 100644 index 0000000000..def859ed2b --- /dev/null +++ b/evap/static/ts/src/color-mode-toggler.ts @@ -0,0 +1,62 @@ +/*! + * Adapted color mode toggler from Bootstrap's docs (https://getbootstrap.com/) + */ + +(() => { + 'use strict' + + const storedTheme = localStorage.getItem('theme') + + const getPreferredTheme = () => { + console.log("getPreferredTheme"); + if (storedTheme) { + return storedTheme + } + + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' + } + + const setTheme = function (theme) { + console.log("setTheme"); + console.log(theme); + /*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) + //} + } + + setTheme(getPreferredTheme()) + + const showActiveTheme = theme => { + console.log("showActiveTheme"); + console.log(theme); + const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`) + + document.querySelectorAll('[data-bs-theme-value]').forEach(element => { + element.classList.remove('active') + }) + + btnToActive.classList.add('active') + } + +/* window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { + if (storedTheme !== 'light' || storedTheme !== 'dark') { + setTheme(getPreferredTheme()) + } + })*/ + + window.addEventListener('DOMContentLoaded', () => { + showActiveTheme(getPreferredTheme()) + + document.querySelectorAll('[data-bs-theme-value]') + .forEach(toggle => { + toggle.addEventListener('click', () => { + const theme = toggle.getAttribute('data-bs-theme-value') + localStorage.setItem('theme', theme) + setTheme(theme) + showActiveTheme(theme) + }) + }) + }) +})() \ No newline at end of file From 0c8170da6b0731c404d0ffde62eb6a48a7a5a613 Mon Sep 17 00:00:00 2001 From: Gerome Quantmeyer Date: Mon, 8 Jun 2026 22:18:46 +0200 Subject: [PATCH 04/18] refactor {primary, secondary, danger, warning, success, info}-accent color usage in all relevant components --- evap/static/scss/_adjustments.scss | 10 ++++----- evap/static/scss/_colors.scss | 6 +++++ evap/static/scss/_utilities.scss | 12 +++++----- .../static/scss/components/_button-group.scss | 2 +- evap/static/scss/components/_buttons.scss | 14 ++++++------ evap/static/scss/components/_callouts.scss | 22 +++++++++---------- evap/static/scss/components/_card.scss | 12 +++++----- evap/static/scss/components/_grid.scss | 2 +- evap/static/scss/components/_progress.scss | 2 +- evap/static/scss/components/_tables.scss | 10 ++++----- 10 files changed, 49 insertions(+), 43 deletions(-) diff --git a/evap/static/scss/_adjustments.scss b/evap/static/scss/_adjustments.scss index e468fd6053..0cc06496b2 100644 --- a/evap/static/scss/_adjustments.scss +++ b/evap/static/scss/_adjustments.scss @@ -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 ); diff --git a/evap/static/scss/_colors.scss b/evap/static/scss/_colors.scss index cbe50af2d7..967b25cef5 100644 --- a/evap/static/scss/_colors.scss +++ b/evap/static/scss/_colors.scss @@ -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; diff --git a/evap/static/scss/_utilities.scss b/evap/static/scss/_utilities.scss index c315b2fcc2..d3d53dbc16 100644 --- a/evap/static/scss/_utilities.scss +++ b/evap/static/scss/_utilities.scss @@ -1,9 +1,9 @@ .warning-label { - color: $evap-dark-yellow; + color: $warning; } .error-label { - color: $evap-dark-red; + color: $danger; } .light-link { @@ -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 ); } diff --git a/evap/static/scss/components/_button-group.scss b/evap/static/scss/components/_button-group.scss index 1f5b1a7025..d561b4472c 100644 --- a/evap/static/scss/components/_button-group.scss +++ b/evap/static/scss/components/_button-group.scss @@ -15,5 +15,5 @@ div.vote-inputs > textarea { } div.vote-inputs label.choice-error { - border-color: $evap-red !important; + border-color: $danger !important; } diff --git a/evap/static/scss/components/_buttons.scss b/evap/static/scss/components/_buttons.scss index 7016d8e245..01b59954a1 100644 --- a/evap/static/scss/components/_buttons.scss +++ b/evap/static/scss/components/_buttons.scss @@ -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 @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; @@ -275,7 +275,7 @@ a.collapse-toggle { border-color: $medium-gray; & > .fa-comment { - color: $darker-gray; + color: $dark; } &.has-contents > .fa-comment { diff --git a/evap/static/scss/components/_callouts.scss b/evap/static/scss/components/_callouts.scss index 9a39bbfdd0..72be4da55c 100644 --- a/evap/static/scss/components/_callouts.scss +++ b/evap/static/scss/components/_callouts.scss @@ -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%); } } diff --git a/evap/static/scss/components/_card.scss b/evap/static/scss/components/_card.scss index aa271ff435..4b13015a0d 100644 --- a/evap/static/scss/components/_card.scss +++ b/evap/static/scss/components/_card.scss @@ -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); } } diff --git a/evap/static/scss/components/_grid.scss b/evap/static/scss/components/_grid.scss index 8f07f35d9e..722b1eb8bd 100644 --- a/evap/static/scss/components/_grid.scss +++ b/evap/static/scss/components/_grid.scss @@ -38,7 +38,7 @@ &.choice-error { font-weight: bold; - color: $evap-dark-red; + color: $danger; } @include media-breakpoint-up(lg) { diff --git a/evap/static/scss/components/_progress.scss b/evap/static/scss/components/_progress.scss index 5f098ad1ef..325d13e645 100644 --- a/evap/static/scss/components/_progress.scss +++ b/evap/static/scss/components/_progress.scss @@ -21,7 +21,7 @@ .progress-container-warning { .progress { - background-color: $evap-yellow; + background-color: $warning; } .progress-bar { diff --git a/evap/static/scss/components/_tables.scss b/evap/static/scss/components/_tables.scss index 7dbd4f8644..1c15fe36e7 100644 --- a/evap/static/scss/components/_tables.scss +++ b/evap/static/scss/components/_tables.scss @@ -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 ); From 4783ce9ca0bb064f1cadaf7f2952a5a00b40eee2 Mon Sep 17 00:00:00 2001 From: Gerome Quantmeyer Date: Mon, 22 Jun 2026 21:38:22 +0200 Subject: [PATCH 05/18] change icons to use bootstrap color variants --- .../templatetags/evaluation_filters.py | 6 +++--- .../results_index_evaluation_impl.html | 6 +++--- .../staff_evaluation_textanswers.html | 2 +- evap/staff/templates/staff_semester_view.html | 20 +++++++++---------- .../staff_semester_view_evaluation.html | 14 ++++++------- evap/static/scss/_utilities.scss | 12 +++++------ 6 files changed, 30 insertions(+), 30 deletions(-) diff --git a/evap/evaluation/templatetags/evaluation_filters.py b/evap/evaluation/templatetags/evaluation_filters.py index a48563982a..2ef84a5965 100644 --- a/evap/evaluation/templatetags/evaluation_filters.py +++ b/evap/evaluation/templatetags/evaluation_filters.py @@ -48,7 +48,7 @@ APPROVAL_STATES = { Evaluation.State.NEW: StateValues( 0, - "fas fa-circle icon-blue", + "fas fa-circle icon-primary", Evaluation.State.NEW, _("In preparation"), ), @@ -60,12 +60,12 @@ ), Evaluation.State.EDITOR_APPROVED: StateValues( 1, - "far fa-square-check icon-blue", + "far fa-square-check icon-primary", Evaluation.State.EDITOR_APPROVED, _("Approved by editor, awaiting manager review"), ), Evaluation.State.APPROVED: StateValues( - 3, "far fa-square-check icon-green", Evaluation.State.APPROVED, _("Approved by manager") + 3, "far fa-square-check icon-success", Evaluation.State.APPROVED, _("Approved by manager") ), } diff --git a/evap/results/templates/results_index_evaluation_impl.html b/evap/results/templates/results_index_evaluation_impl.html index 34803f662c..2832a30e5d 100644 --- a/evap/results/templates/results_index_evaluation_impl.html +++ b/evap/results/templates/results_index_evaluation_impl.html @@ -29,12 +29,12 @@ {% if evaluation.state == evaluation.State.IN_EVALUATION %} {% elif evaluation.state == evaluation.State.EVALUATED %} - + {% elif evaluation.state == evaluation.State.REVIEWED %} {% if evaluation.grading_process_is_finished %} - + {% else %} - + {% endif %} {% endif %} diff --git a/evap/staff/templates/staff_evaluation_textanswers.html b/evap/staff/templates/staff_evaluation_textanswers.html index 1df6cf722c..a099cd82ad 100644 --- a/evap/staff/templates/staff_evaluation_textanswers.html +++ b/evap/staff/templates/staff_evaluation_textanswers.html @@ -54,7 +54,7 @@

    {{ evaluation.full_name }} ({{ evaluation.course.semester.name {% if evaluation.state == evaluation.State.IN_EVALUATION %} {% translate 'Still in evaluation' %} {% else %} - {% translate 'Evaluation finished' %} + {% translate 'Evaluation finished' %} {% endif %} {% include 'evaluation_badges.html' with mode='manager' %} diff --git a/evap/staff/templates/staff_semester_view.html b/evap/staff/templates/staff_semester_view.html index c3787d2217..f3ece4b36c 100644 --- a/evap/staff/templates/staff_semester_view.html +++ b/evap/staff/templates/staff_semester_view.html @@ -321,7 +321,7 @@

    {{ semester.name }}

    @@ -333,17 +333,17 @@

    {{ semester.name }}

    @@ -355,17 +355,17 @@

    {{ semester.name }}

    @@ -458,13 +458,13 @@

    {{ semester.name }}

    diff --git a/evap/staff/templates/staff_semester_view_evaluation.html b/evap/staff/templates/staff_semester_view_evaluation.html index f6dfc312a8..580f3bc41d 100644 --- a/evap/staff/templates/staff_semester_view_evaluation.html +++ b/evap/staff/templates/staff_semester_view_evaluation.html @@ -33,7 +33,7 @@ {% elif state >= evaluation.State.EVALUATED %} - + {% endif %} @@ -43,15 +43,15 @@ {% elif evaluation.textanswer_review_state == evaluation.TextAnswerReviewState.REVIEW_URGENT %} - + {% elif evaluation.textanswer_review_state == evaluation.TextAnswerReviewState.REVIEW_NEEDED %} - + {% else %} - + {% endif %} @@ -62,16 +62,16 @@ {% elif state == evaluation.State.REVIEWED %} {% if evaluation.grading_process_is_finished %} - + {% else %} - + {% endif %} {% elif state == evaluation.State.PUBLISHED %} - + {% endif %} diff --git a/evap/static/scss/_utilities.scss b/evap/static/scss/_utilities.scss index d3d53dbc16..5fd06a4683 100644 --- a/evap/static/scss/_utilities.scss +++ b/evap/static/scss/_utilities.scss @@ -19,16 +19,16 @@ color: $medium-gray !important; } -.icon-red { - color: $evap-red !important; +.icon-danger { + color: $danger !important; } -.icon-blue { - color: $evap-dark-blue !important; +.icon-primary { + color: $primary !important; } -.icon-green { - color: $evap-green !important; +.icon-success { + color: $success !important; } a.no-underline:hover { From 2c8a249cbcd6461f4760a0a751eba8ba166cfe18 Mon Sep 17 00:00:00 2001 From: Gerome Quantmeyer Date: Mon, 22 Jun 2026 21:45:23 +0200 Subject: [PATCH 06/18] remove custom colors (except white,black + gray variants) from everwhere but colors.scss --- evap/static/scss/_adjustments.scss | 6 +++--- evap/static/scss/_colors.scss | 6 ------ evap/static/scss/_variables.scss | 4 ++-- evap/static/scss/components/_badge.scss | 12 ++++++------ evap/static/scss/components/_buttons.scss | 6 +++--- evap/static/scss/components/_card.scss | 2 +- evap/static/scss/components/_forms.scss | 6 +++--- evap/static/scss/components/_progress.scss | 8 ++++---- evap/static/scss/components/_tables.scss | 8 ++++---- 9 files changed, 26 insertions(+), 32 deletions(-) diff --git a/evap/static/scss/_adjustments.scss b/evap/static/scss/_adjustments.scss index 0cc06496b2..ab9dc89911 100644 --- a/evap/static/scss/_adjustments.scss +++ b/evap/static/scss/_adjustments.scss @@ -100,9 +100,9 @@ $alert-colors: ( } } .alert-primary { - background-color: tint-color($evap-dark-blue, 50%); - border-color: $evap-dark-blue; - color: shade-color($evap-dark-blue, 50%); + background-color: tint-color($primary, 50%); + border-color: $primary; + color: shade-color($primary, 50%); } // fix checkbox positions diff --git a/evap/static/scss/_colors.scss b/evap/static/scss/_colors.scss index 967b25cef5..9228f1e5bf 100644 --- a/evap/static/scss/_colors.scss +++ b/evap/static/scss/_colors.scss @@ -4,12 +4,6 @@ $evap-yellow: #efe258; $evap-orange: #f29e58; $evap-red: #eb595a; -$evap-dark-green: shade-color($evap-green, 20%); -$evap-dark-lime: shade-color($evap-lime, 20%); -$evap-dark-yellow: shade-color($evap-yellow, 20%); -$evap-dark-orange: shade-color($evap-orange, 20%); -$evap-dark-red: shade-color($evap-red, 20%); - $evap-light-green: tint-color($evap-green, 60%); $evap-light-lime: tint-color($evap-lime, 60%); $evap-light-yellow: tint-color($evap-yellow, 60%); diff --git a/evap/static/scss/_variables.scss b/evap/static/scss/_variables.scss index af318070de..7c557f6969 100644 --- a/evap/static/scss/_variables.scss +++ b/evap/static/scss/_variables.scss @@ -45,8 +45,8 @@ $table-group-separator-color: $medium-gray; $card-cap-bg: $table-striped-bg; $accordion-border-width: 0; -$accordion-button-active-bg: $evap-light-blue; -$accordion-button-active-color: $evap-dark-blue; +$accordion-button-active-bg: $primary-accent; +$accordion-button-active-color: $primary; $accordion-icon-transform: rotate(90deg); $accordion-button-icon: url("data:image/svg+xml,"); $accordion-button-active-icon: url("data:image/svg+xml,"); diff --git a/evap/static/scss/components/_badge.scss b/evap/static/scss/components/_badge.scss index cd07192060..8f66e65f05 100644 --- a/evap/static/scss/components/_badge.scss +++ b/evap/static/scss/components/_badge.scss @@ -36,19 +36,19 @@ .badge-participants { @extend %badge; - background-color: $evap-dark-blue; + background-color: $primary; color: white; .fa-user { font-size: 80%; } - @include bar-shadow($evap-dark-blue); + @include bar-shadow($primary); } .badge-percentage { @extend %badge; - background-color: $evap-light-blue; + background-color: $primary-accent; color: black; display: inline-block; width: 100%; @@ -56,7 +56,7 @@ @for $i from 0 through 10 { .badge-participants-#{$i} { - background-color: mix($evap-dark-blue, $evap-light-blue, $i * 10%); + background-color: mix($primary, $primary-accent, $i * 10%); } } @@ -68,8 +68,8 @@ .bg-primary-outline { background-color: $white; - color: $evap-dark-blue; - border: 1px solid $evap-dark-blue; + color: $primary; + border: 1px solid $primary; padding: 0.27em 0.35em; } diff --git a/evap/static/scss/components/_buttons.scss b/evap/static/scss/components/_buttons.scss index 01b59954a1..1f68cae02c 100644 --- a/evap/static/scss/components/_buttons.scss +++ b/evap/static/scss/components/_buttons.scss @@ -49,7 +49,7 @@ a:not([href]):not(.disabled) { @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-info", shade-color($info, 40%), tint-color($info, 10%)); @include button-disabled-variant(".btn-light", $medium-gray, $lighter-gray); @include button-disabled-variant(".btn-dark", $white, $dark-gray, $dark); @@ -197,7 +197,7 @@ a:not([href]):not(.disabled) { } .btn-check:focus-visible + & { - box-shadow: 0 0 0 $input-btn-focus-width rgba($evap-dark-blue, 0.25); + box-shadow: 0 0 0 $input-btn-focus-width rgba($primary, 0.25); } .vote-type-bipolar &:not(:last-child) { @@ -211,7 +211,7 @@ button, a.collapse-toggle { &.tab-selectable:focus-visible { outline: none; - box-shadow: 0 0 0 $input-btn-focus-width rgba($evap-dark-blue, 0.25); + box-shadow: 0 0 0 $input-btn-focus-width rgba($primary, 0.25); } } diff --git a/evap/static/scss/components/_card.scss b/evap/static/scss/components/_card.scss index 4b13015a0d..7e59c20b51 100644 --- a/evap/static/scss/components/_card.scss +++ b/evap/static/scss/components/_card.scss @@ -58,7 +58,7 @@ .card-submit-area { background-color: $lighter-gray; - border-color: rgba($evap-dark-blue, 0.5); + border-color: rgba($primary, 0.5); min-height: 65px; } diff --git a/evap/static/scss/components/_forms.scss b/evap/static/scss/components/_forms.scss index f57daca200..54e35e745f 100644 --- a/evap/static/scss/components/_forms.scss +++ b/evap/static/scss/components/_forms.scss @@ -2,11 +2,11 @@ .is-invalid { .form-control, .ts-control { - border-color: $evap-dark-red; + border-color: shade-color($danger, 20%); } .form-control:focus, .ts-control:focus { - box-shadow: 0 0 0 0.2rem rgba($evap-dark-red, 0.25); + box-shadow: 0 0 0 0.2rem rgba(shade-color($danger, 20%), 0.25); } } @@ -55,7 +55,7 @@ select[multiple] { } &.is-invalid { - color: $evap-dark-red; + color: shade-color($danger, 20%); } } .form-static-text { diff --git a/evap/static/scss/components/_progress.scss b/evap/static/scss/components/_progress.scss index 325d13e645..06211d848d 100644 --- a/evap/static/scss/components/_progress.scss +++ b/evap/static/scss/components/_progress.scss @@ -4,7 +4,7 @@ flex: 1; position: relative; font-size: unset; - background-color: $evap-light-blue; + background-color: $info; } .progress-container .progress-empty { @@ -25,12 +25,12 @@ } .progress-bar { - background-color: $evap-dark-yellow; + background-color: shade-color($warning, 20%); } .progress-bartext { color: $black; - @include bar-shadow($evap-dark-yellow); + @include bar-shadow(shade-color($warning, 20%)); } } @@ -41,7 +41,7 @@ color: $white; width: 100%; text-align: center; - @include bar-shadow($evap-dark-blue); + @include bar-shadow($primary); } .progress-badge-wrapper { diff --git a/evap/static/scss/components/_tables.scss b/evap/static/scss/components/_tables.scss index 1c15fe36e7..5554e5a7d1 100644 --- a/evap/static/scss/components/_tables.scss +++ b/evap/static/scss/components/_tables.scss @@ -56,10 +56,10 @@ $table-colors: ( } &.hover-row-info { - background-color: $evap-light-blue; + background-color: $primary-accent; .btn-primary { - box-shadow: 0 0 0 3px rgba($evap-dark-blue, .5); + box-shadow: 0 0 0 3px rgba($primary, .5); } } @@ -72,7 +72,7 @@ $table-colors: ( } .preview-row .evaluation-name { - color: $evap-dark-yellow; + color: shade-color($warning, 20%); } .results-row { @@ -114,7 +114,7 @@ tr.evaluation-row:not(.heading-row) { .current-row-follows + .results-grid-row { border-radius: 0.2rem; - box-shadow: inset 0 0 6px $evap-dark-blue; + box-shadow: inset 0 0 6px $primary; } .heading-row { From 4babe91a45d26b8dd67593c8f5d0e17d8cb886c6 Mon Sep 17 00:00:00 2001 From: Gerome Quantmeyer Date: Mon, 22 Jun 2026 21:47:47 +0200 Subject: [PATCH 07/18] improve breadcrumb text color --- evap/static/scss/components/_breadcrumb.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/evap/static/scss/components/_breadcrumb.scss b/evap/static/scss/components/_breadcrumb.scss index f33e3262b5..03f1281e35 100644 --- a/evap/static/scss/components/_breadcrumb.scss +++ b/evap/static/scss/components/_breadcrumb.scss @@ -3,11 +3,11 @@ width: -moz-fit-content; width: fit-content; font-size: small; - color: $medium-gray; + color: $light; border-radius: 0; a { - color: $light-gray; + color: $light; &:hover, &:focus { From d97acaf3c92d044535993c47b191a8ef40accc05 Mon Sep 17 00:00:00 2001 From: Gerome Quantmeyer Date: Mon, 6 Jul 2026 22:32:29 +0200 Subject: [PATCH 08/18] darkmode: fix datetimepicker + tomselect components --- evap/static/scss/evap.scss | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/evap/static/scss/evap.scss b/evap/static/scss/evap.scss index 93868cde8a..f096bb824c 100644 --- a/evap/static/scss/evap.scss +++ b/evap/static/scss/evap.scss @@ -166,3 +166,26 @@ td.icon { @media print { @import "print"; } + +@include color-mode(dark) { + .ts-control, .ts-dropdown, .ts-wrapper.single.input-active .ts-control { + background-color: $background-dark; + color: $light-gray; + border-color: $darker-gray; + + .option:hover { + background-color: $light-gray; + color: $black; + } + input { + color: $light-gray; + } + } + + .bootstrap-datetimepicker-widget { + td.day:hover, td.dow:hover, td span:hover, th:hover { + color: $black !important; + background-color: $light-gray !important; + } + } +} From e0f93f4847cdce85e1e5a65ea3bd5d11120c6ce1 Mon Sep 17 00:00:00 2001 From: Gerome Quantmeyer Date: Mon, 6 Jul 2026 22:33:17 +0200 Subject: [PATCH 09/18] add darkmode background-colors --- evap/static/scss/_colors.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/evap/static/scss/_colors.scss b/evap/static/scss/_colors.scss index 9228f1e5bf..5614a44bae 100644 --- a/evap/static/scss/_colors.scss +++ b/evap/static/scss/_colors.scss @@ -21,6 +21,9 @@ $dark-gray: #868e96; $darker-gray: #495057; $black: #000000; +$background-dark: #101113; +$background-accent-dark: tint-color($background-dark, 5%); + $primary: $evap-dark-blue; $primary-accent: $evap-light-blue; $secondary: $dark-gray; From aca2b1610575e05b1f8ee4ce04def4fd0d730b56 Mon Sep 17 00:00:00 2001 From: Gerome Quantmeyer Date: Mon, 6 Jul 2026 22:34:37 +0200 Subject: [PATCH 10/18] make "light" button work in darkmode --- evap/static/scss/components/_buttons.scss | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/evap/static/scss/components/_buttons.scss b/evap/static/scss/components/_buttons.scss index 1f68cae02c..a24176d8ec 100644 --- a/evap/static/scss/components/_buttons.scss +++ b/evap/static/scss/components/_buttons.scss @@ -36,6 +36,14 @@ input:checked + label.btn-light.for-above { } } +@include color-mode(dark) { + .btn-light { + background-color: $body-bg-dark; + border: $darker-gray 1px solid; + color: $light-gray; + } +} + button:not(:disabled) { cursor: pointer; } @@ -55,7 +63,7 @@ a:not([href]):not(.disabled) { .btn-switch { display: inline-flex; - background-color: tint-color($light-gray, 4%); + background-color: $light-gray; border-radius: 0.2rem; .btn-toolbar { @@ -63,7 +71,7 @@ a:not([href]):not(.disabled) { } .btn-group { - background: tint-color($light-gray, 4%); + background: $light-gray; &::before { width: 0.5rem; @@ -71,6 +79,17 @@ a:not([href]):not(.disabled) { } } } +@include color-mode(dark) { + .btn-switch { + background-color: $background-accent-dark; + .btn-group { + background: $background-accent-dark; + } + } + .btn-switch-label { + color: $light-gray; + } +} .btn-switch-light { background-color: $lighter-gray; From cd736399d6cea5b560eab2190da6e766f5c7b8fb Mon Sep 17 00:00:00 2001 From: Gerome Quantmeyer Date: Mon, 6 Jul 2026 22:39:22 +0200 Subject: [PATCH 11/18] darkmode: misc fixes --- evap/static/scss/_adjustments.scss | 10 ++++++++++ evap/static/scss/_variables.scss | 8 +++++--- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/evap/static/scss/_adjustments.scss b/evap/static/scss/_adjustments.scss index ab9dc89911..8e83fa8f88 100644 --- a/evap/static/scss/_adjustments.scss +++ b/evap/static/scss/_adjustments.scss @@ -181,3 +181,13 @@ input[type="search"]::-webkit-search-cancel-button { background-color: $light-gray; } } + +.distribution-bar-container { + background-color: transparent; +} + +@include color-mode(dark) { + #evaluation-table { + border-color: $darker-gray; + } +} \ No newline at end of file diff --git a/evap/static/scss/_variables.scss b/evap/static/scss/_variables.scss index 7c557f6969..43446d45b0 100644 --- a/evap/static/scss/_variables.scss +++ b/evap/static/scss/_variables.scss @@ -33,16 +33,17 @@ $border-radius-lg: .3rem !default; $border-radius-xl: .75rem !default; $border-radius-2xl: 1.5rem !default; +$body-bg-dark: $background-dark; $border-color: $medium-gray; $headings-margin-bottom: 1rem; $table-accent-bg: transparent; -$table-striped-bg: tint-color($light-gray, 50%); -$table-border-color: $light-gray; +//$table-striped-bg: tint-color($light-gray, 50%); +$table-border-color: $medium-gray; $table-group-separator-color: $medium-gray; -$card-cap-bg: $table-striped-bg; +//$card-cap-bg: $table-striped-bg; $accordion-border-width: 0; $accordion-button-active-bg: $primary-accent; @@ -58,6 +59,7 @@ $order-button-down-icon: url("data:image/svg+xml, {% endif %} {% endblock %} + @@ -72,7 +73,6 @@ - From 3f320adc28e9e56c8bb8d947cd79bf23cd239eab Mon Sep 17 00:00:00 2001 From: Gerome Quantmeyer Date: Mon, 13 Jul 2026 19:49:00 +0200 Subject: [PATCH 14/18] update dark theme colors --- evap/static/scss/_colors.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/evap/static/scss/_colors.scss b/evap/static/scss/_colors.scss index 5614a44bae..9bdb89f0b0 100644 --- a/evap/static/scss/_colors.scss +++ b/evap/static/scss/_colors.scss @@ -21,8 +21,8 @@ $dark-gray: #868e96; $darker-gray: #495057; $black: #000000; -$background-dark: #101113; -$background-accent-dark: tint-color($background-dark, 5%); +$background-accent-dark: #101113; +$background-dark: tint-color($background-accent-dark, 5%);; $primary: $evap-dark-blue; $primary-accent: $evap-light-blue; From 97ce9e14fa4c1e49b0ba51ac64496613be194582 Mon Sep 17 00:00:00 2001 From: Gerome Quantmeyer Date: Mon, 13 Jul 2026 20:05:10 +0200 Subject: [PATCH 15/18] darkmode: more misc improvements --- evap/static/scss/_adjustments.scss | 36 +++++++++++++++++++ evap/static/scss/components/_badge.scss | 16 +++++++-- evap/static/scss/components/_transitions.scss | 6 +++- evap/static/scss/evap.scss | 25 +------------ 4 files changed, 56 insertions(+), 27 deletions(-) diff --git a/evap/static/scss/_adjustments.scss b/evap/static/scss/_adjustments.scss index 8e83fa8f88..75383a48f0 100644 --- a/evap/static/scss/_adjustments.scss +++ b/evap/static/scss/_adjustments.scss @@ -124,6 +124,16 @@ $alert-colors: ( } } +@include color-mode(dark) { + .bootstrap-datetimepicker-widget { + td.day:hover, td.dow:hover, td span:hover, th:hover { + color: $black !important; + background-color: $light-gray !important; + } + } +} + + // tomselect adjustments .ts-wrapper.multi .ts-control > div.active { background-color: $component-active-bg; @@ -138,6 +148,32 @@ $alert-colors: ( border: 0; } +@include color-mode(dark) { + .ts-control, .ts-dropdown, .ts-wrapper.single.input-active .ts-control { + background-color: $background-dark; + color: $light-gray; + border-color: $darker-gray; + + .option:hover { + background-color: $light-gray; + color: $black; + } + input { + color: $light-gray; + } + } + .ts-wrapper.multi { + .item { + background-color: $darker-gray !important; + color: $light-gray; + } + } + .ts-wrapper.plugin-remove_button .item .remove { + border-left: none; + } +} + + // Change .btn-group outlined border style to fix double borders with outlined button style // see https://github.com/twbs/bootstrap/issues/25888 .btn-group.outline-fix { diff --git a/evap/static/scss/components/_badge.scss b/evap/static/scss/components/_badge.scss index 8f66e65f05..a980eab8ea 100644 --- a/evap/static/scss/components/_badge.scss +++ b/evap/static/scss/components/_badge.scss @@ -9,8 +9,9 @@ } .badge-btn-zero { margin-left: 0.3rem; - color: $medium-gray; - background-color: $white; + color: $darker-gray; + background-color: $light-gray; + opacity: 0.5; } .bg-info, .bg-warning, .bg-light { color: $darker-gray; @@ -79,3 +80,14 @@ border: 1px solid $secondary; padding: 0.27em 0.35em; } +@include color-mode(dark) { + .badge-btn { + color: $light-gray; + background-color: $darker-gray; + } + .badge-btn-zero { + color: $light-gray; + background-color: $darker-gray; + opacity: 0.5; + } +} \ No newline at end of file diff --git a/evap/static/scss/components/_transitions.scss b/evap/static/scss/components/_transitions.scss index a77fdb6022..54b7792b1a 100644 --- a/evap/static/scss/components/_transitions.scss +++ b/evap/static/scss/components/_transitions.scss @@ -26,7 +26,11 @@ } } - +@include color-mode(dark) { + .collapse-toggle { + color: $light-gray; + } +} .collapse-toggle-light { font-weight: normal; diff --git a/evap/static/scss/evap.scss b/evap/static/scss/evap.scss index f096bb824c..7fe6223022 100644 --- a/evap/static/scss/evap.scss +++ b/evap/static/scss/evap.scss @@ -165,27 +165,4 @@ td.icon { @media print { @import "print"; -} - -@include color-mode(dark) { - .ts-control, .ts-dropdown, .ts-wrapper.single.input-active .ts-control { - background-color: $background-dark; - color: $light-gray; - border-color: $darker-gray; - - .option:hover { - background-color: $light-gray; - color: $black; - } - input { - color: $light-gray; - } - } - - .bootstrap-datetimepicker-widget { - td.day:hover, td.dow:hover, td span:hover, th:hover { - color: $black !important; - background-color: $light-gray !important; - } - } -} +} \ No newline at end of file From 397aea07fb68c93ab9c90c766f86d3abdac64754 Mon Sep 17 00:00:00 2001 From: Gerome Quantmeyer Date: Mon, 13 Jul 2026 20:22:34 +0200 Subject: [PATCH 16/18] fix color-mode-toggler --- evap/static/ts/src/color-mode-toggler.ts | 101 ++++++++++------------- 1 file changed, 44 insertions(+), 57 deletions(-) diff --git a/evap/static/ts/src/color-mode-toggler.ts b/evap/static/ts/src/color-mode-toggler.ts index def859ed2b..35e39132fc 100644 --- a/evap/static/ts/src/color-mode-toggler.ts +++ b/evap/static/ts/src/color-mode-toggler.ts @@ -2,61 +2,48 @@ * Adapted color mode toggler from Bootstrap's docs (https://getbootstrap.com/) */ +import { unwrap } from "./utils"; + (() => { - 'use strict' - - const storedTheme = localStorage.getItem('theme') - - const getPreferredTheme = () => { - console.log("getPreferredTheme"); - if (storedTheme) { - return storedTheme - } - - return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' - } - - const setTheme = function (theme) { - console.log("setTheme"); - console.log(theme); - /*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) - //} - } - - setTheme(getPreferredTheme()) - - const showActiveTheme = theme => { - console.log("showActiveTheme"); - console.log(theme); - const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`) - - document.querySelectorAll('[data-bs-theme-value]').forEach(element => { - element.classList.remove('active') - }) - - btnToActive.classList.add('active') - } - -/* window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { - if (storedTheme !== 'light' || storedTheme !== 'dark') { - setTheme(getPreferredTheme()) - } - })*/ - - window.addEventListener('DOMContentLoaded', () => { - showActiveTheme(getPreferredTheme()) - - document.querySelectorAll('[data-bs-theme-value]') - .forEach(toggle => { - toggle.addEventListener('click', () => { - const theme = toggle.getAttribute('data-bs-theme-value') - localStorage.setItem('theme', theme) - setTheme(theme) - showActiveTheme(theme) - }) - }) - }) -})() \ No newline at end of file + "use strict"; + + const storedTheme = localStorage.getItem("theme"); + + const getPreferredTheme = () => { + console.log("getPreferredTheme"); + if (storedTheme) { + return storedTheme; + } + + return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; + }; + + const setTheme = function (theme: string) { + document.documentElement.setAttribute("data-bs-theme", theme); + }; + + setTheme(getPreferredTheme()); + + const showActiveTheme = (theme: string) => { + const btnToActive = unwrap(document.querySelector(`[data-bs-theme-value="${theme}"]`)); + + document.querySelectorAll("[data-bs-theme-value]").forEach(element => { + element.classList.remove("active"); + }); + + btnToActive.classList.add("active"); + }; + + window.addEventListener("DOMContentLoaded", () => { + showActiveTheme(getPreferredTheme()); + + document.querySelectorAll("[data-bs-theme-value]").forEach(toggle => { + toggle.addEventListener("click", () => { + const theme = unwrap(toggle.getAttribute("data-bs-theme-value")); + localStorage.setItem("theme", theme); + setTheme(theme); + showActiveTheme(theme); + }); + }); + }); +})(); From 28ddcf0ae2d2c3ce2d80edb5538a7d9b67416f4e Mon Sep 17 00:00:00 2001 From: Gerome Quantmeyer Date: Mon, 13 Jul 2026 20:26:45 +0200 Subject: [PATCH 17/18] fix import --- evap/static/ts/src/color-mode-toggler.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/evap/static/ts/src/color-mode-toggler.ts b/evap/static/ts/src/color-mode-toggler.ts index 35e39132fc..2c70b7f6bc 100644 --- a/evap/static/ts/src/color-mode-toggler.ts +++ b/evap/static/ts/src/color-mode-toggler.ts @@ -2,7 +2,7 @@ * Adapted color mode toggler from Bootstrap's docs (https://getbootstrap.com/) */ -import { unwrap } from "./utils"; +import { unwrap } from "./utils.js"; (() => { "use strict"; From 56bc3b223823ce8e572e3ace886df784d14facfc Mon Sep 17 00:00:00 2001 From: Gerome Quantmeyer Date: Mon, 20 Jul 2026 18:02:23 +0200 Subject: [PATCH 18/18] fix color mode toggler againg --- evap/evaluation/templates/base.html | 2 +- evap/static/ts/src/color-mode-toggler.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/evap/evaluation/templates/base.html b/evap/evaluation/templates/base.html index 71edb31008..76dd0f3fee 100644 --- a/evap/evaluation/templates/base.html +++ b/evap/evaluation/templates/base.html @@ -24,7 +24,7 @@ {% endif %} {% endblock %} - + diff --git a/evap/static/ts/src/color-mode-toggler.ts b/evap/static/ts/src/color-mode-toggler.ts index 2c70b7f6bc..aedc30841c 100644 --- a/evap/static/ts/src/color-mode-toggler.ts +++ b/evap/static/ts/src/color-mode-toggler.ts @@ -10,7 +10,6 @@ import { unwrap } from "./utils.js"; const storedTheme = localStorage.getItem("theme"); const getPreferredTheme = () => { - console.log("getPreferredTheme"); if (storedTheme) { return storedTheme; }