Introduce Dark Mode

This commit mainly changes the color definitions. Mostly, those changes are semantically equally, but there are a few changes that occurred to align the color scheme within the app.

app/views/application/_breadcrumbs_and_title.html.slim

@@ -20,7 +20,7 @@
 - title = "#{active_action} - #{application_name}"
 - content_for :breadcrumbs do
   .container.mb-4
-    ul.breadcrumb.bg-light.px-3.py-2
+    ul.breadcrumb.bg-body-secondary.px-3.py-2
       - if root_element.present?
         li.breadcrumb-item.small
           = root_element

app/views/application/_color_mode_selector.html.slim

@@ -0,0 +1,17 @@
+li.nav-item.dropdown
+  a.nav-link.dropdown-toggle.me-3 data-bs-toggle='dropdown' href='#'
+    = t('shared.color_mode.title')
+    span.caret
+  ul.dropdown-menu.p-0.mt-1 role='menu'
+    li
+      button.dropdown-item.d-flex.align-items-center data={ 'bs-theme-value': 'light' }
+        i.fa-fw.fa-solid.fa-sun
+        = t('shared.color_mode.light')
+    li
+      button.dropdown-item.d-flex.align-items-center data={ 'bs-theme-value': 'dark' }
+        i.fa-fw.fa-solid.fa-moon
+        = t('shared.color_mode.dark')
+    li
+      button.dropdown-item.d-flex.align-items-center data={ 'bs-theme-value': 'auto' }
+        i.fa-fw.fa-solid.fa-wand-magic-sparkles
+        = t('shared.color_mode.auto')

app/views/application/_locale_selector.html.slim

@@ -1,5 +1,5 @@
 li.nav-item.dropdown
-  a.nav-link.dropdown-toggle.mx-3 data-bs-toggle='dropdown' href='#'
+  a.nav-link.dropdown-toggle.me-3 data-bs-toggle='dropdown' href='#'
     = t("locales.#{I18n.locale}")
     span.caret
   ul.dropdown-menu.p-0.mt-1 role='menu'

app/views/community_solutions/_form.html.slim

@@ -42,7 +42,7 @@
             = render('exercises/editor_frame', exercise: @community_solution.exercise, file: file)
 
   .col-xl-6.container-fluid
-    div.bg-dark.h-100.float-start.row style="width: 1px"
+    div.bg-contrast.h-100.float-start.row style="width: 1px"
     div
       h4
         = t('community_solutions.your_submission')

app/views/consumers/show.html.slim

@@ -5,7 +5,7 @@ h1
 = row(label: 'consumer.name', value: @consumer.name)
 - %w[oauth_key oauth_secret].each do |attribute|
   = row(label: "consumer.#{attribute}") do
-    = content_tag(:input, nil, class: 'form-control bg-secondary', readonly: true, value: @consumer.send(attribute))
+    = content_tag(:input, nil, class: 'form-control bg-body-secondary', readonly: true, value: @consumer.send(attribute))
 = row(label: 'consumer.rfc_visibility', value: t("activerecord.attributes.consumer.rfc_visibility_type.#{@consumer.rfc_visibility}"))
 
 = render('study_groups/table', study_groups: @consumer.study_groups.sort)

app/views/execution_environments/show.html.slim

@@ -3,10 +3,10 @@ h1.d-inline-block = @execution_environment
   = render('shared/edit_button', object: @execution_environment)
   button.btn.btn-secondary.float-end.dropdown-toggle data-bs-toggle='dropdown' type='button'
   ul.dropdown-menu.dropdown-menu-end role='menu'
-    li = link_to(t('execution_environments.index.synchronize.button'), sync_to_runner_management_execution_environment_path(@execution_environment), method: :post, class: 'dropdown-item text-dark') if policy(@execution_environment).sync_to_runner_management?
-    li = link_to(t('execution_environments.index.shell'), shell_execution_environment_path(@execution_environment), class: 'dropdown-item text-dark') if policy(@execution_environment).shell?
-    li = link_to(t('shared.statistics'), statistics_execution_environment_path(@execution_environment), 'data-turbolinks' => "false", class: 'dropdown-item text-dark') if policy(@execution_environment).statistics?
-    li = link_to(t('shared.destroy'), @execution_environment, data: {confirm: t('shared.confirm_destroy')}, method: :delete, class: 'dropdown-item text-dark') if policy(@execution_environment).destroy?
+    li = link_to(t('execution_environments.index.synchronize.button'), sync_to_runner_management_execution_environment_path(@execution_environment), method: :post, class: 'dropdown-item') if policy(@execution_environment).sync_to_runner_management?
+    li = link_to(t('execution_environments.index.shell'), shell_execution_environment_path(@execution_environment), class: 'dropdown-item') if policy(@execution_environment).shell?
+    li = link_to(t('shared.statistics'), statistics_execution_environment_path(@execution_environment), 'data-turbolinks' => "false", class: 'dropdown-item') if policy(@execution_environment).statistics?
+    li = link_to(t('shared.destroy'), @execution_environment, data: {confirm: t('shared.confirm_destroy')}, method: :delete, class: 'dropdown-item') if policy(@execution_environment).destroy?
 
 = row(label: 'execution_environment.name', value: @execution_environment.name)
 = row(label: 'execution_environment.user', value: link_to_if(policy(@execution_environment.author).show?, @execution_environment.author, @execution_environment.author))

app/views/exercises/_editor.html.slim

@@ -35,8 +35,8 @@
 
     #statusbar.d-flex.justify-content-between
       div
-        - if !@embed_options[:disable_download] && @exercise.hide_file_tree?
-          button#download.p-0.border-0.btn-link.visible.bg-white.text-primary
+        - if !@embed_options[:disable_download] && !@exercise.hide_file_tree?
+          button#download.p-0.border-0.btn-link.visible.bg-body.text-primary
             i.fa-solid.fa-arrow-down
             = t('exercises.editor.download')
 
@@ -47,7 +47,7 @@
 
         = " | "
 
-        button#start-over-active-file.p-0.border-0.btn-link.bg-white.text-primary data-message-confirm=t('exercises.editor.confirm_start_over_active_file') data-url=reload_exercise_path(@exercise)
+        button#start-over-active-file.p-0.border-0.btn-link.bg-body.text-primary data-message-confirm=t('exercises.editor.confirm_start_over_active_file') data-url=reload_exercise_path(@exercise)
           i.fa-solid.fa-circle-notch.fa-spin.d-none
           i.fa-solid.fa-clock-rotate-left
           = t('exercises.editor.start_over_active_file')

app/views/exercises/_editor_file_tree.html.slim

@@ -1,11 +1,11 @@
 div.d-grid.gap-2 id='sidebar-collapsed' class=(@exercise.hide_file_tree && @tips.blank? ? '' : 'd-none')
-  = render('editor_button', classes: 'btn-outline-dark', data: {:'data-bs-toggle' => 'tooltip', :'data-bs-placement' => 'right'}, icon: 'fa-solid fa-square-plus', id: 'sidebar-collapse-collapsed', label:'', title:t('exercises.editor.expand_action_sidebar'))
+  = render('editor_button', classes: 'btn-outline-contrast', data: {:'data-bs-toggle' => 'tooltip', :'data-bs-placement' => 'right'}, icon: 'fa-solid fa-square-plus', id: 'sidebar-collapse-collapsed', label:'', title:t('exercises.editor.expand_action_sidebar'))
 
   - unless @embed_options[:disable_hints] or @tips.blank?
     = render('editor_button', classes: 'btn-secondary btn mb-4', data: {:'data-bs-toggle' => 'tooltip', :'data-bs-placement' => 'right'}, icon: 'fa-solid fa-lightbulb', id: 'tips-collapsed', label:'', title: t('exercises.form.tips'))
 
 div.d-grid.enforce-bottom-margin id='sidebar-uncollapsed' class=(@exercise.hide_file_tree && @tips.blank? ? 'd-none' : '')
-  = render('editor_button', classes: 'btn-outline-dark overflow-hidden mb-2', icon: 'fa-solid fa-square-minus', id: 'sidebar-collapse', label: t('exercises.editor.collapse_action_sidebar'))
+  = render('editor_button', classes: 'btn-outline-contrast overflow-hidden mb-2', icon: 'fa-solid fa-square-minus', id: 'sidebar-collapse', label: t('exercises.editor.collapse_action_sidebar'))
   #content-left-sidebar.overflow-scroll
     - unless @exercise.hide_file_tree
       div.overflow-scroll

app/views/exercises/_editor_output.html.slim

@@ -1,7 +1,7 @@
 div.d-grid id='output_sidebar_collapsed'
