[zine] inversible .svg <Icon/>

components/Icon.vue

@@ -9,6 +9,7 @@
             v: { required: true },
             set: { default: 'l' },
             size: { default: 1 },
+            inverse: { type: Boolean }
         },
         computed: {
             valueParts() {
@@ -22,7 +23,7 @@
             },
             iconSource() {
                 if (this.v.endsWith('.svg')) {
-                    return `/img/${this.v}`;
+                    return `/img/${this.inverse ? this.v.replace('.svg', '-inverse.svg') : this.v}`;
                 }
                 if (this.v.startsWith('https://')) {
                     return this.v;

components/LinksNav.vue

@@ -3,9 +3,21 @@
         {name: 'links.links', route: config.links.route, icon: 'bookmark', condition: config.links.links.length > 0},
         {name: 'links.academic', route: config.links.academicRoute, icon: 'vial', condition: config.links.academic.length > 0},
         {name: 'links.blog', route: config.links.blogRoute, icon: 'pen-nib', condition: config.links.blog},
-        {name: 'links.zine.header', route: config.links.zine.route, icon: 'zine.svg', condition: config.links.zine && config.links.zine.enabled},
+        {name: 'links.zine.header', route: config.links.zine.route, icon: 'zine.svg', iconInverse: darkMode, condition: config.links.zine && config.links.zine.enabled},
         {name: 'links.mediaShort', route: config.links.mediaRoute, icon: 'tv', condition: config.links.mediaGuests.length > 0 || config.links.mediaMentions.length > 0},
         {name: 'faq.header', route: config.faq.route, icon: 'map-marker-question', condition: config.faq.enabled},
         {name: 'english.header', route: config.english.route, icon: 'globe-americas', condition: config.english.enabled},
     ]"/>
 </template>
+
+<script>
+    import {mapState} from "vuex";
+
+    export default {
+        computed: {
+            ...mapState([
+                'darkMode',
+            ]),
+        },
+    };
+</script>

components/ModeSwitch.vue

@@ -38,6 +38,7 @@
             isDark(dark) {
                 this.$eventHub.$emit('mode-changed', dark);
                 this.setMode(dark);
+                this.$store.commit('setDarkMode', dark);
             }
         }
     }

components/Submenu.vue

@@ -1,20 +1,20 @@
 <template>
     <section class="mt-4 mt-lg-0">
         <div class="d-none d-md-inline-flex btn-group btn-block mb-2 w-100">
-            <router-link v-for="{name, icon, route, condition} in links" :key="name"
+            <router-link v-for="{name, icon, iconInverse, route, condition} in links" :key="name"
                          v-if="condition === undefined || condition === true"
                          :to="buildRoute(route)"
                          :class="['btn', isActiveRoute(route) ? 'btn-primary' : 'btn-outline-primary']">
-                <Icon :v="icon"/>
+                <Icon :v="icon" :inverse="iconInverse === undefined ? false : (iconInverse || isActiveRoute(route))"/>
                 <T>{{name}}</T>
             </router-link>
         </div>
         <div class="d-block d-md-none btn-group-vertical btn-block mb-2 w-100">
-            <router-link v-for="{name, icon, route, condition} in links" :key="name"
+            <router-link v-for="{name, icon, iconInverse, route, condition} in links" :key="name"
                          v-if="condition === undefined || condition === true"
                          :to="buildRoute(route)"
                          :class="['btn', isActiveRoute(route) ? 'btn-primary' : 'btn-outline-primary']">
-                <Icon :v="icon"/>
+                <Icon :v="icon" :inverse="iconInverse === undefined ? false : (iconInverse || isActiveRoute(route))"/>
                 <T>{{name}}</T>
             </router-link>
         </div>

routes/zine.vue

@@ -3,7 +3,7 @@
         <LinksNav/>
 
         <h2>
-            <Icon v="zine.svg"/>
+            <Icon v="zine.svg" :inverse="darkMode"/>
             <T>links.zine.headerLong</T>
         </h2>
 
