Implement proper dark mode (#800)

* 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
38 changed files with 1136 additions and 353 deletions
+30 -5
View File
@@ -54,11 +54,11 @@ $progress-bar-colors: (
a {
font-size: 1.5rem;
color: $text-color;
color: get-light-color('text-color');
padding: 0.5rem;
&:hover {
color: $accent-color;
color: get-light-color('accent-color');
@include transition();
}
}
@@ -78,7 +78,7 @@ $progress-bar-colors: (
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid $bg-primary;
border: 12px solid get-light-color('bg-primary');
position: absolute;
top: 0;
left: 0;
@@ -130,9 +130,9 @@ $progress-bar-colors: (
height: 90%;
padding: 1rem;
border-radius: 50%;
background: $text-color;
background: get-light-color('text-color');
font-size: 1rem;
color: $bg-primary;
color: get-light-color('bg-primary');
line-height: initial;
text-align: center;
position: absolute;
@@ -202,3 +202,28 @@ $progress-bar-colors: (
}
}
}
html[data-theme='dark'] {
.about-section {
.social-link {
a {
color: get-dark-color('text-color');
&:hover {
color: get-dark-color('accent-color');
}
}
}
.circular-progress {
&::after {
border: 12px solid get-dark-color('bg-primary');
}
.circular-progress-value {
background: get-dark-color('inverse-text-color');
color: get-dark-color('text-color');
}
}
}
}