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

67
assets/styles/sections/footer.scss
View file

@ -1,19 +1,19 @@
.footer {
color: $muted-text-color !important;
background-color: $bg-primary-inverse;
color: get-light-color('muted-text-color') !important;
background-color: get-light-color('footer-color');
position: relative;
z-index: 9999;
h5 {
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
}
a {
color: $muted-text-color;
color: get-light-color('muted-text-color');
@include transition();
&:hover {
margin-left: 5px;
text-decoration: $muted-text-color underline;
text-decoration: get-light-color('muted-text-color') underline;
@include transition();
}
}
@ -28,30 +28,30 @@
}
hr {
background-color: $muted-text-color;
background-color: get-light-color('muted-text-color');
}
p:first-child {
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
}
input {
background-color: $inverse-text-color;
background-color: get-light-color('inverse-text-color');
&:focus {
background-color: $bg-secondary;
background-color: get-light-color('bg-secondary');
}
}
#disclaimer {
color: $muted-text-color !important;
color: get-light-color('muted-text-color') !important;
text-align: justify;
& > strong {
color: $inverse-text-color !important;
color: get-light-color('inverse-text-color') !important;
}
}
#theme {
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
img {
width: 32px;
display: inline-block;
@ -67,3 +67,46 @@
}
}
}
html[data-theme='dark'] {
.footer {
color: get-dark-color('muted-text-color') !important;
background-color: get-dark-color('footer-color');
h5 {
color: get-dark-color('heading-color');
}
a {
color: get-dark-color('muted-text-color');
&:hover {
text-decoration: get-dark-color('muted-text-color') underline;
}
}
hr {
background-color: get-dark-color('muted-text-color');
}
p:first-child {
color: get-dark-color('muted-text-color');
}
input {
background-color: get-dark-color('bg-primary');
&:focus {
background-color: get-dark-color('bg-secondary');
}
}
#disclaimer {
color: get-dark-color('muted-text-color') !important;
& > strong {
color: get-dark-color('text-color') !important;
}
}
#theme {
color: get-dark-color('text-color');
}
}
}