Skip to content

Commit

Permalink
chore: move dark mode css into its own file
Browse files Browse the repository at this point in the history
  • Loading branch information
@jstucke
jstucke committed Dec 2, 2024
1 parent 6c3e24a commit 5f882d7
Show file tree
Hide file tree
Showing 2 changed files with 159 additions and 100 deletions.
158 changes: 158 additions & 0 deletions src/web_interface/static/css/darkmode.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
:root {
--background-color-light: #fff;
--text-color-light: #212529;
--background-color-dark: #2e3339;
--border-color-dark: #454d55;
--background-color-dark-element: #343a40;
--background-color-dark-primary: #385779;
--text-color-dark: #ccc;
}

body {
background-color: var(--background-color-light);
color: var(--text-color-light);
}

.dark-mode {
background-color: var(--background-color-dark);
color: var(--text-color-dark);
}

body.dark-mode :is(.list-group-item, .dropdown-item) {
color: var(--text-color-dark) !important;
border-color: var(--border-color-dark) !important;
background-color: inherit !important;
}

body.dark-mode a.nav-link.active {
color: inherit !important;
background-color: inherit !important;
border-color: var(--border-color-dark) var(--border-color-dark) var(--background-color-dark) !important;
}

body.dark-mode :is(pre, .pagination-page-info b, .line-number, .list-group-item-action,
.table:not(.table-borderless), .list-group-flush) {
color: var(--text-color-dark) !important;
}

body.dark-mode :is(a:hover) {
color: #fff;
}

body.dark-mode :is(div.card, input, textarea, select, .dropdown-menu, .d2h-wrapper, .d2h-file-wrapper, .d2h-file-header,
.d2h-info, .d2h-code-side-linenumber, .modal-content, a.page-link, span.page-link, .btn-light, .jumbotron) {
color: var(--text-color-dark) !important;
background-color: var(--background-color-dark-element) !important;
border: 1px solid var(--border-color-dark) !important;
}

body.dark-mode :is(.table.table-borderless, .bg-light) {
color: var(--text-color-dark) !important;
background-color: var(--background-color-dark-element) !important;
}

/* d2h: text file diff */
body.dark-mode .d2h-del {
background-color: #644344 !important;
}

body.dark-mode del {
background-color: #682529 !important;
}

body.dark-mode .d2h-ins {
background-color: #4b644b !important;
}

body.dark-mode ins {
background-color: #2a5c2a !important;
}

body.dark-mode .d2h-tag {
background-color: var(--background-color-dark) !important;
}

body.dark-mode :is(th) {
color: inherit !important;
background-color: inherit !important;
}

body.dark-mode :is(.input-group-text, .thead-light, .table-head-light) {
/* --secondary is defined in bootstrap.min.css */
background-color: var(--secondary) !important;
color: var(--text-color-dark) !important;
border-color: var(--border-color-dark) !important;
}

body.dark-mode :is(.table-primary, .list-group-item-primary, option:checked, .pagination > li.active > a) {
background-color: var(--background-color-dark-primary) !important;
color: #7ebcff !important;
border-color: var(--background-color-dark-primary) !important;
}

body.dark-mode :is(.alert-success, .table-success, .table-success > td) {
background-color: #405945 !important;
color: #d4edda !important;
}

body.dark-mode :is(.alert-warning, .table-warning, .table-warning > td) {
background-color: #938457 !important;
color: #ffe8a4 !important;
}

body.dark-mode :is(.alert-danger, .table-danger, .table-danger > td) {
background-color: #774c4e !important;
color: #f5c6cb !important;
}

body.dark-mode :is(.table-bordered td, .table-bordered th, .border-light, .table td, .table th, .border,
.form-control, .CodeMirror:not(.cm-s-graphiql)) {
border-color: var(--border-color-dark) !important;
}

body.dark-mode .nav-tabs {
border-bottom: 1px solid var(--border-color-dark) !important;
}

/* hljs: highlight.js code highlighting */
body.dark-mode .hljs {
background: inherit;
color: var(--text-color-dark);
}

body.dark-mode .hljs-string {
color: #58c5b2;
}

body.dark-mode .hljs-attr {
color: #3795ff;
}

body.dark-mode .close {
color: var(--text-color-dark);
}

body.dark-mode input[type="checkbox"] {
/* This is a bit of a hack: For whatever reason, you can't change the background color of checkboxes.
We can invert the color with CSS, though... */
filter: invert(75%) hue-rotate(180deg);
}

