Skip to content
Permalink
Browse files

Add dark mode

  • Loading branch information...
kaishin committed Nov 1, 2019
1 parent eb322cf commit ae27e217dd2df9438ed81edbc8230103c55e7793
@@ -8,7 +8,7 @@ class MicroblogHeader extends React.Component {
<h2 className="page-heading">Wide Gamut</h2>
<p className="blog-intro">
A collection of micro posts, hot takes, and reflections about whatever happens to preoccupy me. Stay updated
using <Link to="/microblog.xml">RSS</Link>, <Link to="/microblog.json">JSON Feed</Link>,{' '}
using <Link to="/microblog.xml">RSS</Link>/<Link to="/microblog.json">JSON</Link> feeds,{' '}
<a href="https://twitter.com/kaishin">Twitter</a>, or <a href="https://widegamut.club/kaishin">Mastodon</a>.
</p>
</aside>
@@ -3,20 +3,20 @@
background-color: var(--theme-inset-background-color);
border-radius: 4px;
border: 1px solid transparent;
color: #363636;
color: var(--theme-foreground-color);
font-family: var(--monospaced-font);
font-size: 0.9rem;
padding: 0.8em;
transform: all 0.2s;
width: 100%;

&::placeholder {
color: color-mod(var(--theme-inset-background-color) shade(60%));
color: var(--theme-secondary-foreground-color);
}

&:focus {
outline: none;
border-color: color-mod(var(--theme-inset-background-color) lightness(70%));
border-color: var(--dusk-blue);
}

&:required,
@@ -1,10 +1,10 @@
code {
background-color: color-mod(var(--code-background-color) shade(2%));
background-color: var(--code-background-color);
border-radius: 0.3em;
color: var(--code-foreground-color);
display: inline-block;
font-family: var(--monospaced-font);
font-size: 0.95em;
font-size: 0.90em;
font-weight: 400;
padding: 0 0.5em;
}
@@ -31,12 +31,12 @@ pre {

&::selection,
& ::selection {
background: color-mod(var(--code-keyword-color) alpha(20%));
background: var(--code-selection-color);
text-shadow: none;
}

&:hover {
background-color: #fff;
background-color: var(--code-hover-background-color);
box-shadow: 0 5px 10px rgba(0 0 0 / 5%);
}

@@ -114,7 +114,7 @@ pre {
}

&.inserted {
border-bottom: 1px dotted #eeebff;
border-bottom: 1px dotted var(--code-inserted-color);
text-decoration: none;
}

@@ -155,13 +155,13 @@ pre > code.highlight {
}

.gatsby-highlight-code-line {
background-color: rgba(0 0 0 / 5%));
background-color: var(--code-highlighted-line-color);
display: block;
margin-right: -1em;
margin-left: -1em;
padding-right: 1em;
padding-left: 0.75em;
border-left: 0.25em solid #f99;
border-left: 0.25em solid var(--code-highlighted-line-border-color);
}

.gatsby-highlight {
@@ -7,7 +7,7 @@ table {
margin: var(--table-spacing) 0;
max-width: 100%;
min-width: 15rem;
padding: calc(var(--table-spacing) / 3) calc(var(--table-spacing) * 2);
padding: var(--table-spacing) calc(var(--table-spacing) * 2);

%padded-cell {
padding-bottom: var(--table-spacing);
@@ -23,11 +23,18 @@ table {
border-bottom: 2px solid color-mod(var(--theme-foreground-color) alpha(10%));
font-weight: 600;
text-align: left;
padding-bottom: var(--table-spacing);
padding-top: var(--table-spacing);
padding-left: var(--table-spacing);

&:not(:last-child) {
padding-right: var(--table-spacing);
}
}

& td {
@extend %padded-cell;
border-bottom: 1px solid color-mod(var(--theme-foreground-color) alpha(10%));
border-bottom: 1px solid var(--code-background-color);
padding-bottom: calc(var(--table-spacing) / 2);
padding-top: calc(var(--table-spacing) / 2);
}
@@ -2,21 +2,80 @@
--primary-color: #4a20ac;
--secondary-color: #ffd080;

--dusk-blue: #7b94ce;
--marin-blue: #4e618e;

--light-theme-bg-color: #fff7e6;
--light-theme-fg-color: #202020;
--light-theme-link-color: #7760c3;

--dark-theme-bg-color: #191f2d;
--dark-theme-fg-color: white;
--dark-theme-link-color: #7760c3;

--theme-background-color: var(--light-theme-bg-color);
--theme-inset-background-color: color-mod(var(--theme-background-color) shade(2%));
--theme-foreground-color: var(--light-theme-fg-color);
--theme-inset-background-color: color-mod(var(--theme-background-color) shade(2%));
--theme-bullet-dash-color: color-mod(var(--theme-foreground-color) alpha(40%));

--theme-link-color: var(--light-theme-link-color);
--theme-visited-link-color: color-mod(var(--theme-link-color) shade(20%));
--theme-link-hover-background-color: color-mod(var(--theme-link-color) alpha(8%));
--theme-link-border-bottom-color: color-mod(var(--theme-link-color) alpha(40%));

--theme-secondary-foreground-color: gray(50);
--theme-tertiary-foreground-color: gray(30);

--theme-quote-background-color: color-mod(var(--dusk-blue) alpha(5%));
--theme-quote-foreground-color: color-mod(var(--marin-blue) alpha(80%));
--theme-quote-border-color: color-mod(var(--marin-blue) alpha(30%));

--code-number-color: #f9730f;
--code-function-color: var(--theme-link-color);
--code-string-color: #00c8a7;
--code-keyword-color: #3da4ef;
--code-variable-color: #ff6166;
--code-comment-color: #b2b5c3;
--code-background-color: var(--theme-inset-background-color);
--code-foreground-color: color-mod(var(--theme-foreground-color) alpha(80%));
--code-background-color: color-mod(var(--dusk-blue) alpha(8%));
--code-foreground-color: color-mod(var(--dusk-blue) shade(25%));
--code-function-color: var(--theme-link-color);
--code-selection-color: color-mod(var(--code-keyword-color) alpha(20%));
--code-hover-background-color: white;
--code-inserted-color: #eeebff;
--code-highlighted-line-color: rgba(0 0 0 / 5%);
--code-highlighted-line-border-color: #f99;
}

@media (prefers-color-scheme: dark) {
:root {
--theme-background-color: var(--dark-theme-bg-color);
--theme-foreground-color: var(--dark-theme-fg-color);
--theme-inset-background-color: color-mod(var(--dark-theme-bg-color) shade(20%));
--theme-bullet-dash-color: color-mod(var(--dark-theme-fg-color) alpha(40%));

--theme-link-color: var(--secondary-color);
--theme-visited-link-color: color-mod(var(--secondary-color) shade(30%));
--theme-link-hover-background-color: color-mod(var(--secondary-color) alpha(8%));
--theme-link-border-bottom-color: color-mod(var(--secondary-color) alpha(40%));

--theme-secondary-foreground-color: var(--dusk-blue);
--theme-tertiary-foreground-color: var(--marin-blue);

--theme-quote-background-color: color-mod(var(--dark-theme-fg-color) alpha(2%));
--theme-quote-foreground-color: var(--theme-secondary-foreground-color);
--theme-quote-border-color: var(--theme-tertiary-foreground-color);

--code-background-color: color-mod(var(--dusk-blue) alpha(10%));
--code-foreground-color: color-mod(var(--dusk-blue) tint(20%));
--code-function-color: var(--theme-link-color);
--code-hover-background-color: black;
--code-comment-color: color-mod(var(--dusk-blue) alpha(50%));
}
}

/* @media (prefers-color-scheme: light) {
:root,
.light-mode {
}
} */

@custom-media --dark-mode (prefers-color-scheme: dark);
@@ -7,7 +7,7 @@
--sidebar-max-width: 22.5rem;
--spacing-default: 1rem;

--main-container-padding: calc(var(--header-top-spacing) * 1.4);
--main-container-padding: calc(var(--header-top-spacing) * 1.6);
--sheet-margin-top: var(--main-container-padding);
}

@@ -16,16 +16,8 @@
@custom-media --full-width-image (width < 450px);

%sheet {
background-color: var(--light-theme-bg-color);
border-top-left-radius: 1rem;
box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);
color: var(--light-theme-fg-color);
transform: translateY(20px);
height: calc(100% - 20px);

@media (--narrow-grid-container) {
border-top-left-radius: 0;
}
background-color: var(--theme-background-color);
color: var(--theme-foreground-color);
}

%gradient-background {
@@ -12,7 +12,7 @@

%body-text {
font-size: 1rem;
color: var(--light-theme-fg-color);
color: var(--theme-foreground-color);
line-height: 1.5;
letter-spacing: 0.05em;
}
@@ -35,16 +35,16 @@

%inline-link-style {
text-decoration: none;
border-bottom: 1px solid color-mod(var(--theme-link-color) alpha(40%));
border-bottom: 1px solid var(--theme-link-border-bottom-color);
transition: all 0.2s;

&:hover,
&:focus {
background-color: color-mod(var(--theme-link-color) alpha(8%));
background-color: var(--theme-link-hover-background-color);
border-bottom: 1px solid var(--theme-link-color);
}

&:visited {
color: color-mod(var(--theme-link-color) shade(40%));
color: var(--theme-visited-link-color);
}
}
@@ -9,15 +9,6 @@
}
}

