added dark mode option

liquet/css/home.css

@@ -14,18 +14,6 @@
     font-size: 5.5vw;
 }
 
-@media only screen and (min-width: 40em) {
-    #home #header h1 {
-        font-size: 5em;
-    }
-}
-
-@media only screen and (min-width: 40em) {
-    #home #header h2 {
-        font-size: 2em;
-    }
-}
-
 #home #list-container {
 }
 
@@ -38,12 +26,6 @@
     padding: 0 2em;
 }
 
-@media only screen and (min-width: 40em) {
-    #home #list {
-        width: var(--text-width);
-    }
-}
-
 #home #list > .item {
     padding: .25em 1em;
     margin: 1.5em 0;
@@ -82,3 +64,30 @@
 #home #list hr {
     margin: 0 1.5em;
 }
+
+#home #lights img {
+    position: fixed;
+    top: .25em;
+    right: .25em;
+    transition: var(--animation);
+    height: var(--icon-width);
+}
+
+@media only screen and (min-width: 40em) {
+    #home #list {
+        width: var(--text-width);
+    }
+
+    #home #header h1 {
+        font-size: 5em;
+    }
+
+    #home #header h2 {
+        font-size: 2em;
+    }
+
+    #home #lights img{
+        top: .5em;
+        right: 1em;
+    }
+}

liquet/css/singular.css

@@ -2,18 +2,15 @@
     margin: .25em .25em;
     vertical-align: middle;
     transition: var(--animation);
+    height: var(--icon-width);
 }
 
 #singular #top img:hover {
     transform: scale(1.5);
 }
 
-#singular #top #left img {
+#singular #top img.reduce {
-    width: 1.5em;
+    height: calc(var(--icon-width) * .8);
-}
-
-#singular #top #right img {
-    width: 1em;
 }
 
 #singular #main {
@@ -122,6 +119,10 @@
     }
 
     #singular #top img {
-        margin: .25em 1em;
+        margin: .25em .5em;
+    }
+
+    #singular #top{
+        padding: 0 .5em;
     }
 }

liquet/functions.php

