added accent color and window color tinting

- rearranged some of visual tab in settings
- added advanced section to visual

src/i18n/en_US.json

@@ -450,10 +450,14 @@
   "settings.header.visual": "Visual",
   "settings.header.visual.description": "Adjust the visual settings for Cider.",
   "settings.option.visual.windowStyle": "Window Style",
+  "settings.option.visual.customAccentColor": "Custom Accent Color",
+  "settings.option.visual.accentColor": "Accent Color",
+  "settings.option.visual.windowColor": "Window Tint Color",
   "settings.option.visual.windowBackgroundStyle": "Window Background Style",
   "settings.header.visual.windowBackgroundStyle.none": "None",
   "settings.header.visual.windowBackgroundStyle.artwork": "Artwork",
   "settings.header.visual.windowBackgroundStyle.image": "Image",
+  "settings.header.visual.windowBackgroundStyle.color": "Color Tint",
   "settings.option.visual.animatedArtwork": "Animated Artwork",
   "settings.header.visual.animatedArtwork.always": "Always",
   "settings.header.visual.animatedArtwork.limited": "Limited to pages and special entries",

src/main/base/store.ts

@@ -205,7 +205,10 @@ export class Store {
             },
             "windowControlPosition": 0, // 0 default right
             "nativeTitleBar": false,
