e30a46bbfa
* Dark Mode + Theming * Themes scss file created with default color scheme and dark color scheme. * Logic for managing dark mode toggle added. * Modified existing scss/html to work with theme toggling. * Fixed hover issues * Added enable_darkmode to configs. * Added the requested option of disabling/enabling dark mode via config files.
44 lines
1.2 KiB
SCSS
44 lines
1.2 KiB
SCSS
/*******************************************************************************
|
|
* Themes
|
|
******************************************************************************/
|
|
|
|
:root {
|
|
--global-bg-color: #{$white-color};
|
|
--global-text-color: #{$black-color};
|
|
--global-theme-color: #{$purple-color};
|
|
--global-hover-color: #{$light-purple-color};
|
|
--global-footer-bg-color: #{$grey-color-dark};
|
|
--global-footer-text-color: #{$grey-color-light};
|
|
--global-footer-link-color: #{$white-color};
|
|
--global-icon-color: #{$grey-color-dark};
|
|
|
|
.fa-sun {
|
|
display : none;
|
|
}
|
|
.fa-moon {
|
|
padding-left: 10px;
|
|
padding-top: 12px;
|
|
display : block;
|
|
}
|
|
}
|
|
|
|
html[data-theme='dark'] {
|
|
--global-bg-color: #{$grey-color-dark};
|
|
--global-text-color: #{$grey-color-light};
|
|
--global-theme-color: #{$cyan-color};
|
|
--global-hover-color: #{$light-cyan-color};
|
|
--global-footer-bg-color: #{$grey-color-light};
|
|
--global-footer-text-color: #{$grey-color-dark};
|
|
--global-footer-link-color: #{$black-color};
|
|
--global-icon-color: navajowhite;
|
|
|
|
.fa-sun {
|
|
padding-left: 10px;
|
|
padding-top: 12px;
|
|
display : block;
|
|
}
|
|
.fa-moon {
|
|
display : none;
|
|
}
|
|
}
|