@@ -7,6 +7,10 @@ add_theme_support( 'title-tag' );
 add_theme_support( 'post-thumbnails' );
 
 add_action( 'wp_enqueue_scripts', function () {
+	// JS
+	wp_enqueue_script( 'liquet-lights', get_template_directory_uri() . '/js/lights.js' );
+
+	// CSS
 	wp_enqueue_style( 'flex', get_template_directory_uri() . '/css/flex.css' );
 	wp_enqueue_style( 'liquet', get_template_directory_uri() . '/style.css' );
 	wp_enqueue_style( 'liquet-home', get_template_directory_uri() . '/css/home.css' );

liquet/index.php

@@ -7,6 +7,9 @@ get_header();
 $tags = get_tags( [ 'orderby' => 'count', 'order' => 'desc' ] );
 ?>
     <div id="home">
+        <a id="lights" href="javascript:void(0);" onclick="window.toggleLights();">
+            <img src="<?= get_template_directory_uri() . '/vendor/icons/contrast.svg' ?>" alt="lights"/>
+        </a>
         <div class="flex container vertical middle" id="list-header">
             <div id="header">
                 <a href="<?= get_bloginfo( 'wpurl' ); ?>">

liquet/js/lights.js

@@ -0,0 +1,22 @@
+;((window) => {
+    const key = 'nicco.io:blog:lights'
+    const CSS = 'body, .wp-block-image img, .thumbnail img {filter: invert(1);} '
+    const style = window.document.createElement('style')
+    document.head.appendChild(style)
+
+    const on = () => {
+        style.sheet.deleteRule(parseInt(window.localStorage.getItem(key)))
+        window.localStorage.removeItem(key)
+    }
+
+    const off = () => {
+        const i = style.sheet.insertRule(CSS)
+        window.localStorage.setItem(key, i)
+    }
+
+    const isDark = () => window.localStorage.getItem(key) !== null
+
+    if (isDark()) off()
+
+    window.toggleLights = () => isDark() ? on() : off()
+})(window)

liquet/singular.php

@@ -28,9 +28,12 @@ $dates = getDates();
 					$saved = get_option( 'website_url' );
 					if ( $saved ) : ?>
                         <a href="<?= $saved; ?>" target="_blank">
-                            <img src="<?= get_template_directory_uri() . '/vendor/logos/website.png' ?>" alt="website"/>
+                            <img class="reduce" src="<?= get_template_directory_uri() . '/vendor/logos/website.png' ?>" alt="website"/>
                         </a>
 					<?php endif; ?>
+                    <a href="javascript:void(0);" onclick="window.toggleLights();">
+                        <img src="<?= get_template_directory_uri() . '/vendor/icons/contrast.svg' ?>" alt="lights"/>
+                    </a>
                 </div>
             </div>
         </div>

liquet/style.css

@@ -21,6 +21,7 @@ Theme URI: https://github.com/cupcakearmy/liquet
     --text-width: 35rem;
     --animation: all 100ms ease;
     --small-shadow: 0 0.2em 0.5em -0.1em #00000014;
+    --icon-width: 1.5em;
     scroll-behavior: smooth;
 }
 
@@ -91,31 +92,6 @@ hr {
     margin-top: -.25em;
 }
 
-
-@media only screen and (max-width: 40em) {
-    .tags::-webkit-scrollbar {
-        width: 2px;
-        background: transparent;
-        height: 2px;
-    }
-
-    .tags::-webkit-scrollbar-thumb {
-        background: var(--clr-dark);
-        border-radius: 2px;
-    }
-
-    .tags {
-        display: flex;
-        flex-direction: row;
-        overflow: auto;
-    }
-
-    .tags > a.tag {
-        margin: .25em;
-        flex: 1 0 auto;
-    }
-}
-
 .tags > a.tag {
     padding: .25em;
     background: #eee;
@@ -145,6 +121,34 @@ img.icon {
     width: 100%;
 }
 
-.spacer{
+.spacer {
     height: 8em;
 }
+
+@media only screen and (max-width: 40em) {
+    .tags::-webkit-scrollbar {
+        width: 2px;
+        background: transparent;
+        height: 2px;
+    }
+
+    .tags::-webkit-scrollbar-thumb {
+        background: var(--clr-dark);
+        border-radius: 2px;
+    }
+
+    .tags {
+        display: flex;
+        flex-direction: row;
+        overflow: auto;
+    }
+
+    .tags > a.tag {
+        margin: .25em;
+        flex: 1 0 auto;
+    }
+
+    .gohome {
+        padding: .25em;
+    }
+}

liquet/vendor/icons/sun.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 387c-8.5 0-15.4 6.9-15.4 15.4v46.2c0 8.5 6.9 15.4 15.4 15.4s15.4-6.9 15.4-15.4v-46.2c0-8.5-6.9-15.4-15.4-15.4zM256 48c-8.5 0-15.4 6.9-15.4 15.4v46.2c0 8.5 6.9 15.4 15.4 15.4s15.4-6.9 15.4-15.4V63.4c0-8.5-6.9-15.4-15.4-15.4zM125 256c0-8.5-6.9-15.4-15.4-15.4H63.4c-8.5 0-15.4 6.9-15.4 15.4s6.9 15.4 15.4 15.4h46.2c8.5 0 15.4-6.9 15.4-15.4zM448.6 240.6h-46.2c-8.5 0-15.4 6.9-15.4 15.4s6.9 15.4 15.4 15.4h46.2c8.5 0 15.4-6.9 15.4-15.4s-6.9-15.4-15.4-15.4zM152.5 344.1c-4.1 0-8 1.6-10.9 4.5l-32.7 32.7c-2.9 2.9-4.5 6.8-4.5 10.9s1.6 8 4.5 10.9c2.9 2.9 6.8 4.5 10.9 4.5 4.1 0 8-1.6 10.9-4.5l32.7-32.7c6-6 6-15.8 0-21.8-2.9-2.9-6.8-4.5-10.9-4.5zM359.5 167.9c4.1 0 8-1.6 10.9-4.5l32.7-32.7c2.9-2.9 4.5-6.8 4.5-10.9s-1.6-8-4.5-10.9c-2.9-2.9-6.8-4.5-10.9-4.5-4.1 0-8 1.6-10.9 4.5l-32.7 32.7c-2.9 2.9-4.5 6.8-4.5 10.9s1.6 8 4.5 10.9c2.9 2.9 6.8 4.5 10.9 4.5zM130.7 108.9c-2.9-2.9-6.8-4.5-10.9-4.5-4.1 0-8 1.6-10.9 4.5-2.9 2.9-4.5 6.8-4.5 10.9 0 4.1 1.6 8 4.5 10.9l32.7 32.7c2.9 2.9 6.8 4.5 10.9 4.5 4.1 0 8-1.6 10.9-4.5 2.9-2.9 4.5-6.8 4.5-10.9s-1.6-8-4.5-10.9l-32.7-32.7zM370.4 348.6c-2.9-2.9-6.8-4.5-10.9-4.5-4.1 0-8 1.6-10.9 4.5-6 6-6 15.8 0 21.8l32.7 32.7c2.9 2.9 6.8 4.5 10.9 4.5 4.1 0 8-1.6 10.9-4.5 2.9-2.9 4.5-6.8 4.5-10.9s-1.6-8-4.5-10.9l-32.7-32.7zM256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96z"/></svg>