Skip to content

Commit ec6c60a

Browse files
doedjedoedje
authored
Made compatible with “Dark mode” setting from the browser (#85)
* Made compatible “Dark mode” setting from the browser * added a better readable color for <a> (certificate downloads) and converted my tabs to spaces. * All colors are carefully selected from the Firefox Web Developer Tool, both dark en light mode. * syntax highlighting with colors from devtools. * default color of .list-row set to #737373 * changed the name of the variable for the default line text color.
1 parent 55dd45c commit ec6c60a

8 files changed

Lines changed: 161 additions & 80 deletions

File tree

‎src/resources/css/buttons.css‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,62 @@
11
.button {
2-
color: currentColor;
3-
text-decoration: currentColor;
2+
color: var(--color-text);
3+
text-decoration: var(--color-text);
44
margin: 4px 0 4px 2px;
55
padding: 3px 6px;
66
align-items: center;
77
display: flex;
88
cursor: pointer;
9-
background-color: #ededed !important;
9+
background-color: var(--color-button-background);
10+
background-repeat: no-repeat;
11+
background-position: 4px 50%;
1012
border-radius: 2px;
1113
}
1214
.button:hover {
13-
background-color: #dedede !important;
15+
background-color: var(--color-button-hover);
1416
}
1517
.button.active {
16-
color: #ffffff;
17-
background-color: #0074e8 !important;
18+
color: var(--color-text-active);
19+
background-color: var(--color-button-active);
1820
}
1921
.button.inactive {
20-
color: #cccccc;
22+
color: var(--color-button-background);
23+
background-color: var(--color-button-disabled);
2124
pointer-events: none;
2225
}
2326
.button.with-icon {
2427
padding: 3px 6px 3px 15px;
2528
}
2629

2730
#button-clear {
28-
background: url("../images/icons/button-clear-default.png") no-repeat 4px 50%;
31+
background-image: var(--button-clear-default);
2932
}
3033
#button-pause {
31-
background: url("../images/icons/button-pause-default.png") no-repeat 4px 50%;
34+
background-image: var(--button-pause-default);
3235
}
3336
#button-pause.button.active {
34-
background: url("../images/icons/button-pause-active.png") no-repeat 4px 50%;
37+
background-image: var(--button-pause-active);
3538
}
3639
#button-autoscroll {
37-
background: url("../images/icons/button-autoscroll-default.png") no-repeat 4px 50%;
40+
background-image: var(--button-autoscroll-default);
3841
}
3942
#button-autoscroll.button.active {
40-
background: url("../images/icons/button-autoscroll-active.png") no-repeat 4px 50%;
43+
background-image: var(--button-autoscroll-active);
4144
}
4245
#button-filter {
43-
background: url("../images/icons/button-filter-default.png") no-repeat 4px 50%;
46+
background-image: var(--button-filter-default);
4447
}
4548
#button-filter.button.active {
46-
background: url("../images/icons/button-filter-active.png") no-repeat 4px 50%;
49+
background-image: var(--button-filter-active);
4750
}
4851
#button-colorize {
49-
background: url("../images/icons/button-colorize-default.png") no-repeat 4px 50%;
52+
background-image: var(--button-colorize-default);
5053
}
5154
#button-colorize.button.active {
52-
background: url("../images/icons/button-colorize-active.png") no-repeat 4px 50%;
55+
background-image: var(--button-colorize-active);
5356
}
5457
#button-export-list {
55-
background: url("../images/icons/button-export-default.png") no-repeat 4px 50%;
58+
background-image: var(--button-export-default);
5659
}
5760
#button-import-list {
58-
background: url("../images/icons/button-import-default.png") no-repeat 4px 50%;
59-
}
61+
background-image: var(--button-import-default);
62+
}

‎src/resources/css/dialog.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.title {
22
font-weight: bold;
3-
border-bottom: 1px dotted #cccccc;
3+
border-bottom: 1px solid var(--color-border);
44
line-height: 20px;
55
}
66

@@ -16,8 +16,8 @@
1616

1717
.errorBox {
1818
display: none;
19-
color: #e66465;
20-
background-color: #ffe7e8;
19+
color: var(--color-error-text);
20+
background-color: var(--color-error-background);
2121
margin-top: 15px;
2222
padding: 5px;
23-
}
23+
}

‎src/resources/css/modal.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
left: 0;
77
width: 100%;
88
height: 100%;
9-
background-color: rgba(150, 150, 150, 0.9);
9+
background-color: var(--color-modal);
1010
display: flex;
1111
justify-content: center;
1212
}
@@ -25,14 +25,14 @@
2525
display: flex;
2626
align-items: center;
2727
justify-content: center;
28-
background: #ffffff url("../images/icons/button-clear-default.png") no-repeat 50%;
28+
background: var(--color-background) var(--button-clear-default) no-repeat 50%;
2929
cursor: pointer;
3030
}
3131
.modal-close:hover {
32-
background: #dedede url("../images/icons/button-clear-default.png") no-repeat 50%;
32+
background: var(--color-button-active) var(--button-clear-default) no-repeat 50%;
3333
}
3434

