Skip to content

Commit 19936f3

Browse files
huacnleehuacnlee
committed
Add Dark mode
1 parent 5235a0f commit 19936f3

File tree

2 files changed

+128
-46
lines changed

2 files changed

+128
-46
lines changed

‎app/assets/stylesheets/exception-track/application.css‎

Lines changed: 126 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,78 @@
1+
:root {
2+
--body-background-color: #eee;
3+
--card-background-color: #fff;
4+
--card-border-color: #fff;
5+
--card-shadow-color: rgba(200, 200, 200, 0.26);
6+
--text-color: #333;
7+
--text-color1: #666;
8+
--text-color2: #999;
9+
--link-color: #364cc9;
10+
--table-background-color1: #f5f5f5;
11+
--table-border-color: #f0f0f0;
12+
--input-border-color: #ddd;
13+
--button-background-color: #fff;
14+
--button-border-color: #eee;
15+
--button-text-color: #555;
16+
--button-hover-background-color: #f7f7f7;
17+
--button-hover-border-color: #eee;
18+
--button-danger-color: #f85149;
19+
--button-danger-hover-background-color: #f85149;
20+
--button-danger-hover-color: #fff;
21+
--pre-background-color: #f7f7f7;
22+
--notice-color: #fff;
23+
--notice-background-color: #3CBD46;
24+
}
25+
26+
@media (prefers-color-scheme: dark) {
27+
:root {
28+
--body-background-color: #0d1117;
29+
--card-background-color: rgba(200, 200, 200, 0.02);
30+
--card-border-color: #30363d;
31+
--card-shadow-color: rgba(0, 0, 0, 0.16);
32+
--text-color: #c9d1d9;
33+
--text-color1: #999;
34+
--text-color2: #888;
35+
--link-color: #58a6ff;
36+
--table-background-color1: #161b22;
37+
--table-border-color: #30363d;
38+
--input-border-color: #333;
39+
--button-background-color: #21262d;
40+
--button-border-color: #30363d;
41+
--button-text-color: #c9d1d9;
42+
--button-hover-background-color: #30363d;
43+
--button-hover-border-color: #8b949e;
44+
--pre-background-color: #161b22;
45+
--notice-color: #3CBD46;
46+
--notice-background-color: #3cbd4621;
47+
}
48+
}
149

250
body {
351
margin: 0;
452
padding: 20px 0;
5-
background-color: #eee;
53+
background-color: var(--body-background-color);
654
}
755

856
body, textarea {
957
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, Helvetica, sans-serif;
1058
font-size: 14px;
1159
line-height: 1.4;
12-
color: #333;
60+
color: var(--text-color);
1361
}
1462

