jean
/
bifocal
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases 1 Wiki Activity

Adding dark theme, resolves #5

This commit is contained in:
Jean Viscogliosi-Pate 2024-08-01 21:10:34 -07:00
parent 1598721c84
commit dacf3f4786
1 changed files with 55 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
assets/css/screen.css
View File

@ -25,6 +25,50 @@
--color-border: rgba(255, 255, 255, 0.2);
}
/* Dark theme support */
@media (prefers-color-scheme: dark) {
:root {
--color-primary-text: var(--color-lighter-gray);
--background-color: #1e1e1e;
--color-border: rgba(255, 255, 255, 0.08);
--color-secondary-text: var(--color-secondary-text-light);
}
:root.has-light-text {
--color-secondary-text: var(--color-secondary-text-dark);
}
a {
color: var(--color-lighter-gray);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-lighter-gray);
}
.gh-content figcaption a {
color: var(--color-lighter-gray);
}
pre {
background-color: var(--color-darker-gray);
}
:not(pre) > code {
background-color: var(--color-darker-gray);
}
.gh-foot a:hover {
color: var(--color-lighter-gray);
}
}
body {
background-color: var(--background-color);
}
@ -230,6 +274,14 @@ hr {
background-color: var(--color-white);
}
/* Dark theme support */
@media (prefers-color-scheme: dark) {
.has-parallax-feed .gh-card-access {
color: var(--color-lighter-gray);
background-color: var(--color-black);
}
}
.gh-card-access svg {
margin-right: -5px;
}
@ -328,8 +380,8 @@ hr {
}
.kg-gallery-container {
box-shadow: 0px 0px 30px 50px white;
background-color: var(--color-white);
box-shadow: 0px 0px 30px 50px var(--background-color);
background-color: var(--background-color);
}
@media (max-width: 991px) {
@ -364,22 +416,6 @@ hr {
flex-direction: column;
}
.gh-article-meta .gh-author-image {
width: 72px;
height: 72px;
margin-bottom: 16px;
}
.gh-article-meta .gh-author-name {
font-size: 1.9rem;
letter-spacing: -0.01em;
}
.gh-article-meta .gh-author-name a {
color: var(--color-darker-gray);
text-decoration: none;
}
.gh-article-date {
margin-top: 4px;
font-size: 1.4rem;
@ -561,3 +597,4 @@ hr {
height: 32px;
width: 32px;
}