Skip to content

Commit b7b0ff7

Browse files
Turbo87Turbo87
committed
styles: Implement dark mode via light-dark() fn
This implements a dark mode for the user interface, based on the system theme setting. The `color-scheme` CSS attribute could eventually be overridden if the user does not want to use the system setting.
1 parent 3f0656c commit b7b0ff7

24 files changed

+139
-115
lines changed

‎app/components/crate-downloads-list.module.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
}
1010

1111
.link {
12-
color: #525252;
13-
background-color: #edebdd;
12+
color: light-dark(#525252, #999999);
13+
background-color: light-dark(#edebdd, #141413);
1414
font-size: 90%;
1515
padding: var(--space-s) var(--space-xs);
1616
display: flex;

‎app/components/crate-row.module.css

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
.crate-row {
2-
--shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
2+
--shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);
33

44
display: flex;
55
flex-wrap: wrap;
66
padding: var(--space-s-m) var(--space-m-l);
7-
background-color: white;
7+
background-color: light-dark(white, #141413);
88
border-radius: var(--space-3xs);
99
box-shadow: var(--shadow);
1010
}
@@ -77,6 +77,10 @@
7777
width: calc(1em + 20px);
7878
margin: -10px;
7979
margin-right: calc(var(--space-xs) - 10px);
80+
81+
circle {
82+
fill: none;
83+
}
8084
}
8185
}
8286
}

‎app/components/crate-sidebar.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
cursor: pointer;
8282

8383
&:hover {
84-
background-color: white;
84+
background-color: light-dark(white, #141413);
8585
}
8686
}
8787

