Skip to content
Permalink
Browse files

adding dark mode

  • Loading branch information
shprink committed Jan 9, 2020
1 parent dee3010 commit 14b3385063c8e234cf189a120e911018bdacb061
@@ -6,6 +6,30 @@ import { Component, h } from "@stencil/core";
:host {
font-size: 1rem;
}
a {
color: var(--light-link-color);
}
a:hover {
color: var(--light-link-hover-color);
}
@media (prefers-color-scheme: dark) {
a {
color: var(--dark-link-color);
}
a:hover {
color: var(--dark-link-hover-color);
}
}
@media (prefers-color-scheme: light) {
a {
color: var(--light-link-color);
}
a:hover {
color: var(--light-link-hover-color);
}
}
`,
shadow: true
})
@@ -10,12 +10,29 @@ import { getBlackFridayDate, isItBlackFriday, isItSoon } from "./dates.utils";
}
.title {
font-size: 9rem;
color: var(--title-color, black);
color: var(--light-color);
}
.title small {
display: block;
font-size: 20%;
color: var(--subtitle-color, grey);
color: var(--light-subtitle-color);
}
@media (prefers-color-scheme: dark) {
.title {
color: var(--dark-color);
}
.title small {
color: var(--dark-subtitle-color);
}
}
@media (prefers-color-scheme: light) {
.title {
color: var(--light-color);
}
.title small {
color: var(--light-subtitle-color);
}
}
`,
shadow: true
@@ -6,6 +6,45 @@
box-sizing: border-box;
}

:host {
background: var(--light-bg-color);
color: var(--light-color);
}

header > a {
color: var(--light-link-color);
}

header > a:hover {
color: var(--light-link-hover-color);
}

@media (prefers-color-scheme: dark) {
:host {
background: var(--dark-bg-color);
color: var(--dark-color);
}
header > a {
color: var(--dark-link-color);
}
header > a:hover {
color: var(--dark-link-hover-color);
}
}

@media (prefers-color-scheme: light) {
:host {
background: var(--light-bg-color);
color: var(--light-color);
}
header > a {
color: var(--light-link-color);
}
header > a:hover {
color: var(--light-link-hover-color);
}
}

footer {
position: fixed;
bottom: 0;
@@ -31,13 +70,11 @@ header {

header > a {
font-size: 1.2rem;
color: black;
text-decoration: none;
transition: color 0.5s ease;
}

header > a:hover {
font-size: 1.2rem;
color: blue;
text-decoration: none;
}
@@ -85,10 +85,24 @@
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag("js", new Date());

gtag('config', 'UA-7727182-9');
gtag("config", "UA-7727182-9");
</script>
<style>
:root {
--light-bg-color: white;
--light-color: black;
--light-subtitle-color: grey;
--light-link-color: var(--light-color);
--light-link-hover-color: blue;
--dark-bg-color: black;
--dark-color: white;
--dark-subtitle-color: grey;
--dark-link-color: var(--dark-color);
--dark-link-hover-color: #a7a7ff;
}
</style>
</head>
<body>
<noscript>
@@ -100,10 +114,10 @@
</script>
<script>
// Check that service workers are supported
if ('serviceWorker' in navigator) {
if ("serviceWorker" in navigator) {
// Use the window load event to keep the page load performant
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js');
window.addEventListener("load", () => {
navigator.serviceWorker.register("/service-worker.js");
});
}
</script>

0 comments on commit 14b3385

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