%quote-style {
background: linear-gradient(90deg, rgba(0 0 0 / 2%), transparent);
border-left: 2px solid gray(80);
color: rgba(0, 0, 0, 0.6);
margin: 2em 0;
overflow: hidden;
padding-left: 0.8em;
}

.blog-content {
margin-bottom: 2rem;
max-width: var(--main-content-max-width);
@@ -34,15 +25,15 @@
padding: 2rem 0;

& a {
background-color: var(--code-background-color);
background-color: color-mod(var(--theme-link-color) alpha(5%));
border-radius: 1rem;
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
transition: var(--link-transition);

&:hover {
background-color: color-mod(var(--code-background-color) shade(4%));
background-color: color-mod(var(--theme-link-color) alpha(15%));
}

&:nth-child(2) {
@@ -54,7 +45,7 @@
.blog-intro {
@extend %body-text;
margin-bottom: 3rem;
color: gray(50);
color: var(--theme-secondary-foreground-color);
}

.post-title {
@@ -97,15 +88,15 @@
text-transform: uppercase;
font-size: 0.75rem;
font-weight: 500;
border-bottom: 1px solid gray(80);
border-bottom: 1px solid color-mod(var(--theme-tertiary-foreground-color) alpha(50%));
margin-bottom: 0.8rem;
letter-spacing: 0.05em;
color: gray(30);
color: var(--theme-tertiary-foreground-color);
display: inline-block;
}

.post-metadata {
color: gray(50);
color: var(--theme-secondary-foreground-color);
font-size: 0.8rem;
letter-spacing: 0.07em;
line-height: 1.5;
@@ -150,6 +141,7 @@
.full-post-content {
line-height: 1.6;
font-size: var(--blog-body-size);
letter-spacing: 0.02em;

& strong {
font-weight: 500;
@@ -207,7 +199,7 @@
margin-bottom: 0.4em;

&::before {
color: rgba(0 0 0 / 20%);
color: var(--theme-bullet-dash-color);
content: '';
left: -1em;
position: absolute;
@@ -220,7 +212,12 @@
}

& blockquote {
@extend %quote-style;
background: linear-gradient(90deg, var(--theme-quote-background-color), transparent);
border-left: 2px solid var(--theme-quote-border-color);
color: var(--theme-quote-foreground-color);
margin: 2em 0;
overflow: hidden;
padding: 0.5em 1em 0.5em 1.5em;

& p {
margin: 0.6em auto;
@@ -229,6 +226,7 @@

& :--heading {
margin: 1rem 0;
font-weight: 500;
}

& h2 {
@@ -310,8 +308,8 @@
}

& .feedback-box {
border-top: 1px solid rgba(0 0 0 / 10%);
color: gray(40);
border-top: 1px solid var(--code-background-color);
color: var(--theme-tertiary-foreground-color);
font-size: 0.9rem;
font-style: italic;
margin: 3rem auto 1rem;
@@ -27,7 +27,7 @@

& .permalink {
text-decoration: none;
color: gray(50);
color: var(--theme-link-color);

&:hover {
text-decoration: underline;

0 comments on commit ae27e21

Please sign in to comment.
You can’t perform that action at this time.