Added transition to theme switch.

assets/components/tile/release.vue

@@ -184,13 +184,14 @@ export default {
 
 .tile {
     background: var(--background);
+    height: 100%;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
     padding: 0 0 .5rem 0;
     overflow: hidden;
-    box-shadow: 0 0 3px var(--shadow-weak);
-    height: 100%;
+    box-shadow: 0 0 3px var(--darken-weak);
+    transition: background var(--theme-transition);
 }
 
 .poster {
@@ -299,6 +300,7 @@ export default {
     line-height: 1.5;
     text-overflow: ellipsis;
     overflow: hidden;
+    transition: color var(--theme-transition);
 
     .icon {
         margin: 0 .25rem 0 0;
@@ -316,6 +318,7 @@ export default {
     overflow: hidden;
     max-height: 2.75rem;
     line-height: 1.5rem;
+    transition: color var(--theme-transition);
 }
 
 .tags {
@@ -358,6 +361,7 @@ export default {
     text-decoration: none;
     line-height: 1;
     border: solid 1px var(--shadow-hint);
+    transition: color var(--theme-transition), border-color var(--theme-transition);
 
     &:hover {
         color: var(--primary);

assets/components/tile/site.vue

@@ -47,18 +47,18 @@ export default {
 .logo {
     width: 100%;
     height: 5rem;
-    color: $text-contrast;
+    color: var(--text-contrast);
     display: flex;
     align-items: center;
     justify-content: center;
     object-fit: contain;
     font-size: 1rem;
     font-weight: bold;
-    filter: $logo-highlight;
+    filter: var(--logo-highlight);
 }
 
 .title {
-    color: $text;
+    color: var(--text);
     height: 100%;
     display: flex;
     align-items: center;