-
Notifications
You must be signed in to change notification settings - Fork 0
/
_theme.scss
40 lines (35 loc) · 988 Bytes
/
_theme.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/*=============== THEME ===============*/
/*========== Variables Dark theme ==========*/
body.dark-theme{
--first-color-dark: hsl(var(--hue), 8%, 20%);
--title-color: hsl(var(--hue), 4%, 95%);
--text-color: hsl(var(--hue), 4%, 75%);
--body-color: hsl(var(--hue), 8%, 12%);
--container-color: hsl(var(--hue), 8%, 16%);
}
/*========== Button Dark/Light ==========*/
.change-theme {
color: var(--title-color);
font-size: 1.15rem;
cursor: pointer;
}
.nav__btns{
display: inline-flex;
align-items: center;
column-gap: 1rem;
}
/*==========
Color changes in some parts of
the website, in dark theme
==========*/
.dark-theme .steps__bg,
.dark-theme .questions{
background-color: var(--first-color-dark);
}
.dark-theme .product__circle,
.dark-theme .footer__subscribe{
background-color: var(--container-color);
}
.dark-theme .scroll-header{
box-shadow: 0 1px 4px hsla(var(--hue), 4%, 4%, .3);
}