Completed theme switching functionality

src/components/LinkItems/Collapsable.vue

@@ -87,7 +87,6 @@ export default {
 
 <style scoped lang="scss">
 
-@import '@/styles/constants.scss';
 @import '@/styles/media-queries.scss';
 
 .collapsable {
@@ -143,7 +142,7 @@ export default {
         border-radius: var(--curve-factor);
         transition: all 0.25s ease-out;
         text-align: left;
-        color: var(--background-transparent);
+        color: var(--item-group-background);
 
         h3 {
             margin: 0;
@@ -177,8 +176,8 @@ export default {
         max-height: 0px;
         overflow: hidden;
         transition: max-height .25s ease-in-out;
-        background: var(--background-transparent);
-        border-radius: 0 0 $inner-radius $inner-radius;
+        background: var(--item-group-background);
+        border-radius: 0 0 var(--curve-factor) var(--curve-factor);
     }
 
     .toggle:checked + .lbl-toggle + .collapsible-content {

src/components/LinkItems/Item.vue

@@ -93,7 +93,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '../../../src/styles/constants.scss';
 
 .item {
   flex-grow: 1;

src/components/LinkItems/ItemGroup.vue

@@ -68,7 +68,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '../../../src/styles/constants.scss';
 
 .no-items {
     width: 100px;
@@ -76,7 +75,7 @@ export default {
     padding: 0.8rem;
     text-align: center;
     cursor: default;
-    border-radius: $curve-factor;
+    border-radius: var(--curve-factor);
     background: #607d8b33;
     color: var(--primary);
     box-shadow: 1px 1px 2px #373737;