Added dark and SFW modes.

assets/components/header/header.vue

@@ -62,34 +62,88 @@
             </nav>
         </div>
 
-        <Search class="search-full" />
+        <div class="header-section">
+            <div class="header-toggles">
+                <Icon
+                    v-show="!sfw"
+                    v-tooltip="'Enable safe-for-work mode'"
+                    icon="flower"
+                    class="toggle noselect"
+                    @click.native="setSfw(true)"
+                />
 
-        <v-popover
-            class="search-compact"
-            :open="searching"
-            @show="searching = true"
-            @hide="searching = false"
-        >
-            <button
-                type="button"
-                class="search-button"
-            ><Icon
-                icon="search"
-            /></button>
+                <Icon
+                    v-show="sfw"
+                    v-tooltip="'Disable safe-for-work mode'"
+                    icon="flower"
+                    class="toggle active noselect"
+                    @click.native="setSfw(false)"
+                />
 
-            <Search
-                slot="popover"
-                :searching="searching"
-                class="compact"
-                @search="searching = false"
-            />
-        </v-popover>
+                <Icon
+                    v-show="theme === 'light'"
+                    v-tooltip="'Switch to dark theme'"
+                    icon="moon"
+                    class="toggle noselect"
+                    @click.native="setTheme('dark')"
+                />
+
+                <Icon
+                    v-show="theme === 'dark'"
+                    v-tooltip="'Switch to light theme'"
+                    icon="sun"
+                    class="toggle noselect"
+                    @click.native="setTheme('light')"
+                />
+            </div>
+
+            <Search class="search-full" />
+
+            <v-popover
+                class="search-compact"
+                :open="searching"
+                @show="searching = true"
+                @hide="searching = false"
+            >
+                <button
+                    type="button"
+                    class="search-button"
+                ><Icon
+                    icon="search"
+                /></button>
+
+                <Search
+                    slot="popover"
+                    :searching="searching"
+                    class="compact"
+                    @search="searching = false"
+                />
+            </v-popover>
+        </div>
     </header>
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 import Search from './search.vue';
 
+function sfw(state) {
+    return state.ui.sfw;
+}
+
+function theme(state) {
+    return state.ui.theme;
+}
+
+function setTheme(newTheme) {
+    this.$store.dispatch('setTheme', newTheme);
+}
+
+function setSfw(enabled) {
+    this.$store.dispatch('setSfw', enabled);
+}
+
 export default {
     components: {
         Search,
@@ -99,6 +153,16 @@ export default {
             searching: false,
         };
     },
+    computed: {
+        ...mapState({
+            sfw,
+            theme,
+        }),
+    },
+    methods: {
+        setSfw,
+        setTheme,
+    },
 };
 </script>
 
@@ -109,9 +173,9 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: $background;
-    color: $primary;
-    border-bottom: solid 1px $shadow-hint;
+    background: var(--background);
+    color: var(--primary);
+    border-bottom: solid 1px var(--shadow-hint);
     font-size: 0;
 }
 
@@ -120,6 +184,13 @@ export default {
     align-items: center;
 }
 
+.header-section {
+    height: 100%;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+}
+
 .logo-link {
     color: inherit;
     display: inline-block;
@@ -151,31 +222,44 @@ export default {
     justify-content: center;
     padding: 1rem 1rem calc(1rem - 5px) 1rem;
     border-bottom: solid 5px transparent;
-    color: $shadow;
+    color: var(--shadow);
     text-decoration: none;
     font-size: .9rem;
     font-weight: bold;
     cursor: pointer;
 
-    .icon {
-        fill: $shadow;
-        margin: 0 .5rem 0 0;
-    }
-
     &.active {
-        color: $primary;
-        border-bottom: solid 5px $primary;
+        color: var(--primary);
+        border-bottom: solid 5px var(--primary);
 
         .icon {
-            fill: $primary;
+            fill: var(--primary);
         }
     }
 
     &:hover:not(.active) {
-        color: $primary;
+        color: var(--primary);
 
         .icon {
-            fill: $primary;
+            fill: var(--primary);
+        }
+    }
+}
+
+.header-toggles {
+    margin: 0 .5rem 0 0;
+
+    .icon {
+        padding: 1rem .75rem;
+        fill: var(--shadow);
+
+        &:hover {
+            fill: var(--shadow-strong);
+            cursor: pointer;
+        }
+
+        &.active {
+            fill: var(--primary);
         }
     }
 }
@@ -189,7 +273,7 @@ export default {
     margin: .2rem 0 0 0;
 
     .icon {
-        fill: $shadow;
+        fill: var(--shadow);
     }
 }