-            "uiScale": 1.0
+            "uiScale": 1.0,
+            "windowColor": "#000000",
+            "customAccentColor": false,
+            "accentColor": "#fc3c44"
         },
         "lyrics": {
             "enable_mxm": false,

src/renderer/less/ameframework.less

@@ -23,6 +23,10 @@
     padding: 14px;
     background: var(--opaquePageBGColor);
     font-size: 0.85em;
+
+    &.child {
+        background: rgb(0 0 0 / 15%);
+    }
 }
 
 .md-option-segment.md-option-segment_auto {

src/renderer/main/vueapp.js

@@ -283,6 +283,17 @@ const app = new Vue({
             ipcRenderer.invoke("renderer-ready", true)
             document.querySelector("#LOADER").remove()
         },
+        getAppStyle() {
+            let finalStyle = {}
+            if(this.cfg.visual.window_background_style === "color") {
+                finalStyle["background-color"] = this.cfg.visual.windowColor
+            }
+            if(this.cfg.visual.customAccentColor) {
+                finalStyle["--keyColor"] = this.cfg.visual.accentColor
+                finalStyle["--songProgressColor"] = this.cfg.visual.accentColor
+            }
+            return finalStyle
+        },
         setTimeout(func, time) {
             return setTimeout(func, time);
         },

src/renderer/style.less

@@ -31,6 +31,7 @@
   --selected-click: rgb(80 80 80 / 30%);
   --hover: rgb(200 200 200 / 10%);
   // --keyColor: #fa586a;
+  --keyColorDefault: @keyColor;
   --keyColor: @keyColor;
   --keyColor-rgb: 250, 88, 106;
   --keyColor-rollover: #ff8a9c;

src/renderer/views/main.ejs

@@ -71,7 +71,7 @@
     <div id="LOADER">
         <%- include("../assets/cider-round.svg") %>
     </div>
-    <div id="app" :class="getAppClasses()" :window-style="cfg.visual.directives.windowLayout">
+    <div id="app" :class="getAppClasses()" :style="getAppStyle()" :window-style="cfg.visual.directives.windowLayout">
         <transition name="fsModeSwitch">
             <div id="app-main" v-show="appMode == 'player'">
                 <%- include('app/chrome-top'); %>

src/renderer/views/pages/settings.ejs

@@ -96,7 +96,8 @@
                                         <option value="listen_now">{{$root.getLz('term.listenNow')}}</option>
                                         <option value="browse">{{$root.getLz('term.browse')}}</option>
                                         <option value="radio">{{$root.getLz('term.radio')}}</option>
-                                        <option value="library-recentlyadded">{{$root.getLz('term.recentlyAdded')}}</option>
+                                        <option value="library-recentlyadded">{{$root.getLz('term.recentlyAdded')}}
+                                        </option>
                                         <option value="library-songs">{{$root.getLz('term.songs')}}</option>
                                         <option value="library-albums">{{$root.getLz('term.albums')}}</option>
                                         <option value="library-artists">{{$root.getLz('term.artists')}}</option>
@@ -124,7 +125,8 @@
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
                                             <label>
-                                                <input type="checkbox" v-model="app.cfg.general.sidebarItems.recentlyAdded"
+                                                <input type="checkbox"
+                                                       v-model="app.cfg.general.sidebarItems.recentlyAdded"
                                                        switch/>
                                             </label>
                                         </div>
@@ -135,7 +137,8 @@
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
                                             <label>
-                                                <input type="checkbox" v-model="app.cfg.general.sidebarItems.songs" switch/>
+                                                <input type="checkbox" v-model="app.cfg.general.sidebarItems.songs"
+                                                       switch/>
                                             </label>
                                         </div>
                                     </div>
@@ -191,7 +194,7 @@
                                 {{$root.getLz('settings.option.general.keybindings')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn" @click="app.appRoute('keybinds-settings')" >
+                                <button class="md-btn" @click="app.appRoute('keybinds-settings')">
                                     {{$root.getLz('settings.option.general.keybindings.open')}}
                                 </button>
                             </div>
@@ -241,7 +244,8 @@
                                         <option value="HIGH">{{$root.getLz('settings.header.audio.quality.high')}}
                                             ({{$root.getLz('settings.header.audio.quality.high.description')}})
                                         </option>
-                                        <option value="STANDARD">{{$root.getLz('settings.header.audio.quality.standard')}}
+                                        <option value="STANDARD">
+                                            {{$root.getLz('settings.header.audio.quality.standard')}}
                                             ({{$root.getLz('settings.header.audio.quality.standard.description')}})
                                         </option>
                                     </select>
@@ -334,7 +338,8 @@
                                 </label>
                             </div>
                         </div>
-                        <div class="md-option-line" v-show="app.cfg.advanced.AudioContext && app.cfg.audio.normalization">
+                        <div class="md-option-line"
+                             v-show="app.cfg.advanced.AudioContext && app.cfg.audio.normalization">
                             <div class="md-option-segment">
                                 {{$root.getLz('settings.option.audio.dbspl.display')}}
                                 <br>
@@ -408,6 +413,9 @@
                                         <option value="image">
                                             {{$root.getLz('settings.header.visual.windowBackgroundStyle.image')}}
                                         </option>
+                                        <option value="color">
+                                            {{$root.getLz('settings.header.visual.windowBackgroundStyle.color')}}
+                                        </option>
                                         <option value="mica">
                                             Mica (Beta)
                                         </option>
@@ -415,6 +423,113 @@
                                 </label>
                             </div>
                         </div>
+                        <div class="md-option-line child" v-if="app.cfg.visual.window_background_style == 'color'">
+                            <div class="md-option-segment">
+                                {{$root.getLz('settings.option.visual.windowColor')}}
+                            </div>
+                            <div class="md-option-segment_auto">
+                                <input type="color" v-model="app.cfg.visual.windowColor"/>
+                            </div>
+                        </div>
+                        <div class="md-option-line">
+                            <div class="md-option-segment">
+                                {{$root.getLz('settings.option.visual.customAccentColor')}}
+                            </div>
+                            <div class="md-option-segment_auto">
+                                <input type="checkbox" v-model="app.cfg.visual.customAccentColor" switch/>
+                            </div>
+                        </div>
+                        <div class="md-option-line child" v-if="app.cfg.visual.customAccentColor">
+                            <div class="md-option-segment">
+                                {{$root.getLz('settings.option.visual.accentColor')}}
+                            </div>
+                            <div class="md-option-segment_auto">
+                                <input type="color" v-model="app.cfg.visual.accentColor"/>
+                            </div>
+                        </div>
+                        <div class="md-option-line">
+                            <div class="md-option-segment">
+                                {{$root.getLz('settings.option.visual.hardwareAcceleration')}}<br>
+                                <small>({{$root.getLz('settings.option.visual.hardwareAcceleration.description')}})</small>
+                            </div>
+                            <div class="md-option-segment md-option-segment_auto">
+                                <label>
+                                    <select class="md-select" style="width:180px;"
+                                            v-model="app.cfg.visual.hw_acceleration" @change="promptForRelaunch()">
+                                        <option value="default">
+                                            {{$root.getLz('settings.header.visual.hardwareAcceleration.default')}}
+                                        </option>
+                                        <option value="webgpu">
+                                            {{$root.getLz('settings.header.visual.hardwareAcceleration.webGPU')}}
+                                        </option>
+                                        <option value="disabled">{{$root.getLz('term.disabled')}}</option>
+                                    </select>
+                                </label>
+                            </div>
+                        </div>
+                        <div class="md-option-line">
+                            <div class="md-option-segment">
+                                {{$root.getLz('settings.option.visual.showPersonalInfo')}}
+                            </div>
+                            <div class="md-option-segment md-option-segment_auto">
+                                <label>
+                                    <input type="checkbox" v-model="app.cfg.visual.showuserinfo"
+                                           v-on:change="toggleUserInfo"
+                                           switch/>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Window Settings -->
+                    <div class="md-option-header">
+                        <span>{{$root.getLz('settings.header.window')}}</span>
+                    </div>
+                    <div class="settings-option-body">
+                        <div class="md-option-line" v-show="app.platform !== 'darwin'">
+                            <div class="md-option-segment">
+                                {{$root.getLz("settings.option.window.close_button_hide")}}
+                            </div>
+                            <div class="md-option-segment md-option-segment_auto">
+                                <label>
+                                    <input type="checkbox" v-model="app.cfg.general.close_button_hide" switch/>
+                                </label>
+                            </div>
+                        </div>
+                        <div class="md-option-line" v-show="app.platform !== 'darwin'">
+                            <div class="md-option-segment">
+                                {{$root.getLz("settings.option.window.useNativeTitleBar")}}<br>
+                                <small>({{$root.getLz("settings.option.visual.hardwareAcceleration.description")}})</small>
+                            </div>
+                            <div class="md-option-segment md-option-segment_auto">
+                                <label>
+                                    <input type="checkbox" v-model="app.cfg.visual.nativeTitleBar" switch
+                                           @change="promptForRelaunch()"/>
+                                </label>
+                            </div>
+                        </div>
+                        <div class="md-option-line" v-show="app.platform !== 'darwin'">
+                            <div class="md-option-segment">
+                                {{$root.getLz("settings.option.window.windowControlStyle")}}
+                            </div>
+                            <div class="md-option-segment md-option-segment_auto">
+                                <label>
+                                    <select class="md-select" v-model="app.cfg.visual.windowControlPosition">
+                                        <option value="0">
+                                            {{$root.getLz("settings.option.window.windowControlStyle.right")}}
+                                        </option>
+                                        <option value="1">
+                                            {{$root.getLz("settings.option.window.windowControlStyle.left")}}
+                                        </option>
+                                    </select>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Advanced Visual -->
+                    <div class="md-option-header">
+                        <span>{{$root.getLz('settings.header.advanced')}}</span>
+                    </div>
+                    <div class="settings-option-body">
                         <div class="md-option-line">
                             <div class="md-option-segment">
                                 {{$root.getLz('settings.option.visual.animatedArtwork')}}
@@ -483,83 +598,8 @@
                                 </label>
                             </div>
                         </div>
-                        <div class="md-option-line">
-                            <div class="md-option-segment">
-                                {{$root.getLz('settings.option.visual.hardwareAcceleration')}}<br>
-                                <small>({{$root.getLz('settings.option.visual.hardwareAcceleration.description')}})</small>
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <label>
-                                    <select class="md-select" style="width:180px;" v-model="app.cfg.visual.hw_acceleration" @change="promptForRelaunch()">
-                                        <option value="default">
-                                            {{$root.getLz('settings.header.visual.hardwareAcceleration.default')}}
-                                        </option>
-                                        <option value="webgpu">
-                                            {{$root.getLz('settings.header.visual.hardwareAcceleration.webGPU')}}
-                                        </option>
-                                        <option value="disabled">{{$root.getLz('term.disabled')}}</option>
-                                    </select>
-                                </label>
-                            </div>
-                        </div>
-                        <div class="md-option-line">
-                            <div class="md-option-segment">
-                                {{$root.getLz('settings.option.visual.showPersonalInfo')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <label>
-                                    <input type="checkbox" v-model="app.cfg.visual.showuserinfo"
-                                           v-on:change="toggleUserInfo"
-                                           switch/>
-                                </label>
-                            </div>
-                        </div>
-                    </div>
-                    <!-- Window Settings -->
-                    <div class="md-option-header">
-                        <span>{{$root.getLz('settings.header.window')}}</span>
-                    </div>
-                    <div class="settings-option-body">
-                        <div class="md-option-line" v-show="app.platform !== 'darwin'">
-                            <div class="md-option-segment">
-                                {{$root.getLz("settings.option.window.close_button_hide")}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <label>
-                                    <input type="checkbox" v-model="app.cfg.general.close_button_hide" switch/>
-                                </label>
-                            </div>
-                        </div>
-                        <div class="md-option-line" v-show="app.platform !== 'darwin'">
-                            <div class="md-option-segment">
-                                {{$root.getLz("settings.option.window.useNativeTitleBar")}}<br>
-                                <small>({{$root.getLz("settings.option.visual.hardwareAcceleration.description")}})</small>
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <label>
-                                    <input type="checkbox" v-model="app.cfg.visual.nativeTitleBar" switch
-                                    @change="promptForRelaunch()"/>
-                                </label>
-                            </div>
-                        </div>
-                        <div class="md-option-line" v-show="app.platform !== 'darwin'">
-                            <div class="md-option-segment">
-                                {{$root.getLz("settings.option.window.windowControlStyle")}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <label>
-                                    <select class="md-select" v-model="app.cfg.visual.windowControlPosition">
-                                        <option value="0">
-                                            {{$root.getLz("settings.option.window.windowControlStyle.right")}}
-                                        </option>
-                                        <option value="1">
-                                            {{$root.getLz("settings.option.window.windowControlStyle.left")}}
-                                        </option>
-                                    </select>
-                                </label>
-                            </div>
-                        </div>
                     </div>
+
                 </div>
             </b-tab>
             <b-tab :title="$root.getLz('settings.header.lyrics')">
@@ -1047,7 +1087,8 @@
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
                                 <label>
-                                    <input type="checkbox" v-model="app.cfg.lastfm.enabledRemoveFeaturingArtists" switch/>
+                                    <input type="checkbox" v-model="app.cfg.lastfm.enabledRemoveFeaturingArtists"
+                                           switch/>
                                 </label>
                             </div>
                         </div>
@@ -1185,7 +1226,8 @@
                                     <select class="md-select" @change="$root.setLz('');$root.setLzManual()"
                                             v-model="app.cfg.general.language">
                                         <optgroup :label="index" v-for="(categories, index) in getLanguages()">
-                                            <option v-for="lang in categories" :value="lang.code">{{lang.nameNative}} ({{
+                                            <option v-for="lang in categories" :value="lang.code">{{lang.nameNative}}
+                                                ({{
                                                 lang.nameEnglish }})
                                             </option>
                                         </optgroup>
@@ -1451,7 +1493,7 @@
                 ipcRenderer.send('cc-logout')
             },
             reloadDiscordRPC() {
-	            ipcRenderer.send('reloadRPC')
+                ipcRenderer.send('reloadRPC')
             }
         }
     })