diff --git a/data/re.sonny.Junction.gschema.xml b/data/re.sonny.Junction.gschema.xml index c09356e..bfc08ff 100644 --- a/data/re.sonny.Junction.gschema.xml +++ b/data/re.sonny.Junction.gschema.xml @@ -1,8 +1,18 @@ + + + + + + false + + 'default' + diff --git a/src/application.js b/src/application.js index 4716a8d..d1d4688 100644 --- a/src/application.js +++ b/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", ["Q"]); + application.add_action(settings.create_action("color-scheme")); + application.set_accels_for_action("window.close", ["W", "Escape"]); application.set_accels_for_action("win.copy", ["C"]); diff --git a/src/style.css b/src/style.css index 19612a1..1e42f88 100644 --- a/src/style.css +++ b/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; + } } diff --git a/src/window.blp b/src/window.blp index b6d4d1e..f08b8de 100644 --- a/src/window.blp +++ b/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");