feature: add theme type 'light filter'

aleksey-hoffman · Oct 10, 2021 · 273ff8c · 273ff8c
1 parent 702a88c
commit 273ff8c
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 36 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -6,6 +6,7 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
 <template>
   <v-app 
     :data-theme-type="themeType" 
+    :route-name="$route.name" 
     :display-accent-color-backgrounds="displayAccentColorBackgrounds" 
   >
     <window-toolbar/>
@@ -89,7 +90,10 @@ export default {
       else {
         this.$store.dispatch('DEHIGHLIGHT_ALL_DIR_ITEMS')
       }
-    }
+    },
+    themeType () {
+      this.setCSSAttributes('visual-filters')
+    },
   },
   created () {
     this.$store.dispatch('CLONE_STATE')
@@ -200,6 +204,19 @@ export default {
     },
   },
   methods: {
+    setCSSAttributes (name) {
+      if (name === 'visual-filters') {
+        let htmlNode = document.querySelector('html')
+        let invertInverse = this.themeType === 'light-filter' ? 1 : 0
+        let hueRotateInverse = this.themeType === 'light-filter' ? '180deg' : '0deg'
+
+        htmlNode.style.setProperty('--visual-filter-invert', this.themeType === 'light-filter' ? 1 : 0)
+        htmlNode.style.setProperty('--visual-filter-hue-rotate', this.themeType === 'light-filter' ? '180deg' : '0deg')
+
+        htmlNode.style.setProperty('--visual-filter-invert-inverse', invertInverse)
+        htmlNode.style.setProperty('--visual-filter-hue-rotate-inverse', hueRotateInverse)
+      }
+    },
     initEventHubListeners () {
       this.$eventHub.$on('app:method', payload => {
         this[payload.method](payload.params)
@@ -1139,6 +1156,25 @@ export default {
 @import url('./styles/globalTransitions.css');
 @import url('./styles/scrollbars.css');
 
+html {
+  overflow: hidden !important;
+  filter:
+    invert(var(--visual-filter-invert)) 
+    hue-rotate(var(--visual-filter-hue-rotate)) 
+}
+
+img,
+picture,
+video,
+.media-banner__inner__container--left,
+.overlay--window-transparency-effect__media,
+#app[route-name='home'] 
+  .window-toolbar__item {
+    filter: 
+      invert(var(--visual-filter-invert-inverse)) 
+      hue-rotate(var(--visual-filter-hue-rotate-inverse)) 
+  }
+
 #app,
 .v-application,
 .theme--light.v-card {
@@ -1158,10 +1194,6 @@ pre {
   font-size: 18px;
 }
 
-html {
-  overflow: hidden !important;
-}
-
 .app-content {
   padding-top: var(--header-height) !important;
   background-color: var(--app-content-bg-color);

diff --git a/src/components/WindowEffects.vue b/src/components/WindowEffects.vue
@@ -9,19 +9,11 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
       class="overlay--window-transparency-effect__media" 
       v-if="currentPageEffects.windowTransparencyEffect.background.type === 'image'"
       :src="$storeUtils.getSafePath(currentPageEffects.windowTransparencyEffect.background.path)"
-      :style="{
-        'filter': `blur(${currentPageEffects.windowTransparencyEffect.blur}px)`,
-        'opacity': currentPageEffects.windowTransparencyEffect.opacity / 100
-      }"
     >
     <video
       class="overlay--window-transparency-effect__media" 
       v-if="currentPageEffects.windowTransparencyEffect.background.type === 'video'"
       :src="$storeUtils.getSafePath(currentPageEffects.windowTransparencyEffect.background.path)"
-      :style="{
-        'filter': `blur(${currentPageEffects.windowTransparencyEffect.blur}px)`,
-        'opacity': currentPageEffects.windowTransparencyEffect.opacity / 100
-      }"
       autoplay loop muted
     />
   </div>
@@ -60,6 +52,15 @@ export default {
     },
     'UIZoomLevel' () {
       this.transformMedia()
+    },
+    'currentPageEffects.windowTransparencyEffect.blur' () {
+      this.setOverlayCSS()
+    },
+    'currentPageEffects.windowTransparencyEffect.opacity' () {
+      this.setOverlayCSS()
+    },
+    themeType () {
+      this.setOverlayCSS()
     }
   },
   computed: {
@@ -73,6 +74,7 @@ export default {
       windowTransparencyEffectBlur: 'storageData.settings.windowTransparencyEffect.options.selectedPage.blur',
       windowTransparencyEffectOpacity: 'storageData.settings.windowTransparencyEffect.options.selectedPage.opacity',
       UIZoomLevel: 'storageData.settings.UIZoomLevel',
+      themeType: 'storageData.settings.theme.type',
     }),
     currentPageEffects () {
       try {
@@ -120,6 +122,18 @@ export default {
     }
   },
   methods: {
+    setOverlayCSS () {
+      let overlayNode = document.querySelector('.overlay--window-transparency-effect__media')
+      let blur = `${this.currentPageEffects.windowTransparencyEffect.blur}px`
+      let opacity = this.currentPageEffects.windowTransparencyEffect.opacity / 100
+      let invertInverse = this.themeType === 'light-filter' ? 1 : 0
+      let hueRotateInverse = this.themeType === 'light-filter' ? '180deg' : '0deg'
+        
+      overlayNode.style.setProperty('--blur', blur)
+      overlayNode.style.setProperty('--visual-filter-invert-inverse', invertInverse)
+      overlayNode.style.setProperty('--visual-filter-hue-rotate-inverse', hueRotateInverse)
+      overlayNode.style.opacity = opacity
+    },
     initIPCListeners () {
       electron.ipcRenderer.on('main-window-move', (event, data) => {
         this.handleWindowTransform()
@@ -170,7 +184,10 @@ export default {
   pointer-events: none;
   position: fixed;
   object-fit: cover;
-  filter: blur(56px);
+  filter: 
+    blur(var(--blur)) 
+    invert(var(--visual-filter-invert-inverse)) 
+    hue-rotate(var(--visual-filter-hue-rotate-inverse));
   opacity: 0.1;
   transition: transform 0.1s;
 }

diff --git a/src/styles/globalVariables.css b/src/styles/globalVariables.css
@@ -17,7 +17,8 @@
 
 #app[data-theme-type="light"] {}
 
-#app[data-theme-type="dark"] {
+#app[data-theme-type="dark"],
+#app[data-theme-type="light-filter"] {
   --main-color-1: rgba(47, 52, 68);
   --key-color-1: #607d8b;
   --key-color-1-darker-1: rgb(55, 68, 88);

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -403,27 +403,6 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
 
             <!-- tab::ui-appearance -->
             <v-tab-item transition="fade-in" reverse-transition="fade-in">
-              <!-- TODO: finish when light theme is added -->
-              <!-- <section-settings
-                class="content-area__content-card__section"
-                :header="{
-                  icon: {
-                    name: 'mdi-contrast-box'
-                  },
-                  title: 'Theme'
-                }"
-              >
-                <template v-slot:content>
-                  <div class="text--sub-title-1 mt-2">
-                    Theme type
-                  </div>
-                  <v-radio-group v-model="themeType" hide-details class="py-0 mt-0">
-                    <v-radio label="Light" value="light"></v-radio>
-                    <v-radio label="Dark" value="dark"></v-radio>
-                  </v-radio-group>
-                </template>
-              </section-settings> -->
-
               <section-settings
                 class="content-area__content-card__section"
                 :header="{
@@ -613,6 +592,44 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
                 </template>
               </section-settings>
 
+              <section-settings
+                class="content-area__content-card__section"
+                :header="{
+                  icon: {
+                    name: 'mdi-palette'
+                  },
+                  title: 'Theme'
+                }"
+              >
+                <template v-slot:content>
+                  <div class="text--sub-title-1 mt-2">
+                    Theme type
+                  </div>
+
+                  <v-radio-group
+                    class="py-0 mt-0"
+                    v-model="themeType"
+                    hide-details
+                  >
+                    <v-radio
+                      label="Dark"
+                      value="dark"
+                    ></v-radio>
+
+                    <v-radio
+                      label="Light filter"
+                      value="light-filter"
+                    ></v-radio>
+
+                    <v-radio
+                      label="Light (in development)"
+                      value="light"
+                      disabled
+                    ></v-radio>
+                  </v-radio-group>
+                </template>
+              </section-settings>
+
               <section-settings
                 class="content-area__content-card__section"
                 :header="{