Skip to content

Commit f2c41ee

Browse files
acervacerv
committed
css: Add dark theme palette and overrides
Apply a dark palette when the browser or OS prefers a dark color scheme, along with Bootstrap and Selectize overrides for surfaces, form controls and preformatted text. Signed-off-by: Andrea Cervesato <andrea.cervesato@mailbox.org> Assisted-by: Gemini 3.8 Flash
1 parent 373bc33 commit f2c41ee

1 file changed

Lines changed: 265 additions & 0 deletions

File tree

‎htdocs/css/style.css‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,78 @@
6565
--box-header-color: #999;
6666
}
6767

68+
@media (prefers-color-scheme: dark) {
69+
:root {
70+
/* Render native form controls and scrollbars dark as well */
71+
color-scheme: dark;
72+
73+
--light-color: #242424;
74+
--success-color: #5a9e6a;
75+
--warning-color: #c69a46;
76+
--danger-color: #c9625c;
77+
78+
/* Base theme colors */
79+
--body-bg: #181818;
80+
--text-color: #e0e0e0;
81+
--link-color: #7ca7d8;
82+
--link-hover-color: #a3c2e6;
83+
--muted-color: #9e9e9e;
84+
--pre-bg: #222222;
85+
--input-border: #555555;
86+
87+
/* Message and error containers */
88+
--messages-bg: #282838;
89+
--errors-bg: #282838;
90+
--error-text: #e07a72;
91+
92+
/* Filter box and action links */
93+
--filter-border: #3c3c3c;
94+
--filter-action-color: #e0e0e0;
95+
--col-link-color: #e0e0e0;
96+
--col-inactive-hover: #e07a72;
97+
98+
/* Tables & lists */
99+
--table-header-bg: #222222;
100+
--drag-hover-bg: #303030;
101+
--paginator-curr-bg: #303030;
102+
--paginator-curr-color: #cccccc;
103+
--paginator-na-color: #777777;
104+
--table-border: #3c3c3c;
105+
--bundle-th-bg: #262626;
106+
107+
/* Check states & headers */
108+
--checks-header-bg: #262b45;
109+
--checks-header-color: #e0e0e0;
110+
--checks-link-visited: #a89fd6;
111+
--checks-success-bg: #36694a;
112+
--checks-warning-bg: #7d6224;
113+
--checks-fail-bg: #8c3735;
114+
--checks-state-default: #888888;
115+
--checks-state-success: #6fae82;
116+
--checks-state-warning: #c9a85a;
117+
--checks-state-fail: #d27a70;
118+
119+
/* Submission & comments */
120+
--submission-meta-bg: #262626;
121+
--quote-color: #8aaed8;
122+
--acked-color: #8aaed8;
123+
--signed-off-color: #d08fb0;
124+
125+
/* Diff highlighting */
126+
--diff-chunk: #56d4dd;
127+
--diff-add-text: #7ee787;
128+
--diff-add-bg: rgba(46, 160, 67, 0.2);
129+
--diff-del-text: #ffa198;
130+
--diff-del-bg: rgba(248, 81, 73, 0.2);
131+
--diff-mod: #d2a8ff;
132+
133+
/* Boxes & panel headers */
134+
--box-border: #3c3c3c;
135+
--box-header-bg: #2c2c2c;
136+
--box-header-color: #cccccc;
137+
}
138+
}
139+
68140
h2 {
69141
font-size: 25px;
70142
margin: 18px 0 18px 0;
@@ -706,3 +778,196 @@ div.box table.vertical {
706778
float: right;
707779
width: 49%;
708780
}
781+
782+
/* Dark mode overrides */
783+
@media (prefers-color-scheme: dark) {
784+
body {
785+
background-color: var(--body-bg);
786+
color: var(--text-color);
787+
}
788+
789+
a {
790+
color: var(--link-color);
791+
}
792+
793+
a:hover,
794+
a:focus {
795+
color: var(--link-hover-color);
796+
}
797+
798+
/* Bootstrap hardcodes a dark gray text color for pre blocks */
799+
pre {
800+
color: var(--text-color);
801+
border-color: var(--table-border);
802+
}
803+
804+
/*
805+
* Bootstrap makes form controls inherit the text color, so they need a
806+
* dark background too or they end up light-on-light
807+
*/
808+
input,
809+
select,
810+
textarea,
811+
button {
812+
background-color: #242424;
813+
color: var(--text-color);
814+
border-color: var(--input-border);
815+
}
816+
817+
.form-control {
818+
background-color: #242424;
819+
color: var(--text-color);
820+
border-color: var(--input-border);
821+
}
822+
823+
.table {
824+
color: var(--text-color);
825+
}
826+
827+
.table > thead > tr > th,
828+
.table > tbody > tr > th,
829+
.table > tfoot > tr > th,
830+
.table > thead > tr > td,
831+
.table > tbody > tr > td,
832+
.table > tfoot > tr > td {
833+
border-top-color: var(--table-border);
834+
}
835+
836+
.table > thead > tr > th {
837+
border-bottom-color: var(--table-border);
838+
}
839+
840+
.table-striped > tbody > tr:nth-of-type(odd) {
841+
background-color: #1f1f1f;
842+
}
843+
844+
.table-hover > tbody > tr:hover {
845+
background-color: #2c2c2c;
846+
}
847+
848+
.table-bordered {
849+
border-color: var(--table-border);
850+
}
851+
852+
.table-bordered > thead > tr > th,
853+
.table-bordered > tbody > tr > th,
854+
.table-bordered > tfoot > tr > th,
855+
.table-bordered > thead > tr > td,
856+
.table-bordered > tbody > tr > td,
857+
.table-bordered > tfoot > tr > td {
858+
border-color: var(--table-border);
859+
}
860+
861+
.thumbnail {
862+
background-color: #202020;
863+
border-color: var(--table-border);
864+
}
865+
866+
.thumbnail .caption {
867+
color: var(--text-color);
868+
}
869+
870+
.panel {
871+
background-color: #202020;
872+
border-color: var(--table-border);
873+
}
874+
875+
.panel-default > .panel-heading {
876+
background-color: #262626;
877+
color: var(--text-color);
878+
border-color: var(--table-border);
879+
}
880+
881+
.list-group-item {
882+
background-color: #202020;
883+
border-color: var(--table-border);
884+
color: var(--text-color);
885+
}
886+
887+
.dropdown-menu {
888+
background-color: #242424;
889+
border-color: var(--table-border);
890+
}
891+
892+
.dropdown-menu > li > a {
893+
color: var(--text-color);
894+
}
895+
896+
.dropdown-menu > li > a:hover,
897+
.dropdown-menu > li > a:focus {
898+
background-color: #303030;
899+
color: #ffffff;
900+
}
901+
902+
.dropdown-menu .divider {
903+
background-color: var(--table-border);
904+
}
905+
906+
ul.dropdown-menu > li > form > button {
907+
color: var(--text-color);
908+
}
909+
910+
ul.dropdown-menu > li > form > button:hover {
911+
color: #ffffff;
912+
background-color: #303030;
913+
}
914+
915+
.btn-default {
916+
background-color: #2b2b2b;
917+
color: var(--text-color);
918+
border-color: var(--input-border);
919+
}
920+
921+
.btn-default:hover,
922+
.btn-default:focus,
923+
.btn-default:active {
924+
background-color: #383838;
925+
color: #ffffff;
926+
border-color: #777777;
927+
}
928+
929+
.btn-copy {
930+
color: var(--link-color);
931+
}
932+
933+
table.form tr td.submitrow {
934+
border-bottom-color: var(--table-border);
935+
color: var(--text-color);
936+
}
937+
938+
table.bundlelist {
939+
border-color: var(--table-border);
940+
}
941+
942+
table.bundlelist th {
943+
border-bottom-color: var(--table-border);
944+
}
945+
946+
.selectize-input,
947+
.selectize-input.full,
948+
.selectize-control.single .selectize-input.input-active {
949+
background-color: #242424;
950+
border-color: var(--input-border);
951+
color: var(--text-color);
952+
}
953+
954+
.selectize-input input {
955+
color: var(--text-color);
956+
}
957+
958+
.selectize-dropdown,
959+
.selectize-dropdown .optgroup-header {
960+
background-color: #242424;
961+
border-color: var(--input-border);
962+
color: var(--text-color);
963+
}
964+
965+
.selectize-dropdown .option {
966+
color: var(--text-color);
967+
}
968+
969+
.selectize-dropdown .active {
970+
background-color: #343434;
971+
color: #ffffff;
972+
}
973+
}

0 commit comments

Comments
 (0)