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.
2023-06-02 09:29:43 +02:00
parent aab3b95a1d
commit 944b455194
49 changed files with 582 additions and 197 deletions
--- a/app/javascript/chosen-dark.scss
+++ b/app/javascript/chosen-dark.scss
@@ -0,0 +1,140 @@
+/*!
+Chosen, a Select Box Enhancer for jQuery and Prototype
+by Patrick Filler for Harvest, http://getharvest.com
+
+Version 1.7.0
+Full source at https://github.com/harvesthq/chosen
+Copyright (c) 2011-2017 Harvest http://getharvest.com
+
+MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
+This file is generated by `grunt build`, do not edit it by hand.
+*/
+
+/*
+Modified to dark version by Daniel Ziegler https://daniel-ziegler.com
+MIT License
+Full source at https://github.com/nook24/chosen-dark
+*/
+
+/*
+Changed to work in conjunction with Bootstrap 5 for CodeOcean
+*/
+
+html[data-bs-theme="dark"] {
+
+  .chosen-container .chosen-drop {
+      border-color: #333;
+      background: #212121;
+      box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+  }
+
+
+  /* @end */
+  /* @group Single Chosen */
+  .chosen-container-single .chosen-single {
+      border-color: #333;
+      background: #212121;
+      background-image: linear-gradient(#353535 1%, #212121 15%);
+      box-shadow: 0 0 2px #5d5d5d inset, 0 1px 0 rgba(0, 0, 0, 0.05);
+      color: #e3e3e3;
+  }
+
+  .chosen-container-single .chosen-default {
+      color: #999;
+  }
+
+  .chosen-container-single .chosen-search input[type="text"] {
+      border-color: #333;
+      color: #e3e3e3;
+  }
+
+  /* @end */
+  /* @group Results */
+  .chosen-container .chosen-results {
+      color: #e3e3e3;
+  }
+
+
+  .chosen-container .chosen-results li.disabled-result {
+      color: #505050;
+  }
+
+  .chosen-container .chosen-results li.highlighted {
+      background-color: #3875d7;
+      background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
+      color: #fff;
+  }
+
+  .chosen-container .chosen-results li.no-results {
+      color: #e3e3e3;
+      background: #1f1d1d;
+  }
+
+
+  /* @end */
+  /* @group Multi Chosen */
+  .chosen-container-multi .chosen-choices {
+      border-color: #333;
+      background: #212121;
+      background-image: linear-gradient(#353535 1%, #212121 15%);
+  }
+
+  .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
+      color: #e3e3e3;
+  }
+
+  .chosen-container-multi .chosen-choices li.search-choice {
+      border-color: #000;
+      background-color: #212121;
+      background-image: linear-gradient(#353535 1%, #212121 15%);
+      box-shadow: 0 0 2px #5d5d5d inset, 0 1px 0 rgba(0, 0, 0, 0.05);
+      color: #e3e3e3;
+  }
+
+
+  .chosen-container-multi .chosen-choices li.search-choice-disabled {
+      border: 1px solid #ccc;
+      background-color: #e4e4e4;
+      background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
+      color: #666;
+  }
+
+  .chosen-container-multi .chosen-choices li.search-choice-focus {
+      background: #d4d4d4;
+  }
+
+
+  .chosen-container-multi .chosen-drop .result-selected {
+      color: #505050;
+  }
+
+  /* @end */
+  /* @group Active  */
+  .chosen-container-active .chosen-single {
+      border: 1px solid #5897fb;
+      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  }
+
+  .chosen-container-active.chosen-with-drop .chosen-single {
+      border-color: #333;
+      background-image: linear-gradient(#353535 1%, #212121 15%);
+      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3) inset;
+  }
+
+
+  .chosen-container-active .chosen-choices {
+      border: 1px solid #5897fb;
+      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  }
+
+  .chosen-container-active .chosen-choices li.search-field input[type="text"] {
+      color: #e3e3e3 !important;
+  }
+
+  /* @end */
+  /* @group Disabled Support */
+  .chosen-disabled {
+      opacity: 0.5 !important;
+  }
+  /* @end */
+}