3535
.modal-content {
3636
padding: 10px;
37-
background-color: #ffffff;
38-
}
37+
background-color: var(--color-background);
38+
}

‎src/resources/css/samltrace.css‎

Lines changed: 116 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,102 @@
1+
:root {
2+
--color-text: #737373;
3+
--color-text-active: white;
4+
--color-background: white;
5+
--color-border: #e0e0e2;
6+
--color-header: #f9f9fa;
7+
--color-button-disabled: #cecece;
8+
--color-button-background: #e6e6e6;
9+
--color-button-active: #0865e0;
10+
--color-button-hover: #dbdbdb;
11+
--color-line-text: #737373;
12+
--color-line-hover: #f0f9fe;
13+
--color-line-selected: #0074e8;
14+
--color-tab-text: #3c3c3c;
15+
--color-tab-hover: #ededf0;
16+
--color-tab-active: #0865e0;
17+
18+
--color-green: green;
19+
--color-orange: orange;
20+
--color-red: red;
21+
--color-modal: rgba(200, 200, 200, 0.6);
22+
--color-error-text: #a4000f;
23+
--color-error-background: #fdf2f5;
24+
--color-syntax: #38383d;
25+
--color-syntax-comment: #737373;
26+
--color-syntax-string: #1951b2;
27+
--color-syntax-keyword: #de04aa;
28+
--color-syntax-section: #107de9;
29+
--color-syntax-tag: #3b3b40;
30+
31+
--button-clear-default: url("../images/icons/button-clear-default.png");
32+
--button-pause-default: url("../images/icons/button-pause-default.png");
33+
--button-pause-active: url("../images/icons/button-pause-active.png");
34+
--button-autoscroll-default: url("../images/icons/button-autoscroll-default.png");
35+
--button-autoscroll-active: url("../images/icons/button-autoscroll-active.png");
36+
--button-filter-default: url("../images/icons/button-filter-default.png");
37+
--button-filter-active: url("../images/icons/button-filter-active.png");
38+
--button-colorize-default: url("../images/icons/button-colorize-default.png");
39+
--button-colorize-active: url("../images/icons/button-colorize-active.png");
40+
--button-export-default: url("../images/icons/button-export-default.png");
41+
--button-import-default: url("../images/icons/button-import-default.png");
42+
}
43+
@media (prefers-color-scheme: dark) {
44+
:root {
45+
--color-text: #d7d7db;
46+
--color-background: #232327;
47+
--color-border: #38383d;
48+
--color-header: #0c0c0d;
49+
--color-button-disabled: #353535;
50+
--color-button-background: #4e4e51;
51+
--color-button-hover: #58585c;
52+
--color-line-hover: #353b48;
53+
--color-line-selected: #204e8a;
54+
--color-tab-text: #b3b3b3;
55+
--color-tab-hover: #232327;
56+
--color-tab-active: white;
57+
58+
--color-green: #007B00;
59+
--color-orange: #AA8517;;
60+
--color-red: #a63434;
61+
--color-modal: rgba(50, 50, 50, 0.6);
62+
--color-error-text: #fbb0cf;
63+
--color-error-background: #4b2f36;
64+
--color-syntax: #c8c8cc;
65+
--color-syntax-comment: #737373;
66+
--color-syntax-string: #a580e2;
67+
--color-syntax-keyword: #ff7de9;
68+
--color-syntax-section: #75bfff;
69+
--color-syntax-tag: #b1b1b3;
70+
71+
--button-clear-default: url("../images/icons/button-clear-active.png");
72+
--button-pause-default: url("../images/icons/button-pause-active.png");
73+
--button-autoscroll-default: url("../images/icons/button-autoscroll-active.png");
74+
--button-filter-default: url("../images/icons/button-filter-active.png");
75+
--button-colorize-default: url("../images/icons/button-colorize-active.png");
76+
--button-export-default: url("../images/icons/button-export-active.png");
77+
--button-import-default: url("../images/icons/button-import-active.png");
78+
}
79+
}
80+
181
body {
282
height: 100%;
383
margin: 0;
484
padding: 0;
5-
background-color: #ffffff;
85+
background-color: var(--color-background);
686
overflow-y: hidden;
787
font-family: Arial, Helvetica, sans-serif;
888
font-size: 8pt;
9-
color: #444444;
89+
color: var(--color-text);
1090
}
1191

