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
GitHub
parent
6dc9d1d33d
commit
5f0aebcf68
38 changed files with 1136 additions and 353 deletions
|
|
@ -49,12 +49,12 @@ body.kind-page {
|
|||
|
||||
.page-item {
|
||||
& > a {
|
||||
color: $accent-color;
|
||||
color: get-light-color('accent-color');
|
||||
}
|
||||
|
||||
&.active > a {
|
||||
background-color: $accent-color;
|
||||
color: $text-over-accent-color;
|
||||
background-color: get-light-color('accent-color');
|
||||
color: get-light-color('text-over-accent-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -172,3 +172,36 @@ body.kind-page {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
body.kind-section,
|
||||
body.kind-term,
|
||||
body.kind-page {
|
||||
.wrapper {
|
||||
.content-section {
|
||||
.content {
|
||||
.paginator {
|
||||
.page-item {
|
||||
& > a {
|
||||
background-color: get-dark-color('bg-card') !important;
|
||||
color: get-dark-color('text-color') !important;
|
||||
border: 1px solid get-dark-color('muted-text-color') !important;
|
||||
text-decoration: none !important;
|
||||
|
||||
&:hover {
|
||||
background-color: get-dark-color('hover-over-accent-color') !important;
|
||||
color: get-dark-color('text-over-accent-color') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.active > a {
|
||||
background-color: get-dark-color('accent-color') !important;
|
||||
color: get-dark-color('text-over-accent-color') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,16 +20,16 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
background-color: $bg-primary;
|
||||
background-color: get-light-color('bg-primary');
|
||||
font-family: 'Mulish';
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: $bg-primary !important;
|
||||
background-color: get-light-color('bg-primary') !important;
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
background-color: $bg-secondary !important;
|
||||
background-color: get-light-color('bg-secondary') !important;
|
||||
}
|
||||
|
||||
.flag-icon {
|
||||
|
|
@ -55,12 +55,12 @@ body {
|
|||
}
|
||||
|
||||
kbd {
|
||||
background-color: $accent-color;
|
||||
color: $text-over-accent-color;
|
||||
background-color: get-light-color('accent-color');
|
||||
color: get-light-color('text-over-accent-color');
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: $highlight-color;
|
||||
background-color: get-light-color('highlight-color');
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
|
|
@ -88,3 +88,24 @@ mark {
|
|||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
body {
|
||||
background-color: get-dark-color('bg-primary');
|
||||
color: get-dark-color('text-color');
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: get-dark-color('bg-primary') !important;
|
||||
}
|
||||
.bg-secondary {
|
||||
background-color: get-dark-color('bg-secondary') !important;
|
||||
}
|
||||
kbd {
|
||||
background-color: get-dark-color('accent-color');
|
||||
color: get-dark-color('text-over-accent-color');
|
||||
}
|
||||
mark {
|
||||
background-color: get-dark-color('highlight-color');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ body.type-notes {
|
|||
|
||||
.note-title {
|
||||
padding-left: 1rem;
|
||||
color: $accent-color;
|
||||
color: get-light-color('accent-color');
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
|
|
@ -56,11 +56,11 @@ body.type-notes {
|
|||
width: 98%;
|
||||
height: 100%;
|
||||
margin-bottom: -26px;
|
||||
border-bottom: 1px solid $accent-color;
|
||||
border-bottom: 1px solid get-light-color('accent-color');
|
||||
}
|
||||
|
||||
span {
|
||||
background: $bg-secondary;
|
||||
background: get-light-color('bg-secondary');
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -173,3 +173,27 @@ body.type-notes {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
body.type-notes {
|
||||
.wrapper {
|
||||
.content-section {
|
||||
.content {
|
||||
.note-card-holder {
|
||||
.note-title {
|
||||
color: get-dark-color('accent-color');
|
||||
&:before {
|
||||
border-bottom: 1px solid get-dark-color('accent-color');
|
||||
}
|
||||
|
||||
span {
|
||||
background: get-dark-color('bg-secondary');
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
body.kind-page {
|
||||
background-color: $bg-secondary;
|
||||
background-color: get-light-color('bg-secondary');
|
||||
position: relative;
|
||||
|
||||
.wrapper {
|
||||
|
|
@ -23,7 +23,7 @@ body.kind-page {
|
|||
padding-top: 1.5rem;
|
||||
|
||||
.read-area {
|
||||
background-color: $bg-primary;
|
||||
background-color: get-light-color('bg-primary');
|
||||
|
||||
.hero-area {
|
||||
margin-top: 3rem;
|
||||
|
|
@ -54,7 +54,7 @@ body.kind-page {
|
|||
width: 120px;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
background-color: $bg-primary;
|
||||
background-color: get-light-color('bg-primary');
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -93,6 +93,9 @@ body.kind-page {
|
|||
.next-prev-text {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -111,7 +114,7 @@ body.kind-page {
|
|||
padding-top: 1rem;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: $bg-primary;
|
||||
background-color: get-light-color('bg-primary');
|
||||
margin-right: 0.5rem;
|
||||
@include transition();
|
||||
|
||||
|
|
@ -138,16 +141,17 @@ body.kind-page {
|
|||
.nav-link {
|
||||
padding: 0;
|
||||
padding-left: 0.5rem;
|
||||
text-decoration: none !important;
|
||||
@include transition();
|
||||
color: $heading-color;
|
||||
color: get-light-color('text-color');
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
padding-left: 1rem;
|
||||
padding-right: 0.5rem;
|
||||
background-color: $accent-color;
|
||||
color: $text-over-accent-color;
|
||||
background-color: get-light-color('accent-color');
|
||||
color: get-light-color('text-over-accent-color');
|
||||
@include transition();
|
||||
}
|
||||
}
|
||||
|
|
@ -176,13 +180,13 @@ body.kind-page {
|
|||
position: fixed;
|
||||
bottom: 0rem;
|
||||
right: 1rem;
|
||||
color: $accent-color;
|
||||
color: get-light-color('accent-color');
|
||||
font-size: 24pt;
|
||||
z-index: 900000;
|
||||
visibility: hidden;
|
||||
|
||||
&:hover {
|
||||
color: $hover-over-accent-color;
|
||||
color: get-light-color('hover-over-accent-color');
|
||||
}
|
||||
&.show {
|
||||
visibility: visible;
|
||||
|
|
@ -190,7 +194,7 @@ body.kind-page {
|
|||
|
||||
i {
|
||||
box-shadow: $box-shadow;
|
||||
background-color: $bg-primary;
|
||||
background-color: get-light-color('bg-primary');
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
|
@ -318,3 +322,61 @@ body.kind-page {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
body.kind-page {
|
||||
background-color: get-dark-color('bg-secondary');
|
||||
|
||||
.wrapper {
|
||||
.content-section {
|
||||
.content {
|
||||
.read-area {
|
||||
background-color: get-dark-color('bg-primary');
|
||||
|
||||
.page-content {
|
||||
.author-profile {
|
||||
img {
|
||||
background-color: get-dark-color('bg-primary');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.toc-section {
|
||||
.toc-holder {
|
||||
background-color: get-dark-color('bg-primary');
|
||||
hr {
|
||||
background-color: get-dark-color('muted-text-color');
|
||||
}
|
||||
|
||||
.toc {
|
||||
nav {
|
||||
.nav-link {
|
||||
color: get-dark-color('text-color');
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
background-color: get-dark-color('accent-color');
|
||||
color: get-dark-color('text-over-accent-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#scroll-to-top {
|
||||
color: get-dark-color('accent-color');
|
||||
&:hover {
|
||||
color: get-dark-color('hover-over-accent-color');
|
||||
}
|
||||
|
||||
i {
|
||||
background-color: get-dark-color('bg-primary');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue