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

47
assets/styles/components/links.scss
View file

@ -1,38 +1,38 @@
a {
color: $accent-color;
color: get-light-color('accent-color');
@include transition();
&:hover,
&:focus {
text-decoration: $hover-over-accent-color underline;
color: $hover-over-accent-color;
text-decoration: get-light-color('hover-over-accent-color') underline;
color: get-light-color('hover-over-accent-color');
@include transition();
}
}
.list-link {
text-decoration: none;
color: $text-color;
text-decoration: none !important;
color: get-light-color('text-color');
@include transition();
&.active {
display: inline;
color: $accent-color;
color: get-light-color('accent-color');
}
&:hover {
margin-left: 3px;
color: $accent-color;
color: get-light-color('accent-color');
@include transition();
}
}
a.header-anchor {
text-decoration: none;
color: $heading-color;
color: get-light-color('heading-color');
i,
svg {
font-size: 10pt;
color: $text-color;
color: get-light-color('text-color');
display: none;
margin-left: 0.5rem;
}
@ -43,10 +43,37 @@ a.header-anchor {
}
}
code {
color: $inline-code-color;
color: get-light-color('inline-code-color');
}
}
.anchor {
padding-top: 3.5rem;
}
html[data-theme='dark'] {
a {
color: get-dark-color('accent-color');
&:hover,
&:focus {
text-decoration: get-dark-color('hover-over-accent-color') underline;
color: get-dark-color('hover-over-accent-color');
}
}
.list-link {
color: get-dark-color('text-color');
&:hover {
color: get-dark-color('accent-color');
}
}
a.header-anchor {
color: get-dark-color('heading-color');
i,
svg {
color: get-dark-color('text-color');
}
code {
color: get-dark-color('inline-code-color');
}
}
}