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

127
assets/styles/components/buttons.scss
View file

@ -1,44 +1,44 @@
.btn-dark {
background-color: $text-color !important;
border-color: $text-color !important;
color: $text-over-accent-color !important;
background-color: get-light-color('text-color') !important;
border-color: get-light-color('text-color') !important;
color: get-light-color('text-over-accent-color') !important;
@include transition();
&:hover,
&:focus {
background-color: $accent-color !important;
border-color: $accent-color !important;
background-color: get-light-color('accent-color') !important;
border-color: get-light-color('accent-color') !important;
@include transition();
}
}
.btn-info {
background-color: $accent-color !important;
color: $text-over-accent-color !important;
background-color: get-light-color('accent-color') !important;
color: get-light-color('text-over-accent-color') !important;
&:hover,
&:focus {
background-color: $hover-over-accent-color !important;
background-color: get-light-color('hover-over-accent-color') !important;
}
}
.btn-outline-info {
color: $accent-color !important;
border-color: $accent-color !important;
color: get-light-color('accent-color') !important;
border-color: get-light-color('accent-color') !important;
&:hover,
&:focus {
background-color: $accent-color !important;
color: $text-over-accent-color !important;
background-color: get-light-color('accent-color') !important;
color: get-light-color('text-over-accent-color') !important;
}
}
.btn-link {
color: $accent-color;
color: get-light-color('accent-color');
&:hover,
&:focus {
color: $hover-over-accent-color;
color: get-light-color('hover-over-accent-color');
}
}
@ -46,7 +46,7 @@
background-color: transparent;
border: 1px solid transparent;
border-radius: 0.25rem;
color: $muted-text-color;
color: get-light-color('muted-text-color');
}
.tags {
@ -56,18 +56,19 @@
font-size: 0.5em;
list-style-type: none;
display: inline-block;
background: $accent-color;
background: get-light-color('accent-color');
margin-left: 0.1em;
margin-right: 0.1em;
}
a {
color: $text-over-accent-color;
color: get-light-color('text-over-accent-color');
text-decoration: none !important;
}
}
.icon-button {
background-color: $text-color;
color: $text-over-accent-color !important;
background-color: get-light-color('text-color');
color: get-light-color('text-over-accent-color') !important;
padding: 0.25rem 0.5rem;
line-height: 1.5;
border-radius: 0.2rem;
@ -75,19 +76,99 @@
&:hover,
&:focus {
background-color: $accent-color !important;
background-color: get-light-color('accent-color') !important;
@include transition();
}
}
.filled-button {
background-color: $accent-color !important;
color: $text-over-accent-color !important;
background-color: get-light-color('accent-color') !important;
color: get-light-color('text-over-accent-color') !important;
@include transition();
&:hover,
&:active {
background-color: $hover-over-accent-color !important;
background-color: get-light-color('hover-over-accent-color') !important;
@include transition();
}
}
html[data-theme='dark'] {
.btn-dark {
background-color: get-dark-color('accent-color') !important;
border-color: get-dark-color('accent-color') !important;
color: get-dark-color('text-over-accent-color') !important;
&:hover,
&:focus {
background-color: get-dark-color('hover-over-accent-color') !important;
border-color: get-dark-color('hover-over-accent-color') !important;
}
}
.btn-info {
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;
&:hover,
&:focus {
background-color: get-dark-color('hover-over-accent-color') !important;
}
}
.btn-outline-info {
color: get-dark-color('accent-color') !important;
border-color: get-dark-color('accent-color') !important;
&:hover,
&:focus {
background-color: get-dark-color('accent-color') !important;
color: get-dark-color('text-over-accent-color') !important;
}
}
.btn-link {
color: get-dark-color('accent-color');
&:hover,
&:focus {
color: get-dark-color('hover-over-accent-color');
}
}
.nav-button {
color: get-dark-color('muted-text-color');
}
.tags {
li {
background: get-dark-color('accent-color');
a {
background-color: get-dark-color('bg-card');
border: 1px solid get-dark-color('muted-text-color');
color: get-dark-color('text-over-accent-color');
}
}
}
.icon-button {
background-color: get-dark-color('muted-text-color');
color: get-dark-color('text-over-accent-color') !important;
&:hover,
&:focus {
background-color: get-dark-color('accent-color') !important;
}
}
.filled-button {
background-color: get-dark-color('accent-color') !important;
color: get-dark-color('text-over-accent-color') !important;
&:hover,
&:active {
background-color: get-dark-color('hover-over-accent-color') !important;
}
}
}