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/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?