Skip to content

Commit cc02040

Browse files
Turbo87Turbo87
authored
Merge pull request #8559 from Turbo87/dark-mode
Implement dark mode via `light-dark()` fn
2 parents 21150de + edcf04e commit cc02040

37 files changed

+273
-118
lines changed

‎app/components/color-scheme-menu.hbs

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<Dropdown local-class="dropdown" data-test-dark-mode-menu ...attributes as |dd|>
2+
<dd.Trigger @hideArrow={{true}} local-class="trigger" data-test-dark-mode-toggle>
3+
{{svg-jar this.icon local-class="icon"}}
4+
<span local-class="trigger-label">Change color scheme</span>
5+
</dd.Trigger>
6+
7+
<dd.Menu local-class="menu" as |menu|>
8+
{{#each this.colorSchemes as |colorScheme|}}
9+
<menu.Item>
10+
<button
11+
local-class="menu-button {{if (eq colorScheme.mode this.colorScheme.scheme) 'selected'}}"
12+
type="button"
13+
{{on 'click' (fn this.colorScheme.set colorScheme.mode)}}
14+
>
15+
{{svg-jar colorScheme.svg local-class="icon"}} {{colorScheme.mode}}
16+
</button>
17+
</menu.Item>
18+
{{/each}}
19+
</dd.Menu>
20+
</Dropdown>

‎app/components/color-scheme-menu.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { inject as service } from '@ember/service';
2+
import Component from '@glimmer/component';
3+
4+
export default class Header extends Component {
5+
/** @type {import("../services/dark-mode").default} */
6+
@service colorScheme;
7+
8+
colorSchemes = [
9+
{ mode: 'light', svg: 'sun' },
10+
{ mode: 'dark', svg: 'moon' },
11+
{ mode: 'system', svg: 'color-mode' },
12+
];
13+
14+
get icon() {
15+
return this.colorSchemes.find(({ mode }) => mode === this.colorScheme.scheme)?.svg;
16+
}
17+
}

‎app/components/color-scheme-menu.module.css

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.dropdown {
2+
line-height: 1rem;
3+
}
4+
5+
.icon {
6+
width: 1.4em;
7+
height: auto;
8+
}
9+
10+
.trigger {
11+
background: none;
12+
border: 0;
13+
padding: 0;
14+
}
15+
16+
.trigger-label {
17+
composes: sr-only from '../styles/shared/a11y.module.css'
18+
}
19+
20+
.menu {
21+
right: 0;
22+
min-width: max-content;
23+
}
24+
25+
.menu-button {
26+
composes: button-reset from '../styles/shared/buttons.module.css';
27+
align-items: center;
28+
gap: var(--space-2xs);
29+
cursor: pointer;
30+
text-transform: capitalize;
31+
}
32+
33+
.selected {
34+
background: light-dark(#e6e6e6, #404040);
35+
}

‎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/dropdown/trigger.hbs

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<button type="button" local-class="button" {{on "click" @toggle}} ...attributes>
22
{{yield}}
3-
<span local-class="arrow"></span>
3+
{{#unless @hideArrow}}
4+
<span local-class="arrow"></span>
5+
{{/unless}}
46
</button>

‎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/header.hbs

+4
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
</div>
1515

1616
<nav local-class='nav'>
17+
<ColorSchemeMenu local-class="color-scheme-menu" />
18+
1719
<LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>
1820
Browse All Crates
1921
</LinkTo>
@@ -81,6 +83,8 @@
8183
</nav>
8284

8385
<div local-class='menu'>
86+
<ColorSchemeMenu local-class="color-scheme-menu" />
87+
8488
<Dropdown as |dd|>
8589
<dd.Trigger local-class="dropdown-button">
8690
Menu

‎app/components/header.module.css

+7-2
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@
101101
.nav {
102102
grid-area: nav;
103103
display: flex;
104-
align-items: stretch;
104+
align-items: center;
105105
justify-self: end;
106106

107107
@media only screen and (max-width: 900px) {
@@ -115,14 +115,19 @@
115115
display: none;
116116

117117
@media only screen and (max-width: 900px) {
118-
display: block;
118+
display: flex;
119+
align-items: center;
119120
}
120121
}
121122

122123
.menu-item-with-separator {
123124
border-top: 1px solid var(--gray-border);
124125
}
125126

127+
.color-scheme-menu {
128+
margin-right: var(--space-xs);
129+
}
130+
126131
.login-button {
127132
composes: button-reset from '../styles/shared/buttons.module.css';
128133
display: inline-flex;

‎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 {

0 commit comments

Comments
 (0)