-  = render('editor_button', classes: 'btn-outline-dark btn', data: {:'data-bs-toggle' => 'tooltip', :'data-bs-placement' => 'left'}, title: t('exercises.editor.expand_output_sidebar'), icon: 'fa-solid fa-square-plus', id: 'toggle-sidebar-output-collapsed', label: '')
+  = render('editor_button', classes: 'btn-outline-contrast btn', data: {:'data-bs-toggle' => 'tooltip', :'data-bs-placement' => 'left'}, title: t('exercises.editor.expand_output_sidebar'), icon: 'fa-solid fa-square-plus', id: 'toggle-sidebar-output-collapsed', label: '')
 div.d-grid id='output_sidebar_uncollapsed' class='d-none col-sm-12 enforce-bottom-margin' data-message-no-output=t('exercises.implement.no_output_yet')
-  = render('editor_button', classes: 'btn-outline-dark btn overflow-hidden mb-2', icon: 'fa-solid fa-square-minus', id: 'toggle-sidebar-output', label: t('exercises.editor.collapse_output_sidebar'))
+  = render('editor_button', classes: 'btn-outline-contrast btn overflow-hidden mb-2', icon: 'fa-solid fa-square-minus', id: 'toggle-sidebar-output', label: t('exercises.editor.collapse_output_sidebar'))
 
 
   #content-right-sidebar.overflow-scroll
@@ -17,7 +17,7 @@ div.d-grid id='output_sidebar_uncollapsed' class='d-none col-sm-12 enforce-botto
             li.card.mt-2
               .card-header.py-2
                 h5.card-title.m-0 == t('exercises.implement.test_file', filename: '', number: 0)
-              .card-body.bg-white.text-dark
+              .card-body
                 = row(label: 'exercises.implement.passed_tests') do
                   span.number
                     | 0
@@ -37,7 +37,7 @@ div.d-grid id='output_sidebar_uncollapsed' class='d-none col-sm-12 enforce-botto
             li.card.mt-2
               .card-header.py-2
                 h5.card-title.m-0 == t('exercises.implement.linter_file', filename: '', number: 0)
-              .card-body.bg-white.text-dark
+              .card-body
                 = row(label: 'exercises.implement.code_rating') do
                   span.number
                     | 0
@@ -84,6 +84,6 @@ div.d-grid id='output_sidebar_uncollapsed' class='d-none col-sm-12 enforce-botto
       #output
         .output-element.overflow-scroll = t('exercises.implement.no_output_yet')
       - if CodeOcean::Config.new(:code_ocean).read[:flowr][:enabled] && !@embed_options[:disable_hints] && !@embed_options[:hide_test_results]
-        #flowrHint.mb-2.card.text-white.bg-info data-url=CodeOcean::Config.new(:code_ocean).read[:flowr][:url] role='tab'
-          .card-header = t('exercises.implement.flowr.heading')
-          .card-body.text-dark.bg-white
+        #flowrHint.mb-2.card data-url=CodeOcean::Config.new(:code_ocean).read[:flowr][:url] role='tab'
+          .card-header.text-white.bg-info = t('exercises.implement.flowr.heading')
+          .card-body

app/views/exercises/_tips_content.html.slim

@@ -9,5 +9,5 @@
   .card-header.py-2
     i.fa-solid.fa-lightbulb
     = t('exercises.implement.tips.heading')
-  .card-body.text-dark.bg-white.p-2
+  .card-body.p-2
     = render(partial: 'tips/collapsed_card', collection: @tips, as: :exercise_tip, locals: { tip_prefix: '' })

app/views/exercises/external_users/statistics.html.slim

@@ -40,17 +40,17 @@ h1
             =index
           - index += 1
   - if policy(@exercise).detailed_statistics?
-    .bg-light.w-100.p-2.mb-4.align-items-center.d-flex.justify-content-between
+    .bg-body-secondary.w-100.p-2.mb-4.align-items-center.d-flex.justify-content-between
       - if @show_autosaves
         span.ps-1.pb-1
           i.fa-solid.fa-circle-info.align-middle
           small.me-5.ms-1 = t('.toggle_status_on')
-        = link_to t('.toggle_autosave_off'), statistics_external_user_exercise_path(show_autosaves: false), class: "btn btn-outline-dark float-end btn-sm"
+        = link_to t('.toggle_autosave_off'), statistics_external_user_exercise_path(show_autosaves: false), class: "btn btn-outline-contrast float-end btn-sm"
       - else
         span.ps-1.pb-1
           i.fa-solid.fa-circle-info.align-middle
           small.me-5.ms-1 = t('.toggle_status_off')
