Added dark and SFW modes.

assets/components/tile/release.vue

@@ -44,7 +44,7 @@
                     v-tooltip.bottom="release.url && `View scene on ${release.site.name}`"
                     :title="release.url && `View scene on ${release.site.name}`"
                     :href="release.url"
-                    :class="{ upcoming: isAfter(release.date, new Date()), new: release.isNew }"
+                    :class="{ upcoming: isUpcoming, new: release.isNew }"
                     target="_blank"
                     rel="noopener noreferrer"
                     class="date"
@@ -166,6 +166,15 @@ export default {
             type: String,
             default: null,
         },
+        index: {
+            type: Number,
+            default: null,
+        },
+    },
+    data() {
+        return {
+            isUpcoming: this.isAfter(this.release.date, new Date()),
+        };
     },
 };
 </script>
@@ -174,13 +183,13 @@ export default {
 @import 'theme';
 
 .tile {
-    background: $background;
+    background: var(--background);
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
     padding: 0 0 .5rem 0;
     overflow: hidden;
-    box-shadow: 0 0 3px $shadow-weak;
+    box-shadow: 0 0 3px var(--shadow-weak);
     height: 100%;
 }
 
@@ -190,7 +199,7 @@ export default {
 }
 
 .covers {
-    background: $profile;
+    background: var(--profile);
     display: flex;
 
     .cover {
@@ -207,9 +216,9 @@ export default {
     object-fit: cover;
     background-position: center;
     background-size: cover;
-    background-color: $shadow-hint;
-    color: $shadow;
-    text-shadow: 1px 1px 0 $highlight;
+    background-color: var(--shadow-hint);
+    color: var(--shadow);
+    text-shadow: 1px 1px 0 var(--highlight);
 }
 
 .row {
@@ -236,10 +245,10 @@ export default {
 
 .site,
 .date {
-    color: $text-contrast;
+    color: var(--text-light);
     display: flex;
     align-items: center;
-    background: $shadow;
+    background: var(--darken);
     position: relative;
     font-size: .8rem;
     padding: .25rem;
@@ -249,7 +258,7 @@ export default {
 .date {
     &.upcoming:before {
         content: '';
-        background: $primary;
+        background: var(--primary);
         width: .5rem;
         display: inline-block;
         position: absolute;
@@ -269,7 +278,7 @@ export default {
 
 .site-link {
     display: flex;
-    color: $text-contrast;
+    color: var(--text-light);
     text-decoration: none;
 }
 
@@ -285,7 +294,7 @@ export default {
 
 .title {
     margin: 0 .25rem .25rem 0;
-    color: $text;
+    color: var(--text);
     max-height: 2.75rem;
     font-size: 1rem;
     line-height: 1.5;
@@ -333,26 +342,26 @@ export default {
     text-decoration: none;
 
     &:hover {
-        color: $primary;
+        color: var(--primary);
     }
 }
 
 .actor-link {
-    color: $link;
+    color: var(--link);
 }
 
 .tag-link {
-    color: $shadow;
+    color: var(--shadow);
     display: inline-block;
     padding: .25rem;
     font-size: .75rem;
     font-weight: bold;
     text-decoration: none;
     line-height: 1;
-    border: solid 1px $shadow-hint;
+    border: solid 1px var(--shadow-hint);
 
     &:hover {
-        color: $primary;
+        color: var(--primary);
     }
 }
 </style>

assets/components/tile/tag.vue

@@ -6,7 +6,7 @@
     >
         <img
             v-if="tag.poster"
-            :src="`/img/${tag.poster.thumbnail}`"
+            :src="sfw ? `/img/${tag.poster.sfw.thumbnail}` : `/img/${tag.poster.thumbnail}`"
             :alt="tag.name"
             class="poster"
         >
@@ -16,6 +16,10 @@
 </template>
 
 <script>
+function sfw() {
+    return this.$store.state.ui.sfw;
+}
+
 export default {
     props: {
         tag: {
@@ -23,6 +27,9 @@ export default {
             default: null,
         },
     },
+    computed: {
+        sfw,
+    },
 };
 </script>
 
@@ -30,8 +37,8 @@ export default {
 @import 'theme';
 
 .tile {
-    color: $text;
-    background: $background;
+    color: var(--text);
+    background: var(--background);
     display: flex;
     flex-direction: column;
     align-items: center;