Add style theme switcher

data/me.ppvan.psequel.gschema.xml

@@ -49,11 +49,11 @@
             </description>
         </key>
 
-        <key name="color-scheme" type="s">
-            <default>"Adwaita"</default>
-            <summary>Editor color scheme</summary>
+        <key name="color-scheme" type="i">
+            <default>0</default>
+            <summary>System color scheme</summary>
             <description>
-                Editor color scheme supported by Gtk Source View 5
+                Dark/Light theme follow system or not
             </description>
         </key>
 

res/gtk/connection-form.blp

@@ -1,6 +1,51 @@
 using Gtk 4.0;
 using Adw 1;
 
+
+menu primary_menu {
+
+  section {
+    item {
+      custom: "style-switcher";
+    }
+  }
+
+  section {
+    item {
+      label: _("_New Window");
+      action: "app.new-window";
+    }
+  }
+  section {
+    item {
+      label: _("_Import Connections");
+      action: "win.import";
+    }
+
+    item {
+      label: _("_Export Connections");
+      action: "win.export";
+    }
+  }
+
+  section {
+    item {
+      label: _("_Preferences");
+      action: "app.preferences";
+    }
+
+    item {
+      label: _("_Keyboard Shortcuts");
+      action: "win.show-help-overlay";
+    }
+
+    item {
+      label: _("_About");
+      action: "app.about";
+    }
+  }
+}
+
 template $PsequelConnectionForm : Adw.Bin {
 
     child: WindowHandle {
@@ -21,7 +66,15 @@ template $PsequelConnectionForm : Adw.Bin {
                 [end]
                 MenuButton {
                     icon-name: "open-menu-symbolic";
-                    menu-model: bind template.menu-model;
+                    menu-model: primary_menu;
+                    popover: Gtk.PopoverMenu {
+                        menu-model: primary_menu;
+
+                        [style-switcher]
+                        $PsequelStyleSwitcher {
+
+                        }
+                    };
                 }
             }
 

res/gtk/connection-view.blp

@@ -39,8 +39,14 @@ template $PsequelConnectionView : Adw.Bin {
 }
 
 
-
 menu primary_menu {
+
+  section {
+    item {
+      custom: "style-switcher";
+    }
+  }
+
   section {
     item {
       label: _("_New Window");
@@ -74,5 +80,10 @@ menu primary_menu {
       label: _("_About");
       action: "app.about";
     }
+
+    item {
+        label: _("_Dark");
+        action: "app.dark";
+    }
   }
 }

res/gtk/preferences-window.blp

@@ -86,10 +86,6 @@ template $PsequelPreferencesWindow : Adw.PreferencesWindow {
 
                 activated => $on_font_chooser();
             }
-
-            Adw.ComboRow color_scheme {
-                title: "Color scheme";
-            }
         }
     }
 

res/gtk/schema-main.blp

@@ -1,6 +1,41 @@
 using Gtk 4.0;
 using Adw 1;
 
+
+menu primary_menu {
+
+  section {
+    item {
+      custom: "style-switcher";
+    }
+  }
+
+  section {
+    item {
+      label: _("_New Window");
+      action: "app.new-window";
+    }
+  }
+
+  section {
+    item {
+      label: _("_Preferences");
+      action: "app.preferences";
+    }
+
+    item {
+      label: _("_Keyboard Shortcuts");
+      action: "win.show-help-overlay";
+    }
+
+    item {
+      label: _("_About");
+      action: "app.about";
+    }
+  }
+}
+
+
 template $PsequelSchemaMain : Gtk.Box {
     orientation: vertical;
     width-request: 920;
@@ -16,7 +51,16 @@ template $PsequelSchemaMain : Gtk.Box {
         [end]
         MenuButton {
             icon-name: "open-menu-symbolic";
-            menu-model: bind template.menu;
+            menu-model: primary_menu;
+            popover: Gtk.PopoverMenu {
+                menu-model: primary_menu;
+
+                [style-switcher]
+                $PsequelStyleSwitcher {
+
+                }
+            };
+
         }
     }
 

res/gtk/style-switcher.blp

@@ -0,0 +1,94 @@
+using Gtk 4.0;
+
+// Adapt from https://gitlab.gnome.org/raggesilver/blackbox/-/blob/dc3417f2185e539adcaf6e0775ba83bb238b1d14/src/gtk/style-switcher.ui
+
+template $PsequelStyleSwitcher : Widget {
+  Box box {
+    orientation: horizontal;
+    homogeneous: true;
+    spacing: 18;
+
+    Overlay {
+      visible: bind template.show-system;
+      halign: center;
+
+      CheckButton system_selector {
+        tooltip-text: _("Use System Colors");
+        active: true;
+        toggled => $theme_check_active_changed();
+
+        styles [
+          "system",
+        ]
+      }
+
+      [overlay]
+      Image {
+        visible: bind system_selector.active;
+        icon-name: "check-plain-symbolic";
+        pixel-size: 13;
+        halign: end;
+        valign: end;
+
+        styles [
+          "check",
+        ]
+      }
+    }
+
+    Overlay {
+      halign: center;
+
+      CheckButton light_selector {
+        group: system_selector;
+        tooltip-text: _("Use Light Colors");
+        toggled => $theme_check_active_changed();
+
+        styles [
+          "light",
+        ]
+      }
+
+      [overlay]
+      Image {
+        visible: bind light_selector.active;
+        icon-name: "check-plain-symbolic";
+        pixel-size: 13;
+        halign: end;
+        valign: end;
+
+        styles [
+          "check",
+        ]
+      }
+    }
+
+    Overlay {
+      halign: center;
+
+      CheckButton dark_selector {
+        group: system_selector;
+        tooltip-text: _("Use Dark Colors");
+        halign: center;
+        toggled => $theme_check_active_changed();
+
+        styles [
+          "dark",
+        ]
+      }
+
+      [overlay]
+      Image {
+        visible: bind dark_selector.active;
+        icon-name: "check-plain-symbolic";
+        pixel-size: 13;
+        halign: end;
+        valign: end;
+
+        styles [
+          "check",
+        ]
+      }
+    }
+  }
+}

res/gtk/style.css

@@ -25,4 +25,54 @@
 .connection-form {
     border-radius: 8px;
     padding: 1rem;
+}
+
+
+themeswitcher {
+    padding: 6px;
+}
+
+themeswitcher .check {
+    background: @accent_bg_color;
+    color: @accent_fg_color;
+    padding: 2px;
+    border-radius: 17px;
+    margin: 3px;
+}
+
+/* Adapted from https://gitlab.gnome.org/GNOME/gnome-text-editor/-/blob/bf8c0c249f06a0be69e65aed3b786ba02a9f999e/src/TextEditor.css#L51 */
+
+themeswitcher checkbutton {
+    outline-offset: 1px;
+    transition: none;
+}
+
+themeswitcher checkbutton radio {
+    -gtk-icon-source: none;
+    background: none;
+    padding: 12px;
+    min-height: 24px;
+    min-width: 24px;
+    border: none;
+    outline-color: currentColor;
+    transition: none;
+    box-shadow: inset 0 0 0 1px @borders;
+}
+
+themeswitcher checkbutton radio:checked {
+    box-shadow: inset 0 0 0 2px @accent_bg_color;
+}
+
+themeswitcher checkbutton.system radio {
+    background: linear-gradient(-45deg, #1e1e1e 49.99%, white 50.01%);
+}
+
+themeswitcher checkbutton.light radio {
+    color: alpha(black, 0.8);
+    background-color: white;
+}
+
+themeswitcher checkbutton.dark radio {
+    color: white;
+    background-color: #1e1e1e;
 }

res/meson.build

@@ -8,6 +8,9 @@ blueprints_output_dir = meson.current_build_dir()
 
 blueprints = custom_target('blueprints',
   input: files(
+
+    'gtk/style-switcher.blp',
+
     'gtk/connection-form.blp',
     'gtk/connection-sidebar.blp',
     'gtk/connection-view.blp',

res/psequel.gresource.xml

@@ -2,6 +2,7 @@
 <gresources>
   <gresource prefix="/me/ppvan/psequel">
     <file alias="style.css">gtk/style.css</file>
+    <file preprocess="xml-stripblanks">gtk/style-switcher.ui</file>
     <file preprocess="xml-stripblanks">gtk/connection-form.ui</file>
     <file preprocess="xml-stripblanks">gtk/connection-sidebar.ui</file>
     <file preprocess="xml-stripblanks">gtk/connection-view.ui</file>
@@ -51,5 +52,6 @@
     <file preprocess="xml-stripblanks" alias="settings-symbolic.svg">gtk/icons/settings-symbolic.svg</file>
     <file preprocess="xml-stripblanks" alias="test-pass-symbolic.svg">gtk/icons/test-pass-symbolic.svg</file>
     <file preprocess="xml-stripblanks" alias="history-undo-symbolic.svg">gtk/icons/history-undo-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" alias="check-plain-symbolic.svg">gtk/icons/check-plain-symbolic.svg</file>
   </gresource>
 </gresources>