-        = link_to t('.toggle_autosave_on'), statistics_external_user_exercise_path(show_autosaves: true), class: "btn btn-outline-dark float-end btn-sm"
+        = link_to t('.toggle_autosave_on'), statistics_external_user_exercise_path(show_autosaves: true), class: "btn btn-outline-contrast float-end btn-sm"
   #timeline
     .table-responsive
       table.table

app/views/exercises/show.html.slim

@@ -10,13 +10,13 @@ h1.d-inline-block = @exercise
   = render('shared/edit_button', object: @exercise)
   button.btn.btn-secondary.float-end.dropdown-toggle data-bs-toggle='dropdown' type='button'
   ul.dropdown-menu.dropdown-menu-end role='menu'
-    li = link_to(t('exercises.index.implement'), implement_exercise_path(@exercise), 'data-turbolinks' => "false", class: 'dropdown-item text-dark') if policy(@exercise).implement?
-    li = link_to(t('shared.statistics'), statistics_exercise_path(@exercise), 'data-turbolinks' => "false", class: 'dropdown-item text-dark') if policy(@exercise).statistics?
-    li = link_to(t('activerecord.models.user_exercise_feedback.other'), feedback_exercise_path(@exercise), class: 'dropdown-item text-dark') if policy(@exercise).feedback?
-    li = link_to(t('activerecord.models.request_for_comment.other'), rfcs_for_exercise_path(@exercise), class: 'dropdown-item text-dark') if policy(@exercise).rfcs_for_exercise?
-    li = link_to(t('shared.destroy'), @exercise, data: {confirm: t('shared.confirm_destroy')}, method: :delete, class: 'dropdown-item text-dark') if policy(@exercise).destroy?
-    li = link_to(t('exercises.index.clone'), clone_exercise_path(@exercise), data: {confirm: t('shared.confirm_destroy')}, method: :post, class: 'dropdown-item text-dark') if policy(@exercise).clone?
-    li = link_to(t('exercises.export_codeharbor.label'), '', class: 'dropdown-item export-start text-dark', data: {'exercise-id' => @exercise.id}) if policy(@exercise).export_external_confirm?
+    li = link_to(t('exercises.index.implement'), implement_exercise_path(@exercise), 'data-turbolinks' => "false", class: 'dropdown-item') if policy(@exercise).implement?
+    li = link_to(t('shared.statistics'), statistics_exercise_path(@exercise), 'data-turbolinks' => "false", class: 'dropdown-item') if policy(@exercise).statistics?
+    li = link_to(t('activerecord.models.user_exercise_feedback.other'), feedback_exercise_path(@exercise), class: 'dropdown-item') if policy(@exercise).feedback?
+    li = link_to(t('activerecord.models.request_for_comment.other'), rfcs_for_exercise_path(@exercise), class: 'dropdown-item') if policy(@exercise).rfcs_for_exercise?
+    li = link_to(t('shared.destroy'), @exercise, data: {confirm: t('shared.confirm_destroy')}, method: :delete, class: 'dropdown-item') if policy(@exercise).destroy?
+    li = link_to(t('exercises.index.clone'), clone_exercise_path(@exercise), data: {confirm: t('shared.confirm_destroy')}, method: :post, class: 'dropdown-item') if policy(@exercise).clone?
+    li = link_to(t('exercises.export_codeharbor.label'), '', class: 'dropdown-item export-start', data: {'exercise-id' => @exercise.id}) if policy(@exercise).export_external_confirm?
 
 = row(label: 'exercise.title', value: @exercise.title)
 = row(label: 'exercise.user', value: link_to_if(policy(@exercise.author).show?, @exercise.author, @exercise.author))
@@ -35,7 +35,7 @@ h1.d-inline-block = @exercise
 = row(label: 'exercise.uuid', value: @exercise.uuid)
 = row(label: 'exercise.tags', value: @exercise.exercise_tags.map{|et| "#{et.tag.name} (#{et.factor})"}.sort.join(", "))
 = row(label: 'exercise.embedding_parameters', class: 'mb-4') do
-  = content_tag(:input, nil, class: 'form-control bg-secondary mb-4', readonly: true, value: @exercise.unpublished? ? t('exercises.show.is_unpublished') : embedding_parameters(@exercise))
+  = content_tag(:input, nil, class: 'form-control bg-body-secondary mb-4', readonly: true, value: @exercise.unpublished? ? t('exercises.show.is_unpublished') : embedding_parameters(@exercise))
 
 - unless @tips.blank?
   .mt-2

