Skip to content

Commit 3e9fd91

Browse files
acervacerv
committed
css: Add dark theme palette and overrides
Add dark theme custom property overrides under html[data-theme="dark"] along with targeted Bootstrap and Selectize dark surface styling. Signed-off-by: Andrea Cervesato <andrea.cervesato@mailbox.org> Assisted-by: Gemini 3.8 Flash
1 parent 373bc33 commit 3e9fd91

1 file changed

Lines changed: 248 additions & 0 deletions

File tree

‎htdocs/css/style.css‎

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

68+
html[data-theme="dark"] {
69+
--light-color: #242424;
70+
--success-color: #3fb950;
71+
--warning-color: #d29922;
72+
--danger-color: #f85149;
73+
74+
/* Base theme colors */
75+
--body-bg: #181818;
76+
--text-color: #e0e0e0;
77+
--link-color: #6cb6ff;
78+
--link-hover-color: #8ed0ff;
79+
--muted-color: #9e9e9e;
80+
--pre-bg: #222222;
81+
--input-border: #555555;
82+
83+
/* Message and error containers */
84+
--messages-bg: #282838;
85+
--errors-bg: #282838;
86+
--error-text: #ff6b6b;
87+
88+
/* Filter box and action links */
89+
--filter-border: #3c3c3c;
90+
--filter-action-color: #e0e0e0;
91+
--col-link-color: #e0e0e0;
92+
--col-inactive-hover: #ff7b72;
93+
94+
/* Tables & lists */
95+
--table-header-bg: #222222;
96+
--drag-hover-bg: #303030;
97+
--paginator-curr-bg: #303030;
98+
--paginator-curr-color: #cccccc;
99+
--paginator-na-color: #777777;
100+
--table-border: #3c3c3c;
101+
--bundle-th-bg: #262626;
102+
103+
/* Check states & headers */
104+
--checks-header-bg: #1f244d;
105+
--checks-header-color: #ffffff;
106+
--checks-link-visited: #a599e9;
107+
--checks-success-bg: #2ea043;
108+
--checks-warning-bg: #bb8009;
109+
--checks-fail-bg: #da3633;
110+
--checks-state-default: #888888;
111+
--checks-state-success: #3fb950;
112+
--checks-state-warning: #e3b341;
113+
--checks-state-fail: #f85149;
114+
115+
/* Submission & comments */
116+
--submission-meta-bg: #262626;
117+
--quote-color: #79c0ff;
118+
--acked-color: #79c0ff;
119+
--signed-off-color: #ff9bce;
120+
121+
/* Diff highlighting */
122+
--diff-chunk: #56d4dd;
123+
--diff-add-text: #7ee787;
124+
--diff-add-bg: rgba(46, 160, 67, 0.2);
125+
--diff-del-text: #ffa198;
126+
--diff-del-bg: rgba(248, 81, 73, 0.2);
127+
--diff-mod: #d2a8ff;
128+
129+
/* Boxes & panel headers */
130+
--box-border: #3c3c3c;
131+
--box-header-bg: #2c2c2c;
132+
--box-header-color: #cccccc;
133+
}
134+
68135
h2 {
69136
font-size: 25px;
70137
margin: 18px 0 18px 0;
@@ -706,3 +773,184 @@ div.box table.vertical {
706773
float: right;
707774
width: 49%;
708775
}
776+
777+
/* Dark mode overrides */
778+
html[data-theme="dark"] body {
779+
background-color: var(--body-bg);
780+
color: var(--text-color);
781+
}
782+
783+
html[data-theme="dark"] a {
784+
color: var(--link-color);
785+
}
786+
787+
html[data-theme="dark"] a:hover,
788+
html[data-theme="dark"] a:focus {
789+
color: var(--link-hover-color);
790+
}
791+
792+
html[data-theme="dark"] input,
793+
html[data-theme="dark"] select,
794+
html[data-theme="dark"] textarea {
795+
background-color: #242424;
796+
color: var(--text-color);
797+
border-color: var(--input-border);
798+
}
799+
800+
html[data-theme="dark"] .form-control {
801+
background-color: #242424;
802+
color: var(--text-color);
803+
border-color: var(--input-border);
804+
}
805+
806+
html[data-theme="dark"] .table {
807+
color: var(--text-color);
808+
}
809+
810+
html[data-theme="dark"] .table > thead > tr > th,
811+
html[data-theme="dark"] .table > tbody > tr > th,
812+
html[data-theme="dark"] .table > tfoot > tr > th,
813+
html[data-theme="dark"] .table > thead > tr > td,
814+
html[data-theme="dark"] .table > tbody > tr > td,
815+
html[data-theme="dark"] .table > tfoot > tr > td {
816+
border-top-color: var(--table-border);
817+
}
818+
819+
html[data-theme="dark"] .table > thead > tr > th {
820+
border-bottom-color: var(--table-border);
821+
}
822+
823+
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
824+
background-color: #1f1f1f;
825+
}
826+
827+
html[data-theme="dark"] .table-hover > tbody > tr:hover {
828+
background-color: #2c2c2c;
829+
}
830+
831+
html[data-theme="dark"] .table-bordered {
832+
border-color: var(--table-border);
833+
}
834+
835+
html[data-theme="dark"] .table-bordered > thead > tr > th,
836+
html[data-theme="dark"] .table-bordered > tbody > tr > th,
837+
html[data-theme="dark"] .table-bordered > tfoot > tr > th,
838+
html[data-theme="dark"] .table-bordered > thead > tr > td,
839+
html[data-theme="dark"] .table-bordered > tbody > tr > td,
840+
html[data-theme="dark"] .table-bordered > tfoot > tr > td {
841+
border-color: var(--table-border);
842+
}
843+
844+
html[data-theme="dark"] .thumbnail {
845+
background-color: #202020;
846+
border-color: var(--table-border);
847+
}
848+
849+
html[data-theme="dark"] .thumbnail .caption {
850+
color: var(--text-color);
851+
}
852+
853+
html[data-theme="dark"] .panel {
854+
background-color: #202020;
855+
border-color: var(--table-border);
856+
}
857+
858+
html[data-theme="dark"] .panel-default > .panel-heading {
859+
background-color: #262626;
860+
color: var(--text-color);
861+
border-color: var(--table-border);
862+
}
863+
864+
html[data-theme="dark"] .list-group-item {
865+
background-color: #202020;
866+
border-color: var(--table-border);
867+
color: var(--text-color);
868+
}
869+
870+
html[data-theme="dark"] .dropdown-menu {
871+
background-color: #242424;
872+
border-color: var(--table-border);
873+
}
874+
875+
html[data-theme="dark"] .dropdown-menu > li > a {
876+
color: var(--text-color);
877+
}
878+
879+
html[data-theme="dark"] .dropdown-menu > li > a:hover,
880+
html[data-theme="dark"] .dropdown-menu > li > a:focus {
881+
background-color: #303030;
882+
color: #ffffff;
883+
}
884+
885+
html[data-theme="dark"] .dropdown-menu .divider {
886+
background-color: var(--table-border);
887+
}
888+
889+
html[data-theme="dark"] ul.dropdown-menu > li > form > button {
890+
color: var(--text-color);
891+
}
892+
893+
html[data-theme="dark"] ul.dropdown-menu > li > form > button:hover {
894+
color: #ffffff;
895+
background-color: #303030;
896+
}
897+
898+
html[data-theme="dark"] .btn-default {
899+
background-color: #2b2b2b;
900+
color: var(--text-color);
901+
border-color: var(--input-border);
902+
}
903+
904+
html[data-theme="dark"] .btn-default:hover,
905+
html[data-theme="dark"] .btn-default:focus,
906+
html[data-theme="dark"] .btn-default:active {
907+
background-color: #383838;
908+
color: #ffffff;
909+
border-color: #777777;
910+
}
911+
912+
html[data-theme="dark"] .btn-copy {
913+
color: var(--link-color);
914+
}
915+
916+
html[data-theme="dark"] table.form tr td.submitrow {
917+
border-bottom-color: var(--table-border);
918+
color: var(--text-color);
919+
}
920+
921+
html[data-theme="dark"] table.bundlelist {
922+
border-color: var(--table-border);
923+
}
924+
925+
html[data-theme="dark"] table.bundlelist th {
926+
border-bottom-color: var(--table-border);
927+
}
928+
929+
html[data-theme="dark"] .selectize-input {
930+
background-color: #242424;
931+
border-color: var(--input-border);
932+
color: var(--text-color);
933+
}
934+
935+
html[data-theme="dark"] .selectize-input.full {
936+
background-color: #242424;
937+
}
938+
939+
html[data-theme="dark"] .selectize-input input {
940+
color: var(--text-color);
941+
}
942+
943+
html[data-theme="dark"] .selectize-dropdown {
944+
background-color: #242424;
945+
border-color: var(--input-border);
946+
color: var(--text-color);
947+
}
948+
949+
html[data-theme="dark"] .selectize-dropdown .option {
950+
color: var(--text-color);
951+
}
952+
953+
html[data-theme="dark"] .selectize-dropdown .active {
954+
background-color: #343434;
955+
color: #ffffff;
956+
}

0 commit comments

Comments
 (0)