Use ThemeSelector

data/re.sonny.Playhouse.gschema.xml

@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <schemalist gettext-domain="re.sonny.Playhouse">
   <schema id="re.sonny.Playhouse" path="/re/sonny/Playhouse/">
+    <key name="color-scheme" type="i">
+      <default>0</default>
+    </key>
     <key name="show-html" type="b">
       <default>true</default>
     </key>
@@ -16,8 +19,5 @@
     <key name="show-devtools" type="b">
       <default>true</default>
     </key>
-    <key name="toggle-color-scheme" type="b">
-      <default>false</default>
-    </key>
   </schema>
 </schemalist>

po/POTFILES

@@ -14,4 +14,7 @@ src/main.js
 src/window.blp
 src/ShortcutsWindow.blp
 
-troll/src/util.js
+troll/src/util.js
+troll/src/widgets/ThemeSelector.blp
+troll/src/widgets/ThemeSelector.js
+src/utils.js

src/application.js

@@ -6,7 +6,9 @@ import Window from "./window.js";
 import About from "./about.js";
 import ShortcutsWindow from "./ShortcutsWindow.js";
 
-import "./style.css";
+import { settings } from "./utils.js";
+
+// import "./style.css";
 
 export default function Application() {
   const application = new Adw.Application({
@@ -69,5 +71,15 @@ export default function Application() {
   });
   application.add_action(showShortCutsWindow);
 
+  application.add_action(settings.create_action("color-scheme"));
+
   return application;
 }
+
+const style_manager = Adw.StyleManager.get_default();
+function setColorScheme() {
+  const color_scheme = settings.get_int("color-scheme");
+  style_manager.set_color_scheme(color_scheme);
+}
+setColorScheme();
+settings.connect("changed::color-scheme", setColorScheme);

src/utils.js

@@ -0,0 +1,6 @@
+import Gio from "gi://Gio";
+
+export const settings = new Gio.Settings({
+  schema_id: pkg.name,
+  path: "/re/sonny/Playhouse/",
+});

src/window.blp

@@ -48,12 +48,6 @@ Adw.ApplicationWindow window {
         menu-model: menu_app;
         icon-name: "open-menu-symbolic";
       }
-
-      [end]
-      Button button_style_mode {
-        icon-name: "weather-clear-night-symbolic";
-        label: "Toggle dark mode";
-      }
     }
 
     Box {
@@ -126,6 +120,12 @@ Adw.ApplicationWindow window {
 }
 
 menu menu_app {
+  section {
+    item {
+      custom: "themeswitcher";
+    }
+  }
+
   section {
     item {
       label: _("Keyboard Shortcuts");

src/window.js

@@ -10,12 +10,11 @@ import Shortcuts from "./Shortcuts.js";
 import Devtools from "./Devtools.js";
 import WebView from "./WebView.js";
 
+import ThemeSelector from "../troll/src/widgets/ThemeSelector.js";
+
 import resource from "./window.blp";
 
-const settings = new Gio.Settings({
-  schema_id: pkg.name,
-  path: "/re/sonny/Playhouse/",
-});
+import { settings } from "./utils.js";
 
 Source.init();
 
@@ -33,9 +32,16 @@ export default function Window({ application }) {
   const builder = Gtk.Builder.new_from_resource(resource);
 
   const window = builder.get_object("window");
-  // if (__DEV__) window.add_css_class("devel");
+  if (pkg.name.endsWith("Devel")) {
+    window.add_css_class("devel");
+  }
   window.set_application(application);
 
+  // Popover menu theme switcher
+  const button_menu = builder.get_object("button_menu");
+  const popover = button_menu.get_popover();
+  popover.add_child(new ThemeSelector(), "themeswitcher");
+
   // const source_view = builder.get_object("source_view");
   // const source_buffer = builder.get_object("source_buffer");
   const web_view = builder.get_object("web_view");
@@ -121,7 +127,6 @@ p:hover {
   const button_javascript = builder.get_object("button_javascript");
   const button_output = builder.get_object("button_output");
   const button_devtools = builder.get_object("button_devtools");
-  const button_style_mode = builder.get_object("button_style_mode");
 
   const source_views = [
     source_view_html,
@@ -135,38 +140,10 @@ p:hover {
     source_views.forEach(({ buffer }) => {
       buffer.set_style_scheme(scheme);
     });
-
-    if (dark) {
-      button_style_mode.icon_name = "weather-clear-symbolic";
-    } else {
-      button_style_mode.icon_name = "weather-clear-night-symbolic";
-    }
   }
   updateStyle();
   style_manager.connect("notify::dark", updateStyle);
 
-  button_style_mode.connect("clicked", () => {
-    settings.set_boolean(
-      "toggle-color-scheme",
-      !settings.get_boolean("toggle-color-scheme"),
-    );
-  });
-
-  function setColorScheme() {
-    const toggle_color_scheme = settings.get_boolean("toggle-color-scheme");
-    if (toggle_color_scheme) {
-      style_manager.set_color_scheme(
-        style_manager.dark
-          ? Adw.ColorScheme.FORCE_LIGHT
-          : Adw.ColorScheme.FORCE_DARK,
-      );
-    } else {
-      style_manager.set_color_scheme(Adw.ColorScheme.DEFAULT);
-    }
-  }
-  setColorScheme();
-  settings.connect("changed", setColorScheme);
-
   settings.bind(
     "show-html",
     button_html,