app/views/exercises/statistics.html.slim

@@ -81,10 +81,10 @@ h1 = @exercise
                 - latest_user_submission = submissions.where(user: user).final.latest
                 - if latest_user_submission.present?
                   - if latest_user_submission.before_deadline?
-                    .unit-test-result.positive-result.before_deadline
+                    .unit-test-result.positive-result
                   - elsif latest_user_submission.within_grace_period?
-                    .unit-test-result.unknown-result.within_grace_period
+                    .unit-test-result.unknown-result
                   - elsif latest_user_submission.after_late_deadline?
-                    .unit-test-result.negative-result.after_late_deadline
+                    .unit-test-result.negative-result
               td = us['runs'] if policy(@exercise).detailed_statistics?
               td = @exercise.average_working_time_for(user) or 0 if policy(@exercise).detailed_statistics?

app/views/layouts/application.html.slim

@@ -29,6 +29,7 @@ html lang="#{I18n.locale || I18n.default_locale}" data-default-locale="#{I18n.de
           #navbar-collapse.collapse.navbar-collapse
             = render('navigation', cached: true)
             ul.nav.navbar-nav.ms-auto
+              = render('color_mode_selector', cached: true)
               = render('locale_selector', cached: true)
               li.nav-item.me-3 = link_to(t('shared.help.link'), '#modal-help', data: {'bs-toggle': 'modal'}, class: 'nav-link')
               = render('session')

app/views/proxy_exercises/show.html.slim

@@ -9,7 +9,7 @@ h1
 = row(label: 'exercise.public', value: @proxy_exercise.public?)
 = row(label: 'exercise.description', value: @proxy_exercise.description)
 = row(label: 'exercise.embedding_parameters', class: 'mb-4') do
-  = content_tag(:input, nil, class: 'form-control bg-secondary mb-4', readonly: true, value: embedding_parameters(@proxy_exercise))
+  = content_tag(:input, nil, class: 'form-control bg-body-secondary mb-4', readonly: true, value: embedding_parameters(@proxy_exercise))
 
 h2.mt-4 Exercises
 .table-responsive

app/views/request_for_comments/_list_entry.html.slim

@@ -3,7 +3,7 @@ tr.table-row-clickable data-id=request_for_comment.id data-href=request_for_comm
     - if request_for_comment.solved?
       span.fa-solid.fa-check.fa-2x.text-success aria-hidden="true"
     - elsif request_for_comment.full_score_reached
-      span.fa-solid.fa-check.fa-2x style="color:darkgrey" aria-hidden="true"
+      span.fa-solid.fa-check.fa-2x style="color: var(--bs-secondary-text-emphasis);" aria-hidden="true"
     - else
       = ''
   td.text-center = request_for_comment.comments_count

app/views/request_for_comments/index.html.slim

@@ -37,7 +37,7 @@ h1 = RequestForComment.model_name.human(count: 2)
               span class="fa-solid fa-check" aria-hidden="true"
           - elsif request_for_comment.full_score_reached
             td
-              span class="fa-solid fa-check" style="color:darkgrey" aria-hidden="true"
+              span class="fa-solid fa-check" style="color: var(--bs-secondary-text-emphasis);" aria-hidden="true"
           - else
             td = ''
           td = link_to_if(policy(request_for_comment).show?, request_for_comment.submission.exercise.title, request_for_comment)

app/views/request_for_comments/show.html.slim

@@ -1,7 +1,7 @@
 .list-group
   h4#exercise_caption.list-group-item-heading data-exercise-id="#{@request_for_comment.exercise.id}" data-rfc-id="#{@request_for_comment.id}"
     - if @request_for_comment.solved?
-      span.fa-solid.fa-check aria-hidden="true"
+      span.fa-solid.fa-check.me-2 aria-hidden="true"
     = link_to_if(policy(@request_for_comment.exercise).show?, @request_for_comment.exercise.title, [:implement, @request_for_comment.exercise])
   p.list-group-item-text
     - user = @request_for_comment.user

app/views/shared/_form_filters.html.slim

@@ -1,4 +1,4 @@
-.card.card-body.bg-light.flex-row.container.justify-content-center
+.card.card-body.bg-body-secondary.flex-row.container.justify-content-center
   = search_form_for(@search, class: 'clearfix filter-form align-items-center row g-2 w-100') do |f|
     = yield(f)
     .col-sm.ge-4.gy-2