@@ -45,8 +45,14 @@
 
 <script>
     import { head } from "../src/helpers";
+    import {mapState} from "vuex";
 
     export default {
+        computed: {
+            ...mapState([
+                'darkMode',
+            ]),
+        },
         head() {
             return head({
                 title: this.$t('links.zine.headerLong'),

static/img/zine-inverse.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 576 512"
+   version="1.1"
+   id="svg12"
+   sodipodi:docname="zine.svg"
+   inkscape:version="1.0.1 (c497b03c, 2020-09-10)">
+  <metadata
+     id="metadata18">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1680"
+     inkscape:window-height="936"
+     id="namedview14"
+     showgrid="false"
+     inkscape:zoom="1.2986111"
+     inkscape:cx="300.32086"
+     inkscape:cy="234.4385"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg12" />
+  <path
+     style="fill:#fcf434;fill-opacity:1;stroke:none;stroke-width:0.932861px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 17.71123,144.24109 268.74866,45.56838 V 89.961088 L 91.636364,47.743316 32.342246,52.434179 12.320856,83.259855 Z"
+     id="path20" />
+  <path
+     style="fill:#2c2c2c;fill-opacity:1;stroke:none;stroke-width:0.985021px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 15.40107,351.47584 3.080213,57.53104 30.802139,21.66753 233.326208,32.12773 -1.54011,-99.37179 -266.438504,-56.03673 z"
+     id="path845" />
+  <path
+     style="fill:#9c59d1;fill-opacity:1;stroke:none;stroke-width:1.03076px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 17.71123,226.39572 267.97861,57.27125 -4.62032,85.08869 -266.438504,-61.36204 z"
+     id="path847" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.05748px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 17.71123,220.02043 267.97861,60.27904 0.77005,-77.50162 -268.74866,-58.55676 z"
+     id="path849" />
+  <path
+     d="M514.91 32h-.16c-24.08.12-144.75 8.83-219.56 48.09-4.05 2.12-10.33 2.12-14.38 0C205.99 40.83 85.32 32.12 61.25 32h-.16C27.4 32 0 58.47 0 91.01v296.7c0 31.41 25.41 57.28 57.85 58.9 34.77 1.76 122.03 8.26 181.89 30.37 5.27 1.95 10.64 3.02 16.25 3.02h64c5.62 0 10.99-1.08 16.26-3.02 59.87-22.11 147.12-28.61 181.92-30.37 32.41-1.62 57.82-27.48 57.82-58.89V91.01C576 58.47 548.6 32 514.91 32zM272 433c0 8.61-7.14 15.13-15.26 15.13-1.77 0-3.59-.31-5.39-.98-62.45-23.21-148.99-30.33-191.91-32.51-15.39-.77-27.44-12.6-27.44-26.93V91.01c0-14.89 13.06-27 29.09-27 19.28.1 122.46 7.38 192.12 38.29 11.26 5 18.64 15.75 18.66 27.84l.13 100.32V433zm272-45.29c0 14.33-12.05 26.16-27.45 26.93-42.92 2.18-129.46 9.3-191.91 32.51-1.8.67-3.62.98-5.39.98-8.11 0-15.26-6.52-15.26-15.13V230.46l.13-100.32c.01-12.09 7.4-22.84 18.66-27.84 69.66-30.91 172.84-38.19 192.12-38.29 16.03 0 29.09 12.11 29.09 27v296.7z"
+     id="path10" fill="#fff"/>
+</svg>

store/index.js

@@ -4,6 +4,7 @@ export const state = () => ({
     token: null,
     user: null,
     spelling: 'traditional',
+    darkMode: false,
 })
 
 export const mutations = {
@@ -38,4 +39,7 @@ export const mutations = {
     setSpelling(state, spelling) {
         state.spelling = spelling;
     },
+    setDarkMode(state, isDark) {
+        state.darkMode = isDark;
+    }
 }