1292
iframe {
1393
border: none;
1494
}
1595

96+
a {
97+
color: var(--color-button-active);
98+
}
99+
16100
.not-selectable {
17101
user-select: none;
18102
-moz-user-select: none;
@@ -26,8 +110,8 @@ iframe {
26110

27111
#header {
28112
height: 24px;
29-
background-color: #f9f9fa;
30-
border-bottom: 1px solid #e0e0e0;
113+
background-color: var(--color-background);
114+
border-bottom: 1px solid var(--color-border);
31115
display: flex;
32116
flex-direction: row;
33117
}
@@ -38,82 +122,80 @@ iframe {
38122
}
39123

40124
#dragger {
41-
background-color: #e0e0e0;
125+
background-color: var(--color-border);
42126
height: 4px;
43127
cursor: ns-resize;
44128
}
45129

46130
#request-info-tabbox {
47131
overflow: hidden;
48132
height: 25px;
49-
background-color: #f9f9fa;
50-
border-bottom: 1px solid #e0e0e0;
133+
background-color: var(--color-header);
134+
border-bottom: 1px solid var(--color-border);
51135
display: flex;
52136
}
53137

54138
a.tab {
55139
float: left;
56140
padding: 4px 10px;
57141
align-self: flex-end;
58-
color: #444444;
142+
color: var(--color-tab-text);
59143
text-decoration: none;
60144
}
61145

62146
a.tab.selected {
63-
color: #0074e8;
64-
border-top: 2px solid #0074e8;
65-
background-color: #ffffff;
147+
color: var(--color-tab-active);
148+
border-top: 2px solid var(--color-button-active);
66149
box-shadow: unset;
67150
}
68-
69151
a.tab:hover {
70-
border-top: 2px solid #bebebe;
71-
background-color: #ededed;
152+
border-top: 2px solid var(--color-border);
153+
background-color: var(--color-tab-hover);
154+
}
155+
a.tab.selected:hover {
156+
border-top: 2px solid var(--color-button-active);
72157
}
73158

74159
#request-info-content {
75160
padding: 2px;
76161
overflow-y: scroll;
77162
word-wrap: break-word;
78163
white-space: pre-wrap;
79-
font-family: Consolas, "Lucida Console", Courier, monospace;
164+
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Lucida Console", "Liberation Mono", "Courier New", Courier, monospace;
80165
}
81166

82167
#statuspanel {
83168
bottom: 0;
84169
height: 22px;
85170
padding: 3px 0 0 3px;
86-
border-top: 1px solid #e0e0e0;
171+
border-top: 1px solid var(--color-border);
87172
}
88173

89174
.list-row {
90175
overflow: hidden;
91176
display: flex;
92177
white-space: nowrap;
93-
border-bottom: 1px dotted #cccccc;
94-
color: #999999;
178+
border-bottom: 1px solid var(--color-border);
179+
color: var(--color-line-text);
95180
}
96181
.list-row:hover {
97-
background-color: #E6F0FA;
182+
background-color: var(--color-line-hover);
98183
}
99184
.list-row.monochrome {
100185
color: unset;
101186
}
102-
.list-row.selected {
103-
color: #96C8F5;
104-
background-color: #0074e8;
105-
}
187+
.list-row.selected,
106188
.list-row.selected:hover {
107-
color: #96C8F5;
108-
background-color: #0074e8;
189+
color: var(--color-text-active);
190+
background-color: var(--color-line-selected);
109191
}
110192
.list-row.isResource {
111193
height: 0;
112194
border-bottom: none;
113195
}
114196
.list-row.isResource.displayAnyway {
115197
height: unset;
116-
border-bottom: 1px dotted #cccccc;
198+
border-bottom: 1px solid var(--color-border);
117199
}
118200

119201
.request-method {
@@ -127,22 +209,22 @@ a.tab:hover {
127209
}
128210

129211
.request-info {
130-
color: black;
212+
color: var(--color-text);
131213
}
132214
.request-ok {
133-
color: green;
215+
color: var(--color-green);
134216
}
135217
.request-redirect {
136-
color: orange;
218+
color: var(--color-orange);
137219
}
138220
.request-clerror{
139-
color: red;
221+
color: var(--color-red);
140222
}
141223
.request-srerror{
142-
color: red;
224+
color: var(--color-red);
143225
}
144226
.request-other{
145-
color: black;
227+
color: var(--color-text);
146228
}
147229

148230
.saml-logo {
@@ -166,7 +248,8 @@ a.tab:hover {
166248
}
167249

168250
#summary table th {
169-
background-color:#eee;
251+
color: var(--color-text);
252+
background-color: var(--color-border);
170253
}
171254

172255
#summary table td {

0 commit comments

Comments
 (0)