Finished primary color theming

src/components/Checkbox.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script>
-    import { getColor } from '../themer';
+    import { color } from '../themer';
 
     export default {
         name: 'checkbox',
@@ -26,13 +26,10 @@
             },
             updateStyle() {
                 const style = this.$refs.box.style;
-                const color = this.checked ? getColor('primary') : null;
+                const col = this.checked ? color : null;
 
-                style['border-color'] = color;
-                style['background'] = color;
-
-                console.log(color);
-                console.log(style);
+                style['border-color'] = col;
+                style['background'] = col;
             }
         }
     }

src/components/SelectItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="item" :class="{ 'user': mode === 'user', 'desktop': mode === 'desktop', 'selected': selected }" @click="select()">
+    <div class="item" :class="{ 'user': mode === 'user', 'desktop': mode === 'desktop', 'selected': selected }" v-theming="['border-bottom-color']" @click="select()">
         <div class="icon-container" v-if="!noicon">
             <img class="icon" :src="icon()" />
         </div>
@@ -70,8 +70,6 @@
 </script>
 
 <style lang="scss" scoped>
-    @import '../theme';
-
     .item {
         font-family: 'Lato', 'Noto Sans', sans-serif;
         font-style: italic;
@@ -83,7 +81,7 @@
     }
 
     .item.selected {
-        border-bottom: solid 2px $primary-color;
+        border-bottom: solid 2px;
         background: rgba(255, 255, 255, 0.055);
     }
 

src/themer.js

@@ -11,5 +11,5 @@ export function hook(element, rules) {
 
 export function update(hex) {
     color = hex;
-    localStorage.setItem('colors', color);
+    localStorage.setItem('color', color);
 }

src/views/Login.vue

@@ -11,7 +11,7 @@
                 <SelectItem mode="user" :item="settings.user" @select="!immutable && $router.push('/base/select/user')" :noicon="true" />
 
                 <form v-if="!immutable" @submit.prevent="submit">
-                    <input id="password" type="password" v-model="password" :placeholder="passwordLabel" :readonly="logging" :class="{'error': error}" v-theming="{ 'border-bottom-color': 'primary' }" />
+                    <input id="password" type="password" v-model="password" :placeholder="passwordLabel" :readonly="logging" :class="{'error': error}" v-theming="['border-bottom-color']" />
                 </form>
                 <div v-else id="password" class="immutable"></div>
                 <div id="info">

src/views/Setup.vue

@@ -104,7 +104,7 @@
     .layout {
         display: inline-block;
 
-        border: solid 2px $outer-foreground;
+        border: solid 2px darken($outer-foreground, 60);
         border-radius: 2px;
         transition: border-color 125ms ease-in-out;
 
@@ -118,11 +118,13 @@
 
     .layout:hover {
         cursor: pointer;
-        border-color: lighten($primary-color, 25);
+        // border-color: lighten($primary-color, 25);
+        border-color: darken($outer-foreground, 30);
     }
 
     .layout.selected {
-        border-color: $primary-color;
+        // border-color: $primary-color;
+        border-color: $outer-foreground;
     }
 
     #classic-layout {