‎app/components/dependency-list/row.module.css

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
.row {
22
--bg-color: var(--grey200);
3-
--hover-bg-color: hsl(217, 37%, 98%);
4-
--range-color: var(--grey900);
5-
--crate-color: var(--grey700);
3+
--hover-bg-color: light-dark(hsl(217, 37%, 98%), hsl(204, 3%, 11%));
4+
--range-color: light-dark(var(--grey900), #d1cfc7);
5+
--crate-color: light-dark(var(--grey700), #d1cfc7);
66
--placeholder-opacity: 0.35;
7-
--shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
7+
--shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);
88

99
display: flex;
1010
align-items: center;
1111
position: relative;
1212
font-size: 18px;
1313
padding: var(--space-s) var(--space-m);
14-
background-color: white;
14+
background-color: light-dark(white, #141413);
1515
border-radius: var(--space-3xs);
1616
box-shadow: var(--shadow);
1717
transition: all var(--transition-slow);
@@ -26,8 +26,8 @@
2626
}
2727

2828
&.optional {
29-
--range-color: var(--grey600);
30-
--crate-color: var(--grey600);
29+
--range-color: light-dark(var(--grey600), var(--grey600));
30+
--crate-color: light-dark(var(--grey600), var(--grey600));
3131
--placeholder-opacity: 0.15;
3232
}
3333

‎app/components/dropdown/menu.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
margin: 0;
33
text-align: left;
44
padding: 0;
5-
background: white;
5+
background: light-dark(white, #141413);
66
border: 1px solid var(--gray-border);
77
list-style: none;
88
overflow: hidden;

‎app/components/front-page-list/item.module.css

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
.link {
2-
--shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
2+
--shadow: 0 2px 3px light-dark(hsla(51, 50%, 44%, .35), #232321);
33

44
display: flex;
55
align-items: center;
66
width: 100%;
77
height: var(--space-2xl);
88
padding: 0 var(--space-s);
9-
background-color: white;
10-
color: #525252;
9+
background-color: light-dark(white, #141413);
10+
color: light-dark(#525252, #f9f7ec);
1111
text-decoration: none;
1212
border-radius: var(--space-3xs);
1313
box-shadow: var(--shadow);
@@ -19,8 +19,8 @@
1919
}
2020

2121
&:hover, &:focus-visible {
22-
color: #525252;
23-
background-color: hsl(58deg 72% 97%);
22+
color: light-dark(#525252, #f9f7ec);
23+
background-color: light-dark(hsl(58deg 72% 97%), hsl(204, 3%, 11%));
2424
transition: background-color var(--transition-instant);
2525
}
2626

@@ -48,13 +48,13 @@
4848
.subtitle {
4949
margin-top: var(--space-3xs);
5050
font-size: 13px;
51-
color: rgb(118, 131, 138);
51+
color: light-dark(rgb(118, 131, 138), #cccac2);
5252
}
5353

5454
.right {
5555
flex-shrink: 0;
5656
height: var(--space-s);
5757
width: auto;
5858
margin-left: var(--space-xs);
59-
color: rgb(118, 131, 138);
59+
color: light-dark(rgb(118, 131, 138), #cccac2);
6060
}

‎app/components/front-page-list/item/placeholder.module.css

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
.link {
2-
--shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
3-
--placeholder-bg: hsla(59, 19%, 50%, 1.0);
4-
--placeholder-bg2: hsla(59, 19%, 50%, 0.7);
2+
--shadow: 0 2px 3px light-dark(hsla(51, 50%, 44%, .35), #232321);
3+
--placeholder-bg: light-dark(hsla(59, 19%, 50%, 1.0), hsl(60, 14%, 85%));
4+
--placeholder-bg2: light-dark(hsla(59, 19%, 50%, 0.7), hsla(59, 5%, 50%, 0.7));
55

66
display: flex;
77
align-items: center;
88
width: 100%;
9-
height: 60px;
9+
height: var(--space-2xl);
1010
margin: 8px 0;
11-
padding: 0 15px;
12-
background-color: white;
13-
color: #525252;
14-
border-radius: 5px;
11+
padding: 0 var(--space-s);
12+
background-color: light-dark(white, #141413);
13+
color: light-dark(#525252, #f9f7ec);
14+
border-radius: var(--space-3xs);
1515
box-shadow: var(--shadow);
1616
cursor: wait;
1717
}
@@ -31,15 +31,15 @@
3131
.subtitle {
3232
height: 13px;
3333
width: 90px;
34-
margin-top: 4px;
34+
margin-top: var(--space-3xs);
3535
border-radius: 6.5px;
3636
opacity: 0.2;
3737
}
3838

3939
.right {
4040
flex-shrink: 0;
41-
height: 16px;
41+
height: var(--space-s);
4242
width: auto;
43-
margin-left: 10px;
44-
color: rgb(118, 131, 138);
43+
margin-left: var(--space-xs);
44+
color: light-dark(rgb(118, 131, 138), #cccac2);
4545
}

‎app/components/pagination.module.css

+17
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,23 @@
2323

2424
img, svg { vertical-align: middle; }
2525

26+
27+
.prev, .next {
28+
circle {
29+
fill: none;
30+
}
31+
32+
path {
33+
fill: currentColor;
34+
}
35+
36+
&:hover {
37+
circle {
38+
fill: var(--main-bg-dark);
39+
}
40+
}
41+
}
42+
2643
.next:global(.active),
2744
.prev:global(.active),
2845
.next:hover,

‎app/components/rev-dep-row.module.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
.row {
2-
--hover-bg-color: hsl(217, 37%, 98%);
3-
--crate-color: var(--grey700);
2+
--hover-bg-color: light-dark(hsl(217, 37%, 98%), hsl(204, 3%, 11%));
3+
--crate-color: light-dark(var(--grey700), var(--grey600));
44
--placeholder-opacity: 0.35;
5-
--shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
5+
--shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);
66

77
position: relative;
88
font-size: 18px;
99
padding: var(--space-s) var(--space-m);
10-
background-color: white;
10+
background-color: light-dark(white, #141413);
1111
border-radius: var(--space-3xs);
1212
box-shadow: var(--shadow);
1313
transition: all var(--transition-slow);

‎app/components/search-form.module.css

+3-2
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,12 @@
2525
--search-form-focus-shadow: 0 0 0 var(--space-3xs) var(--yellow500);
2626

2727
border: none;
28-
color: black;
28+
color: light-dark(black, var(--main-color));
29+
background: light-dark(white, hsl(0, 1%, 19%));
2930
width: 100%;
3031
padding: var(--input-padding) var(--input-padding-right) var(--input-padding) var(--input-padding-left);
3132
border-radius: var(--border-radius);
32-
box-shadow: 1px 2px 4px 0 var(--green900);
33+
box-shadow: 1px 2px 4px 0 light-dark(var(--green900), hsl(111, 10%, 8%));
3334
transition: box-shadow var(--transition-fast);
3435

3536
&:focus {

‎app/components/settings/api-tokens.module.css

+8-8
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,15 @@
2222
padding: 0;
2323
list-style: none;
2424
border-radius: var(--space-3xs);
25-
background-color: white;
26-
box-shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
25+
background-color: light-dark(white, #141413);
26+
box-shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);
2727

2828
> * {
2929
padding: var(--space-m);
3030
}
3131

3232
> * + * {
33-
border-top: 1px solid #f1f0ed;
33+
border-top: 1px solid light-dark(hsla(51, 90%, 42%, .25), #424242);
3434
}
3535
}
3636

@@ -102,7 +102,7 @@
102102
grid-template-columns: 1fr auto;
103103
align-items: center;
104104
background: var(--main-color);
105-
color: white;
105+
color: light-dark(white, #141413);
106106
font-family: var(--font-monospace);
107107
border-radius: var(--space-3xs);
108108
margin-top: var(--space-xs);
@@ -120,7 +120,7 @@
120120
cursor: pointer;
121121

122122
&:hover {
123-
color: #ddd8b2;
123+
color: light-dark(#ddd8b2, #65655e);
124124
}
125125
}
126126

@@ -139,10 +139,10 @@
139139
align-content: center;
140140
margin: var(--space-m) 0;
141141
padding: var(--space-xl-2xl);
142-
border: 2px black dashed;
142+
border: 2px light-dark(black, white) dashed;
143143
border-radius: var(--space-3xs);
144-
background-color: white;
145-
box-shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
144+
background-color: light-dark(white, #141413);
145+
box-shadow: 0 2px 3px light-dark(hsla(51, 50%, 45%, .35), #232321);
146146
}
147147

148148
.empty-state-label {

‎app/components/side-menu/item.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,6 @@
1717
color: var(--main-color);
1818

1919
&:hover {
20-
background-color: #e5e1cd;
20+
background-color: light-dark(#e5e1cd, #262522);
2121
}
2222
}

‎app/components/text-content.module.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.boxed {
22
padding: var(--space-m);
3-
background-color: white;
3+
background-color: light-dark(white, #141413);
44
margin-bottom: var(--space-s);
55
border-radius: 5px;
66
}
@@ -25,7 +25,7 @@
2525
display: block;
2626
overflow-x: auto;
2727
padding: var(--space-xs);
28-
background-color: #f6f8fa;
28+
background-color: light-dark(#f6f8fa, #161b22);
2929
font-size: 85%;
3030
border-radius: var(--space-3xs);
3131
}
@@ -40,7 +40,7 @@
4040

4141
p, li {
4242
code {
43-
background-color: #f6f8fa;
43+
background-color: light-dark(#f6f8fa, #383836);
4444
border-radius: var(--space-3xs);
4545
font-size: 85%;
4646
margin: 0;

0 commit comments

Comments
 (0)