Support setting sliders brighter #13

When dark theme is used, sliders (especially progress on fullscreen) tend to look a little too dark (as if they were disabled). To overcome this, add an option to force them to be 20% brighter.

clapper_src/app.js

@@ -39,6 +39,12 @@ class ClapperApp extends Gtk.Application
         if(!settings.get_boolean('render-shadows'))
             window.add_css_class('gpufriendly');
 
+        if(
+            settings.get_boolean('dark-theme')
+            && settings.get_boolean('brighter-sliders')
+        )
+            window.add_css_class('brightscale');
+
         for(let action in Menu.actions) {
             let simpleAction = new Gio.SimpleAction({
                 name: action

clapper_src/playerBase.js

@@ -178,7 +178,7 @@ class ClapperPlayerBase extends GstPlayer.Player
 
     _onSettingsKeyChanged(settings, key)
     {
-        let value;
+        let root, value, action;
 
         switch(key) {
             case 'seeking-mode':
@@ -210,18 +210,20 @@ class ClapperPlayerBase extends GstPlayer.Player
                 }
                 break;
             case 'render-shadows':
-                let root = this.widget.get_root();
+                root = this.widget.get_root();
-                if(root && root.isClapperApp) {
+                /* Editing theme of someone else app is taboo */
-                    let cssClass = 'gpufriendly';
+                if(!root || !root.isClapperApp)
-                    let renderShadows = settings.get_boolean('render-shadows');
+                    break;
-                    let hasShadows = !root.has_css_class(cssClass);
 
-                    if(renderShadows === hasShadows)
+                let gpuClass = 'gpufriendly';
-                        break;
+                let renderShadows = settings.get_boolean(key);
+                let hasShadows = !root.has_css_class(gpuClass);
 
-                    let action = (renderShadows) ? 'remove' : 'add';
+                if(renderShadows === hasShadows)
-                    root[action + '_css_class'](cssClass);
+                    break;
-                }
+
+                action = (renderShadows) ? 'remove' : 'add';
+                root[action + '_css_class'](gpuClass);
                 break;
             case 'audio-offset':
                 value = Math.round(settings.get_double(key) * -1000000);
@@ -233,6 +235,29 @@ class ClapperPlayerBase extends GstPlayer.Player
                 this.set_subtitle_video_offset(value);
                 debug(`set subtitle-video offset: ${value}`);
                 break;
+            case 'dark-theme':
+            case 'brighter-sliders':
+                root = this.widget.get_root();
+                if(!root || !root.isClapperApp)
+                    break;
+
+                let brightClass = 'brightscale';
+                let isBrighter = root.has_css_class(brightClass);
+
+                if(key === 'dark-theme' && isBrighter && !settings.get_boolean(key)) {
+                    root.remove_css_class(brightClass);
+                    debug('remove brighter sliders');
+                    break;
+                }
+
+                let setBrighter = settings.get_boolean('brighter-sliders');
+                if(setBrighter === isBrighter)
+                    break;
+
+                action = (setBrighter) ? 'add' : 'remove';
+                root[action + '_css_class'](brightClass);
+                debug(`${action} brighter sliders`);
+                break;
             default:
                 break;
         }

clapper_src/prefs.js

@@ -24,7 +24,10 @@ class ClapperGeneralPage extends PrefsBase.Grid
         comboBox.connect('changed', this._onVolumeInitialChanged.bind(this, spinButton));
 
         this.addTitle('Appearance');
-        this.addCheckButton('Enable dark theme', 'dark-theme');
+        let darkCheck = this.addCheckButton('Enable dark theme', 'dark-theme');
+        let brighterCheck = this.addCheckButton('Make sliders brighter', 'brighter-sliders');
+        this._onDarkThemeToggled(brighterCheck, darkCheck);
+        darkCheck.connect('toggled', this._onDarkThemeToggled.bind(this, brighterCheck));
     }
 
     _onVolumeInitialChanged(spinButton, comboBox)
@@ -32,6 +35,12 @@ class ClapperGeneralPage extends PrefsBase.Grid
         let value = comboBox.get_active_id();
         spinButton.set_visible(value === 'custom');
     }
+
+    _onDarkThemeToggled(brighterCheck, darkCheck)
+    {
+        let isActive = darkCheck.get_active();
+        brighterCheck.set_visible(isActive);
+    }
 });
 
 var BehaviourPage = GObject.registerClass(

css/styles.css

@@ -156,3 +156,6 @@ scale marks {
 .gpufriendlyfs {
   box-shadow: none;
 }
+.brightscale trough highlight {
+  filter: brightness(120%);
+}

data/com.github.rafostar.Clapper.gschema.xml

@@ -18,6 +18,10 @@
       <default>false</default>
       <summary>Enable to force the app to use dark theme variant</summary>
     </key>
+    <key name="brighter-sliders" type="b">
+      <default>true</default>
+      <summary>Enable to make all sliders/bars brighter</summary>
+    </key>
 
     <!-- Behaviour -->
     <key name="seeking-mode" type="s">