Skip to content

Commit dbf4eb6

Browse files
FrontendlandFrontendland
committed
✨ Add ThemeSwitcher component
1 parent 499dbd4 commit dbf4eb6

37 files changed

+911
-74
lines changed

‎astro.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import react from '@astrojs/react'
66
export default defineConfig({
77
outDir: 'build',
88
trailingSlash: 'never',
9+
output: 'server',
910
integrations: [
1011
svelte(),
1112
react()

‎public/img/logo-light.png‎

851 Bytes
Loading

‎public/img/logo.png‎

173 Bytes
Loading

‎public/img/logo.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎src/components/Alert/alert.module.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,23 @@
1515
}
1616

1717
&.info {
18-
border: 1px solid #0abde3;
19-
color: #0abde3;
18+
border: 1px solid var(--w-color-info);
19+
color: var(--w-color-info);
2020
}
2121

2222
&.success {
23-
border: 1px solid #1dd1a1;
24-
color: #1dd1a1;
23+
border: 1px solid var(--w-color-success);
24+
color: var(--w-color-success);
2525
}
2626

2727
&.warning {
28-
border: 1px solid #ff9f43;
29-
color: #ff9f43;
28+
border: 1px solid var(--w-color-warning);
29+
color: var(--w-color-warning);
3030
}
3131

3232
&.alert {
33-
border: 1px solid #e73f40;
34-
color: #e73f40;
33+
border: 1px solid var(--w-color-alert);
34+
color: var(--w-color-alert);
3535
}
3636

3737
svg {

‎src/components/Badge/badge.module.scss‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,19 +34,19 @@
3434
}
3535

3636
&.info:hover {
37-
background: #48dbfb;
37+
background: var(--w-color-info-accent);
3838
}
3939

4040
&.success:hover {
41-
background: #1dd1a1;
41+
background: var(--w-color-success-accent);
4242
}
4343

4444
&.warning:hover {
45-
background: #f7aa61;
45+
background: var(--w-color-warning-accent);
4646
}
4747

4848
&.alert:hover {
49-
background: #ee5253;
49+
background: var(--w-color-alert-accent);
5050
}
5151
}
5252

@@ -63,24 +63,27 @@
6363
}
6464

6565
&.flat {
66-
background: var(--w-color-primary-70);;
66+
background: var(--w-color-primary-70);
6767
color: var(--w-color-primary);
6868
}
6969

7070
&.info {
71-
background: #0abde3;
71+
background: var(--w-color-info);
72+
color: var(--w-color-info-fg);
7273
}
7374

7475
&.success {
75-
background: #10ac84;
76+
background: var(--w-color-success);
77+
color: var(--w-color-success-fg);
7678
}
7779

7880
&.warning {
79-
background: #ff9f43;
81+
background: var(--w-color-warning);
82+
color: var(--w-color-warning-fg);
8083
}
8184

8285
&.alert {
83-
background: #e73f40;
84-
color: var(--w-color-primary);
86+
background: var(--w-color-alert);
87+
color: var(--w-color-alert-fg);
8588
}
8689
}

‎src/components/Button/button.module.scss‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -53,35 +53,38 @@
5353
}
5454

5555
&.info {
56-
background: #0abde3;
56+
background: var(--w-color-info);
57+
color: var(--w-color-info-fg);
5758

5859
&:hover {
59-
background: #48dbfb;
60+
background: var(--w-color-info-accent);
6061
}
6162
}
6263

6364
&.success {
64-
background: #10ac84;
65+
background: var(--w-color-success);
66+
color: var(--w-color-success-fg);
6567

6668
&:hover {
67-
background: #1dd1a1;
69+
background: var(--w-color-success-accent);
6870
}
6971
}
7072

7173
&.warning {
72-
background: #ff9f43;
74+
background: var(--w-color-warning);
75+
color: var(--w-color-warning-fg);
7376

7477
&:hover {
75-
background: #f7aa61;
78+
background: var(--w-color-warning-accent);
7679
}
7780
}
7881

7982
&.alert {
80-
background: #e73f40;
81-
color: var(--w-color-primary);
83+
background: var(--w-color-alert);
84+
color: var(--w-color-alert-fg);
8285

8386
&:hover {
84-
background: #ee5253;
87+
background: var(--w-color-alert-accent);
8588
}
8689
}
8790

‎src/components/Icon/map.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import Check from '../../icons/check.svg?raw'
44
import CircleCheck from '../../icons/circle-check.svg?raw'
55
import Github from '../../icons/github.svg?raw'
66
import Info from '../../icons/info.svg?raw'
7+
import Moon from '../../icons/moon.svg?raw'
8+
import Sun from '../../icons/sun.svg?raw'
79
import Warning from '../../icons/warning.svg?raw'
810

911
const iconMap = {
@@ -13,6 +15,8 @@ const iconMap = {
1315
'circle-check': CircleCheck,
1416
'github': Github,
1517
'info': Info,
18+
'moon': Moon,
19+
'sun': Sun,
1620
'warning': Warning
1721
}
1822

‎src/components/Input/input.module.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
color: var(--w-color-primary);
1010
line-height: 20px;
1111
width: 100%;
12-
color-scheme: dark;
12+
color-scheme: var(--w-color-scheme);
1313

1414
&[disabled] {
1515
cursor: no-drop;
@@ -22,6 +22,10 @@
2222
color: var(--w-color-primary);
2323
}
2424

25+
&::placeholder {
26+
color: var(--w-color-primary-30);
27+
}
28+
2529
&[type="color"] {
2630
padding: 0;
2731
}

‎src/components/Menu/Menu.astro‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const containerClasses = [
2424
wrapperClassName
2525
]
2626
27-
const wrapMenu = logo?.url && items?.length && Astro.slots.has('default')
27+
const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('default')
2828
---
2929

3030
<header class:list={classes}>
@@ -33,7 +33,7 @@ const wrapMenu = logo?.url && items?.length && Astro.slots.has('default')
3333
<div slot="wrapper" class={styles.wrapper}>
3434
children
3535
</div>
36-
{logo?.url && !centerLogo && (
36+
{logo?.url && !centerLogo && (
3737
<a href="/">
3838
<img
3939
src={logo.url}
@@ -44,6 +44,12 @@ const wrapMenu = logo?.url && items?.length && Astro.slots.has('default')
4444
</a>
4545
)}
4646

47+
{!centerLogo && logo?.html && (
48+
<a href="/">
49+
<Fragment set:html={logo.html} />
50+
</a>
51+
)}
52+
4753
{items?.length && (
4854
<ul>
4955
{items.map(item => (
@@ -66,6 +72,12 @@ const wrapMenu = logo?.url && items?.length && Astro.slots.has('default')
6672
</button>
6773
)}
6874

75+
{centerLogo && logo?.html && (
76+
<a href="/">
77+
<Fragment set:html={logo.html} />
78+
</a>
79+
)}
80+
6981
{logo?.url && centerLogo && (
7082
<a href="/">
7183
<img
@@ -86,7 +98,7 @@ const wrapMenu = logo?.url && items?.length && Astro.slots.has('default')
8698
.querySelector('[data-id="hamburger"]')
8799
?.addEventListener('click', event => {
88100
const hamburger = event.currentTarget as HTMLDivElement
89-
const header = hamburger.parentElement as HTMLHeadElement
101+
const header = hamburger.parentElement?.parentElement as HTMLHeadElement
90102

91103
header.dataset.active = header.dataset.active === 'true'
92104
? 'false'

0 commit comments

Comments
 (0)