make lightmode somewhat better

hellomouse · Sep 26, 2023 · d1e3b80 · d1e3b80
1 parent a90f5ee
commit d1e3b80
Show file tree

Hide file tree

Showing 12 changed files with 26 additions and 19 deletions.
diff --git a/TODO.txt b/TODO.txt
@@ -32,8 +32,6 @@ responsive mobile
 - fix share modal on phone
     - different ui on phone - click on user to show dropdown popped from bottom
 
-better light mode
-
 ----
 music player:
 - create playlists - left nav with playlists

diff --git a/assets/variables.scss b/assets/variables.scss
@@ -1,11 +1,13 @@
-$secondary-text-opacity: 0.7;
-
 :root {
     --border-color: #444;
+    --secondary-text-opacity: 0.7;
 }
 
 .v-theme--light {
     --border-color: #ccc;
+    --secondary-text-opacity: 1;
+    --v-border-opacity: 0.24;
+    --v-medium-emphasis-opacity: 0.8;
 }
 
 $pfp-size-tile: 50px;

diff --git a/components/ShareModal.vue b/components/ShareModal.vue
@@ -432,7 +432,7 @@ export default {
     }
 
     &__username {
-        opacity: $secondary-text-opacity;
+        opacity: var(--secondary-text-opacity);
         font-size: 0.9rem;
     }
 

diff --git a/components/board/Board.vue b/components/board/Board.vue
@@ -205,7 +205,7 @@ export default {
     }
 
     &__desc {
-        opacity: $secondary-text-opacity;
+        opacity: var(--secondary-text-opacity);
     }
 }
 </style>
diff --git a/components/board/LeftNav.vue b/components/board/LeftNav.vue
@@ -38,7 +38,7 @@
                         <NuxtLink v-for="board in boards" :key="board.id" :to="`/board/board?id=${board.id}`" @click="hideIfPhone()">
                             <div
                                 class="hoverable hover-list-item left-nav__list-item left-nav__board-item
-                                [ pl-3 text-truncate text-medium-emphasis ]"
+                                [ pl-3 text-truncate subtitle ]"
                             >
                                 <v-icon icon="mdi-subdirectory-arrow-right" />{{ board.name }}
                             </div>
@@ -150,6 +150,10 @@ export default {
 <style lang="scss" scoped>
 @import "~/assets/variables.scss";
 
+.subtitle {
+    opacity: var(--secondary-text-opacity);
+}
+
 .toggle-btn {
     position: fixed;
     left: $left-nav-width-pc + 15px;

diff --git a/components/pin/Link.vue b/components/pin/Link.vue
@@ -12,8 +12,8 @@
 
         <v-btn
             v-for="b in downloadContentArray" :key="b.strategy"
-            variant="tonal" size="small"
-            flat color="teal-lighten-3"
+            :variant="isLightTheme ? 'flat' : 'tonal'" size="small"
+            flat :color="isLightTheme ? 'teal-lighten-1' : 'teal-lighten-3'"
             :href="'/files/site_downloads/' + b.url"
             target="_blank"
             class="mb-1 mr-1" height="30"
@@ -24,6 +24,8 @@
 </template>
 
 <script>
+import { useOptionStore } from '~/store/optionStore.js';
+
 export default {
     props: {
         content: {
@@ -70,7 +72,8 @@ export default {
                         }[strategy]
                     }
                 });
-        }
+        },
+        isLightTheme() { return !useOptionStore(this.$pinia).dark_theme; }
     },
     watch: {
         content() {

diff --git a/components/pin/Modal.client.vue b/components/pin/Modal.client.vue
@@ -305,6 +305,6 @@ export default {
 @import "~/assets/variables.scss";
 
 .last-edited {
-    opacity: $secondary-text-opacity;
+    opacity: var(--secondary-text-opacity);
 }
 </style>
diff --git a/components/pin/Pin.vue b/components/pin/Pin.vue
@@ -542,7 +542,7 @@ export default {
         }
 
         &__creator {
-            opacity: $secondary-text-opacity
+            opacity: var(--secondary-text-opacity);
         }
         
         &__icon-row {
@@ -574,7 +574,7 @@ export default {
         .pin-tile__timestamp {
             display: inline-block;
             font-size: 0.75rem;
-            opacity: $secondary-text-opacity;
+            opacity: var(--secondary-text-opacity);
         }
 
         .v-btn {

diff --git a/components/ui/AppNavbar.vue b/components/ui/AppNavbar.vue
@@ -157,7 +157,7 @@ $popout-gap: 5px;
         font-size: 1.2rem;
     }
     &__user-id {
-        opacity: $secondary-text-opacity;
+        opacity: var(--secondary-text-opacity);
         margin-top: -2px;
     }
 

diff --git a/pages/board/board.vue b/pages/board/board.vue
@@ -983,7 +983,7 @@ export default {
     }
 }
 
-.subtitle { opacity: $secondary-text-opacity; }
+.subtitle { opacity: var(--secondary-text-opacity); }
 
 .bulk-pin-edits {
     position: fixed;
@@ -1033,7 +1033,7 @@ export default {
 
 // Board properties modal
 .board-properties {
-    color: rgb(var(--v-theme-on-surface), $secondary-text-opacity);
+    color: rgb(var(--v-theme-on-surface), var(--secondary-text-opacity));
 
     &__prop {
         width: 70px;

diff --git a/pages/login.vue b/pages/login.vue
@@ -127,7 +127,7 @@ export default {
 }
 
 .subtitle {
-    opacity: $secondary-text-opacity;
+    opacity: var(--secondary-text-opacity);
 }
 
 .login-container {

diff --git a/plugins/vuetify.js b/plugins/vuetify.js
@@ -45,8 +45,8 @@ export default defineNuxtPlugin(nuxtApp => {
                         warning: colors.amber.base,
                         error: colors.deepOrange.accent4,
                         success: colors.green.accent3,
-                        background: '#ffffff',
-                        surface: '#f7f7f7',
+                        background: '#fcfcfc', // '#f7f7f7',
+                        surface: '#ffffff',
                         'background-light': '#f2f2f2'
                     }
                 },