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.
This commit is contained in:
Sebastian Serth
@ -37,7 +37,9 @@ window.SentryUtils = { dynamicSamplingContextToSentryBaggageHeader, startIdleTra
|
||||
|
||||
// CSS
|
||||
import 'chosen-js/chosen.css';
|
||||
import 'chosen-dark.scss';
|
||||
import 'jstree/dist/themes/default/style.min.css';
|
||||
import 'jstree/dist/themes/default-dark/style.min.css';
|
||||
|
||||
// custom jquery-ui library for minimal mouse interaction support
|
||||
import 'jquery-ui/ui/widget'
|
||||
|
||||
140
app/javascript/chosen-dark.scss
Normal file
140
app/javascript/chosen-dark.scss
Normal file
@ -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 */
|
||||
}
|
||||
@ -5,6 +5,3 @@ import hljs from 'highlight.js/lib/common'
|
||||
import julia from 'highlight.js/lib/languages/julia';
|
||||
hljs.registerLanguage('julia', julia);
|
||||
window.hljs = hljs;
|
||||
|
||||
// CSS
|
||||
import 'highlight.js/styles/base16/tomorrow.css'
|
||||
|
||||
9
app/javascript/highlight.scss
Normal file
9
app/javascript/highlight.scss
Normal file
@ -0,0 +1,9 @@
|
||||
// CSS for highlight.js
|
||||
|
||||
html[data-bs-theme="light"] {
|
||||
@import 'highlight.js/styles/base16/tomorrow';
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] {
|
||||
@import 'highlight.js/styles/base16/tomorrow-night';
|
||||
}
|
||||
@ -11,6 +11,29 @@ $web-font-path: '//';
|
||||
@import '~bootswatch/dist/yeti/variables';
|
||||
@import '~bootstrap/scss/bootstrap';
|
||||
@import '~bootswatch/dist/yeti/bootswatch';
|
||||
|
||||
// We define our own button style here, since `btn-outline-dark` and `btn-outline-light` do not switch colors.
|
||||
html[data-bs-theme="dark"] {
|
||||
.btn-outline-contrast {
|
||||
@extend .btn-outline-light;
|
||||
}
|
||||
|
||||
.bg-contrast {
|
||||
@extend .bg-light;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
html[data-bs-theme="light"] {
|
||||
.btn-outline-contrast {
|
||||
@extend .btn-outline-dark;
|
||||
}
|
||||
|
||||
.bg-contrast {
|
||||
@extend .bg-dark;
|
||||
}
|
||||
}
|
||||
|
||||
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts/';
|
||||
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
|
||||
@import '~@fortawesome/fontawesome-free/scss/solid';
|
||||
|
||||
@ -3,6 +3,3 @@
|
||||
// JS
|
||||
import * as vis from 'vis';
|
||||
window.vis = vis;
|
||||
|
||||
// CSS
|
||||
import 'vis-timeline/dist/vis-timeline-graph2d.css';
|
||||
|
||||
19
app/javascript/vis.scss
Normal file
19
app/javascript/vis.scss
Normal file
@ -0,0 +1,19 @@
|
||||
// CSS
|
||||
|
||||
@import 'vis-timeline/dist/vis-timeline-graph2d';
|
||||
|
||||
html[data-bs-theme="dark"] {
|
||||
// Color overwrites for dark mode
|
||||
|
||||
.vis-legend {
|
||||
background-color: rgba(var(--bs-secondary-bg-rgb), 0.65) !important;
|
||||
}
|
||||
|
||||
.vis-timeline .vis-outline {
|
||||
fill: var(--bs-body-bg) !important;
|
||||
}
|
||||
|
||||
.vis-data-axis .vis-major, .vis-time-axis .vis-text {
|
||||
color: var(--bs-secondary-text-emphasis) !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user