diff --git a/assets/css/screen.css b/assets/css/screen.css index 80c7f76a..3f23cad9 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -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; } +