Files
hugo-coder-timeline/assets/scss/_navigation_dark.scss
Clément Pannetier be7b79af62 Add theme toggle button feature (#358)
* Add theme toggle button feature

* Add theme toggle button feature

* Replaced svg icon with FA icon + fixed indentation + refactored css

* Added back colorsheme configurations + script moved to be process by hugo pipe

* Make release

* Fix toggle button not working when loading new page + setTheme() refactor

* Make release

* Update exampleSite/config.toml

Co-authored-by: Luiz F. A. de Prá <luizdepra@users.noreply.github.com>
2020-08-11 15:51:13 -03:00

53 lines
997 B
SCSS

@mixin navigation_dark {
.navigation {
a, span {
color: $fg-color-dark;
}
a {
&:hover,
&:focus {
color: $link-color-dark;
}
}
.navigation-list {
@media only screen and (max-width : 768px) {
background-color: $bg-color-dark;
border-top: solid 2px $alt-bg-color-dark;
border-bottom: solid 2px $alt-bg-color-dark;
}
.menu-separator {
@media only screen and (max-width : 768px) {
border-top: 2px solid $fg-color-dark;
}
}
}
#menu-toggle {
@media only screen and (max-width : 768px) {
&:checked + label > i {
color: $alt-bg-color-dark;
}
}
}
i {
color: $fg-color-dark;
&:hover,
&:focus {
color: $link-color-dark;
}
}
}
}
body.colorscheme-dark {
@include navigation_dark()
}
body.colorscheme-auto {
@media (prefers-color-scheme: dark) {
@include navigation_dark()
}
}