Follow the system style

data/re.sonny.Junction.gschema.xml

@@ -1,8 +1,18 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <schemalist gettext-domain="re.sonny.Junction">
+  <!-- Values match AdwColorScheme so they can be passed straight to
+       Adw.StyleManager.set_color_scheme -->
+  <enum id="re.sonny.Junction.ColorScheme">
+    <value nick="default" value="0" />
+    <value nick="force-light" value="1" />
+    <value nick="force-dark" value="4" />
+  </enum>
   <schema id="re.sonny.Junction" path="/re/sonny/Junction/">
     <key name="show-app-names" type="b">
       <default>false</default>
     </key>
+    <key name="color-scheme" enum="re.sonny.Junction.ColorScheme">
+      <default>'default'</default>
+    </key>
     </schema>
 </schemalist>

src/application.js

@@ -8,6 +8,7 @@ import Window from "./window.js";
 import Welcome from "./welcome.js";
 import About from "./about.js";
 import ShortcutsWindow from "./ShortcutsWindow.js";
+import { settings } from "./common.js";
 
 import "./style.css";
 
@@ -49,7 +50,15 @@ export default function Application() {
       application.hold();
     }
 
-    Adw.StyleManager.get_default().set_color_scheme(Adw.ColorScheme.FORCE_DARK);
+    // "default" lets the desktop decide - the color scheme, accent color and
+    // contrast preference are read from the org.freedesktop.appearance portal,
+    // which GNOME, KDE Plasma and others implement.
+    const style_manager = Adw.StyleManager.get_default();
+    function updateColorScheme() {
+      style_manager.set_color_scheme(settings.get_enum("color-scheme"));
+    }
+    settings.connect("changed::color-scheme", updateColorScheme);
+    updateColorScheme();
   });
 
   // FIXME: Cannot deal with mailto:, xmpp:, ... URIs
@@ -127,6 +136,8 @@ export default function Application() {
   application.add_action(quit);
   application.set_accels_for_action("app.quit", ["<Primary>Q"]);
 
+  application.add_action(settings.create_action("color-scheme"));
+
   application.set_accels_for_action("window.close", ["<Primary>W", "Escape"]);
   application.set_accels_for_action("win.copy", ["<Primary>C"]);
 

src/style.css

@@ -2,14 +2,13 @@
   padding: 68px;
 }
 
-.welcome button.link {
-  color: white;
-}
-
 .main {
   border-radius: 30px;
   background: none;
-  background-color: #353433;
+  /* Junction floats above the desktop like a popover rather than sitting on
+     it like a document window, so it follows the popover background - which
+     is also a touch lighter than the window background in dark styles. */
+  background-color: @popover_bg_color;
   border: none;
   box-shadow: none;
 }
@@ -59,11 +58,17 @@
   font-size: 0.6rem;
 }
 
+.main .list button:hover {
+  background-color: alpha(currentColor, 0.08);
+}
+
+/* Tiles are reachable with the 1-9 keys, so the focused tile has to be
+   obvious. Tint it with the desktop accent color instead of a fixed white
+   wash, which was invisible on light backgrounds. */
 .main .list button:focus {
   outline: none;
-  /* This is libadwaita background for active */
-  /* https://gitlab.gnome.org/GNOME/libadwaita/-/blob/main/src/stylesheet/widgets/_buttons.scss#L3 */
-  background-color: alpha(white, 0.3);
+  background-color: alpha(@accent_bg_color, 0.25);
+  box-shadow: inset 0 0 0 2px @accent_color;
 }
 
 .main .list button label {
@@ -72,7 +77,20 @@
 }
 
 .main entry.uri {
-  background-color: #1e1e1e;
+  background-color: @view_bg_color;
   border-radius: 18px;
-  border: solid 1px black;
+  border: solid 1px @borders;
+  box-shadow: none;
+}
+
+/* High contrast: the accent wash alone is too subtle, so lean on the
+   border and a solid focus ring. */
+@media (prefers-contrast: more) {
+  .main entry.uri {
+    border-width: 2px;
+  }
+
+  .main .list button:focus {
+    box-shadow: inset 0 0 0 3px @accent_color;
+  }
 }

src/window.blp

@@ -98,6 +98,28 @@ menu menu_model {
     action: "win.copy";
   }
 
+  section {
+    label: _("Style");
+
+    item {
+      label: _("Follow System");
+      action: "app.color-scheme";
+      target: "default";
+    }
+
+    item {
+      label: _("Light");
+      action: "app.color-scheme";
+      target: "force-light";
+    }
+
+    item {
+      label: _("Dark");
+      action: "app.color-scheme";
+      target: "force-dark";
+    }
+  }
+
   section {
     item {
       label: _("Keyboard Shortcuts");