kaholaz/hello-friend-ng
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a theme toggle

Browse source
This commit is contained in:
Djordje Atlialp 2021-04-07 19:10:40 +02:00
parent 128e1be607
commit a64d27b8fc
11 changed files with 278 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

44
assets/scss/_buttons.scss
View file

@ -13,7 +13,6 @@ a.button {
justify-content: center;
padding: 8px 18px;
margin-bottom: 5px;
background: $light-background-secondary;
text-decoration: none;
text-align: center;
font-weight: 500;
@ -24,13 +23,25 @@ a.button {
outline: none;
@media (prefers-color-scheme: dark) {
background: $dark-background-secondary;
background: $dark-background-header;
color: inherit;
}
@media (prefers-color-scheme: light) {
background: $light-background-header;
}
[data-theme=dark] & {
background: $dark-background-header;
color: inherit;
}
[data-theme=light] & {
background: $light-background-header;
}
&.outline {
background: transparent;
border-color: $light-background-secondary;
box-shadow: none;
padding: 8px 18px;
@ -38,6 +49,19 @@ a.button {
border-color: $dark-background-secondary;
color: inherit;
}
@media (prefers-color-scheme: light) {
border-color: $light-background-secondary;
}
[data-theme=dark] & {
border-color: $dark-background-secondary;
color: inherit;
}
[data-theme=light] & {
border-color: $light-background-secondary;
}
:hover {
transform: none;
@ -78,7 +102,6 @@ a.button {
justify-content: center;
padding: 3px 8px;
margin-bottom: 5px;
background: $light-background-secondary;
text-decoration: none;
text-align: center;
font-size: 13px;
@ -93,5 +116,18 @@ a.button {
background: $dark-background-secondary;
color: inherit;
}
@media (prefers-color-scheme: light) {
background: $light-background-secondary;
}
[data-theme=dark] & {
background: $dark-background-secondary;
color: inherit;
}
[data-theme=light] & {
background: $light-background-secondary;
}
}
}