body.dark-mode :is(.table-hover td:hover, .table-hover th:hover, .table-hover tr:hover,
.list-group-item-action:hover, .dropdown-item:hover) {
background-color: var(--secondary) !important;
color: var(--text-color-dark) !important;
}

/* browse X table hover animation */
body.dark-mode .li-hover {
box-shadow: 0 0 0 rgba(0, 123, 255, .15);
}

body.dark-mode .li-hover:hover {
box-shadow: 5px 5px 20px rgba(0, 123, 255, .35);
}

body.dark-mode .jstree-hovered {
background: var(--background-color-dark-primary);
}
101 changes: 1 addition & 100 deletions src/web_interface/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,107 +133,8 @@
font-size: 14px;
overflow-wrap: anywhere;
}
:root {
--background-color-light: #fff;
--text-color-light: #212529;
--background-color-dark: #2e3339;
--border-color-dark: #454d55;
--background-color-dark-element: #343a40;
--text-color-dark: #ccc;
}
body {
background-color: var(--background-color-light);
color: var(--text-color-light);
}
.dark-mode {
background-color: var(--background-color-dark);
color: var(--text-color-dark);
}
body.dark-mode :is(.list-group-item, .dropdown-item) {
color: var(--text-color-dark) !important;
border-color: var(--border-color-dark) !important;
background-color: inherit !important;
}
body.dark-mode a.nav-link.active {
color: inherit !important;
background-color: inherit !important;
border-color: var(--border-color-dark) var(--border-color-dark) var(--background-color-dark) !important;
}
body.dark-mode :is(pre, a, a:link, .pagination-page-info b) {
color: var(--text-color-dark) !important;
}
body.dark-mode :is(div.card, .dropdown-menu, select, input, .list-group-item-action, .modal-content,
.table:not(.table-borderless), a.page-link, span.page-link, .btn-light, textarea) {
color: var(--text-color-dark) !important;
background-color: var(--background-color-dark-element) !important;
border: 1px solid var(--border-color-dark) !important;
}
body.dark-mode :is(.list-group-flush, .table.table-borderless, .bg-light) {
color: var(--text-color-dark) !important;
background-color: var(--background-color-dark-element) !important;
}
body.dark-mode :is(th) {
color: inherit !important;
background-color: inherit !important;
}
body.dark-mode :is(.input-group-text, .thead-light, .table-head-light) {
background-color: var(--secondary) !important;
color: var(--text-color-dark) !important;
border-color: var(--border-color-dark) !important;
}
body.dark-mode :is(.table-primary, .list-group-item-primary) {
background-color: #385779 !important;
color: #7ebcff !important;
}
body.dark-mode :is(.alert-success, .table-success, .table-success > td) {
background-color: #405945 !important;
color: #d4edda !important;
}
body.dark-mode :is(.alert-warning, .table-warning, .table-warning > td) {
background-color: #938457 !important;
color: #ffe8a4 !important;
}
body.dark-mode :is(.alert-danger, .table-danger, .table-danger > td) {
background-color: #774c4e !important;
color: #f5c6cb !important;
}
body.dark-mode :is(.table-bordered td, .table-bordered th, .border-light, .table td, .table th, .border,
.form-control) {
border-color: var(--border-color-dark) !important;
}
body.dark-mode .nav-tabs {
border-bottom: 1px solid var(--border-color-dark) !important;
}
body.dark-mode .hljs {
background: inherit;
color: var(--text-color-dark);
}
body.dark-mode .hljs-string {
color: #58c5b2;
}
body.dark-mode .jumbotron {
background-color: #343a40;
}
body.dark-mode .close {
color: var(--text-color-dark);
}
body.dark-mode input[type="checkbox"] {
/* This is a bit of a hack: For whatever reason, you can't change the background color of checkboxes.
We can invert the color with CSS, though... */
filter: invert(75%) hue-rotate(180deg);
}
body.dark-mode :is(.table-hover td:hover, .table-hover th:hover, .table-hover tr:hover,
.list-group-item-action:hover, .dropdown-item:hover) {
background-color: var(--secondary) !important;
color: var(--text-color-dark) !important;
}
body.dark-mode .li-hover {
box-shadow: 0 0 0 rgba(0,123,255,.15);
}
body.dark-mode .li-hover:hover {
box-shadow: 5px 5px 20px rgba(0,123,255,.35);
}
</style>
<link rel="stylesheet" href="{{ url_for('static', filename='css/darkmode.css') }}">
{% block styles %}{% endblock %}
</head>

Expand Down

0 comments on commit 5f882d7

Please sign in to comment.