1563
.footer {
1664
padding: 15px;
1765
text-align: center;
18-
color: #999;
66+
color: var(--text-color2);
67+
}
68+
69+
.footer a:link, .footer a:visited {
70+
color: var(--text-color1);
71+
text-decoration: underline;
1972
}
20-
.footer a:link,
21-
.footer a:visited { color: #666; text-decoration: underline;}
2273

2374
a, a:visited, a:active {
24-
color: #364cc9;
75+
color: var(--link-color);
2576
text-decoration: none;
2677
}
2778

@@ -34,15 +85,15 @@ table {
3485
border-collapse: collapse;
3586
border-spacing: 0;
3687
margin-bottom: 20px;
88+
border: 1px solid var(--table-border-color);
89+
border-radius: 3px;
3790
}
3891

39-
th {
40-
text-align: left;
41-
border-bottom: solid 1px #e0e0e0;
92+
td.date {
93+
width: 170px;
94+
font-size: 12px;
4295
}
4396

44-
td.date { width: 150px; font-size: 12px; }
45-
4697
h1 {
4798
margin-top: 0;
4899
font-size: 20px;
@@ -66,29 +117,28 @@ ul {
66117
table td, table th {
67118
padding: 10px 15px;
68119
}
69-
th { background: #f5f5f5; border-bottom: 1px solid #e0e0e0; }
70-
td {
71-
border-top: solid 1px #e0e0e0;
120+
121+
th {
122+
text-align: left;
123+
background: var(--table-background-color1);
124+
border-bottom: 1px solid var(--table-border-color);
72125
}
73126

74-
pre {
75-
background-color: #eee;
76-
padding: 10px;
77-
white-space: pre-wrap;
78-
word-break: break-word;
127+
td {
128+
border-top: solid 1px var(--table-border-color);
79129
}
80130

81131
textarea {
82132
width: 100%;
83133
height: 100px;
84-
border: solid 1px #ddd;
134+
border: solid 1px var(--input-border-color);
85135
padding: 10px;
86136
}
87137

88138
hr {
89139
border: none;
90140
height: 0;
91-
border-top: solid 1px #ddd;
141+
border-top: solid 1px var(--input-border-color);
92142
margin-bottom: 15px;
93143
}
94144

@@ -107,25 +157,39 @@ hr {
107157
-ms-user-select: none;
108158
user-select: none;
109159
border-radius: 3px;
110-
border: 1px solid #ccc;
160+
transition: .2s cubic-bezier(.3, 0, .5, 1);
161+
transition-property: color, background-color, border-color;
162+
border: 1px solid var(--button-border-color);
111163
padding: 6px 16px;
112-
color: #555 !important;
164+
color: var(--button-text-color) !important;
113165
outline: 0 !important;
114-
background: #FFF;
166+
background: var(--button-background-color);
115167
}
116-
.btn:hover { text-decoration: none !important; background: #f7f7f7; }
117-
.btn-danger { background: #fff; color: #E33F00 !important; border-color: #E33F00;}
168+
169+
.btn:hover {
170+
text-decoration: none !important;
171+
background: var(--button-hover-background-color);
172+
}
173+
174+
.btn-danger {
175+
background: var(--button-background-color);
176+
color: var(--button-danger-color) !important;
177+
border-color: var(--button-border-color);
178+
}
179+
118180
.btn-danger:hover {
119-
background: #FCEDEC;
181+
background: var(--button-danger-hover-background-color);
182+
color: var(--button-danger-hover-color) !important;
120183
}
121184

122185
.container {
123186
max-width: 1000px;
124187
margin-left: auto;
125188
margin-right: auto;
126189
padding: 20px;
127-
background-color: #fff;
128-
box-shadow: 0 1px 8px rgba(200, 200, 200, 0.26);
190+
background-color: var(--card-background-color);
191+
box-shadow: 0 1px 8px var(--card-shadow-color);
192+
border: 1px solid var(--card-border-color);
129193
border-radius: 3px;
130194
}
131195

@@ -140,49 +204,67 @@ hr {
140204
height: 34px;
141205
line-height: 34px;
142206
}
143-
.toolbar form { display: inline; }
144-
.toolbar .pull-right { float: right; }
207+
208+
.toolbar form {
209+
display: inline;
210+
}
211+
212+
.toolbar .pull-right {
213+
float: right;
214+
}
145215

146216
#notice {
147217
padding: 8px 15px;
148-
background: #3CBD46;
149-
color: #fff;
218+
background: var(--notice-background-color);
219+
color: var(--notice-color);
150220
margin-bottom: 15px;
151221
border-radius: 3px;
152222
}
153223

154224
pre {
155-
background: #f7f7f7;
225+
white-space: pre-wrap;
226+
word-break: break-word;
227+
background: var(--pre-background-color);
156228
padding: 25px;
157229
border-radius: 3px;
158230
font-size: 12px;
159231
font-family: Menlo, Monaco, Consolas, monospace;
160232
}
161233

162-
h1 { font-size: 16px; }
234+
h1 {
235+
font-size: 16px;
236+
}
163237

164238
.pagination {
165239
padding-bottom: 15px;
166240
font-size: 14px;
167241
}
168242

169-
.pagination li { display: inline; }
243+
.pagination li {
244+
display: inline;
245+
}
170246

171247
.pagination a {
172248
display: inline-block;
173249
padding: 5px 10px;
174-
border: 1px solid #eee;
175-
color: #555;
250+
border-radius: 3px;
251+
border: 1px solid var(--button-border-color);
252+
color: var(--button-text-color);
253+
background: var(--button-background-color);
176254
text-decoration: none;
177255
}
256+
178257
.pagination a:hover {
179-
background: #f7f7f7;
258+
background: var(--button-hover-background-color);
259+
color: var(--button-hover-color);
260+
border-color: var(--button-hover-border-color);
180261
}
181-
.pagination em,
182-
.pagination .current {
262+
263+
.pagination em, .pagination .current {
264+
border-radius: 3px;
183265
display: inline-block;
184266
padding: 5px 10px;
185-
border: 1px solid #f0f0f0;
186-
background: #f0f0f0;
267+
border: 1px solid var(--button-hover-border-color);
268+
background: var(--button-hover-background-color);
187269
font-style: normal;
188-
}
270+
}

‎app/views/exception_track/logs/index.html.erb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
}
77
</script>
88
<div class="toolbar">
9-
<a class="btn" href="/">Back to app </a>
9+
<a class="btn" href="/">Back to App</a>
1010

1111
<div class="pull-right">
1212
<%= form_tag(export_logs_path, method: 'post') do %>
@@ -21,7 +21,7 @@
2121
<% if @logs.blank? %>
2222
<div class="no-record">No exceptions.</div>
2323
<% else %>
24-
<h1> <%= pluralize(@logs.total_count, 'exception') %></h1>
24+
<h1><%= pluralize(@logs.total_count, 'exception') %></h1>
2525
<%= paginate @logs %>
2626

2727
<table class="table table-borded tabl">

0 commit comments

Comments
 (0)