FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement proper dark mode (#800)

Browse source 
* Implement proper dark mode

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Fix footer color in light mode

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

---------

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
Emruz Hossain 2023-09-30 05:04:48 +06:00 • committed by GitHub
parent 6dc9d1d33d
commit 5f0aebcf68
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 1136 additions and 353 deletions
Download patch file Download diff file Expand all files Collapse all files

145
assets/styles/navigators/navbar.scss
View file

@ -1,8 +1,14 @@
@mixin nav-item-hover-effect() {
color: $accent-color !important;
border-bottom: 2px solid $accent-color !important;
background: rgba($accent-color, 0.1);
@mixin nav-item-hover-effect($theme: 'light') {
color: get-light-color('accent-color') !important;
border-bottom: 2px solid get-light-color('accent-color') !important;
background: rgba(get-light-color('accent-color'), 0.1);
@include transition();
@if $theme == 'dark' {
color: get-dark-color('accent-color') !important;
border-bottom: 2px solid get-dark-color('accent-color') !important;
background: rgba(get-dark-color('accent-color'), 0.1);
}
}
.top-navbar {
@ -14,13 +20,13 @@
z-index: 99999;
margin: 0px;
padding-top: 0.4rem;
color: $heading-color;
color: get-light-color('heading-color');
text-align: center;
background-color: $bg-primary;
background-color: get-light-color('bg-primary');
@include transition();
.navbar-brand {
color: $heading-color;
color: get-light-color('heading-color');
font-weight: 600;
img {
width: 42px;
@ -41,7 +47,8 @@
li {
a {
color: $heading-color;
color: get-light-color('heading-color');
text-decoration: none !important;
font-weight: 500;
@include transition();
border-bottom: 2px solid transparent;
@ -57,14 +64,14 @@
#top-navbar-divider {
margin-top: 10px;
background-color: $muted-text-color;
background-color: get-light-color('muted-text-color');
height: 20px;
width: 2px;
}
.dropdown-menu {
box-shadow: $box-shadow;
border: 1px solid $border-color;
border: 1px solid rgba(get-light-color('accent-color'), 0.1);
max-height: 0vh;
overflow: hidden;
display: block;
@ -77,7 +84,7 @@
@include transition();
a {
color: $heading-color !important;
color: get-light-color('heading-color') !important;
&:hover {
@include nav-item-hover-effect();
@ -90,40 +97,51 @@
margin-top: -5px;
&.show,
&.collapsing {
background-color: $bg-primary;
background-color: get-light-color('bg-primary');
padding-left: 1rem;
li {
a {
color: $heading-color;
color: get-light-color('heading-color');
font-weight: 500;
@include transition();
}
}
.navbar-nav {
.active {
color: $accent-color;
color: get-light-color('accent-color');
}
a:hover {
color: $accent-color;
color: get-light-color('accent-color');
}
}
}
}
&.transparent-navbar {
background-color: transparent;
background-color: transparent !important;
.navbar-brand {
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
font-weight: 600;
}
li {
a {
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
}
}
.feather-menu {
stroke: $inverse-text-color;
stroke: get-light-color('inverse-text-color');
}
}
#themeMenu {
width: 25px;
min-width: 3rem;
img.theme-icon {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
@ -140,7 +158,7 @@
&.transparent-navbar {
.navbar-nav .active,
li a:hover {
color: $accent-color;
color: get-light-color('accent-color');
@include transition();
}
}
@ -163,9 +181,12 @@
right: 0.5rem;
bottom: 1rem;
z-index: 10000000;
background-color: $bg-primary;
background-color: get-light-color('bg-primary');
box-shadow: $box-shadow;
}
#themeMenu{
width: 100%;
}
}
@include media('<=small') {
@ -180,5 +201,85 @@
.feather-menu {
width: 1.5rem;
height: 1.5rem;
stroke: $text-color;
stroke: get-light-color('text-color');
}
html[data-theme='dark'] {
.top-navbar {
color: get-dark-color('heading-color');
background-color: get-dark-color('bg-primary');
.navbar-brand {
color: get-dark-color('heading-color');
}
.sidebar-icon {
filter: invert(0.5);
}
li {
a {
color: get-dark-color('heading-color');
}
}
#top-navbar-divider {
background-color: get-dark-color('muted-text-color');
}
.dropdown-menu {
box-shadow: $box-shadow;
background-color: get-dark-color('bg-card');
border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
&.show {
a {
color: get-dark-color('heading-color') !important;
}
}
}
.navbar-collapse {
&.show,
&.collapsing {
background-color: get-dark-color('bg-primary');
li {
a {
color: get-dark-color('heading-color');
}
}
.navbar-nav {
.active {
color: get-dark-color('accent-color');
}
a:hover {
color: get-dark-color('accent-color');
}
}
}
}
&.transparent-navbar {
.navbar-brand {
color: get-dark-color('text-color');
}
li {
a {
color: get-dark-color('text-color');
}
}
.feather-menu {
stroke: get-dark-color('text-color');
}
}
}
img.theme-icon {
filter: invert(1);
}
.feather-sidebar,
.feather-menu {
stroke: get-dark-color('text-color');
}
}