[gnome-shell] status/darkMode: Add dark mode toggle

[Marge Bot <marge-bot src gnome org>]

commit a3a886f185928b67a75a1a9ef87d40e0c27e030e
Author: Florian Müllner <fmuellner gnome org>
Date:   Wed Jul 27 03:38:28 2022 +0200

    status/darkMode: Add dark mode toggle
    
    The aggregate menu with its submenus isn't well-suited for simple
    on-off actions, so we didn't expose the global color-scheme support
    that was introduced last cycle.
    
    Quick settings on the other hand are a natural fit for actions like
    this, so add a corresponding toggle.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2392>

 data/gnome-shell-icons.gresource.xml               |  1 +
 data/icons/scalable/actions/dark-mode-symbolic.svg |  2 +
 js/js-resources.gresource.xml                      |  1 +
 js/ui/panel.js                                     |  3 ++
 js/ui/status/darkMode.js                           | 49 ++++++++++++++++++++++
 po/POTFILES.in                                     |  1 +
 6 files changed, 57 insertions(+)
---
diff --git a/data/gnome-shell-icons.gresource.xml b/data/gnome-shell-icons.gresource.xml
index c110026c86..9b4e6f361e 100644
--- a/data/gnome-shell-icons.gresource.xml
+++ b/data/gnome-shell-icons.gresource.xml
@@ -4,6 +4,7 @@
     <file>scalable/actions/color-pick.svg</file>
     <file>scalable/actions/carousel-arrow-next-symbolic.svg</file>
     <file>scalable/actions/carousel-arrow-previous-symbolic.svg</file>
+    <file>scalable/actions/dark-mode-symbolic.svg</file>
     <file>scalable/actions/pointer-double-click-symbolic.svg</file>
     <file>scalable/actions/pointer-drag-symbolic.svg</file>
     <file>scalable/actions/pointer-primary-click-symbolic.svg</file>
diff --git a/data/icons/scalable/actions/dark-mode-symbolic.svg 
b/data/icons/scalable/actions/dark-mode-symbolic.svg
new file mode 100644
index 0000000000..94eee23e78
--- /dev/null
+++ b/data/icons/scalable/actions/dark-mode-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; height="16px" viewBox="0 0 16 16" width="16px"><path d="m 8 0 c 
-4.40625 0 -8 3.59375 -8 8 s 3.59375 8 8 8 s 8 -3.59375 8 -8 s -3.59375 -8 -8 -8 z m 0 1.941406 c 3.359375 0 
6.058594 2.699219 6.058594 6.058594 s -2.699219 6.058594 -6.058594 6.058594 z m 0 0" fill="#222222"/></svg>
diff --git a/js/js-resources.gresource.xml b/js/js-resources.gresource.xml
index 71d3d492f3..d6508a2eee 100644
--- a/js/js-resources.gresource.xml
+++ b/js/js-resources.gresource.xml
@@ -135,6 +135,7 @@
     <file>ui/status/accessibility.js</file>
     <file>ui/status/autoRotate.js</file>
     <file>ui/status/brightness.js</file>
+    <file>ui/status/darkMode.js</file>
     <file>ui/status/dwellClick.js</file>
     <file>ui/status/location.js</file>
     <file>ui/status/keyboard.js</file>
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 95e9740ff7..597c6b27c6 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -424,6 +424,7 @@ class QuickSettings extends PanelMenu.Button {
         this._location = new imports.ui.status.location.Indicator();
         this._thunderbolt = new imports.ui.status.thunderbolt.Indicator();
         this._nightLight = new imports.ui.status.nightLight.Indicator();
+        this._darkMode = new imports.ui.status.darkMode.Indicator();
         this._rfkill = new imports.ui.status.rfkill.Indicator();
         this._autoRotate = new imports.ui.status.autoRotate.Indicator();
         this._unsafeMode = new UnsafeModeIndicator();
@@ -433,6 +434,7 @@ class QuickSettings extends PanelMenu.Button {
         this._indicators.add_child(this._thunderbolt);
         this._indicators.add_child(this._location);
         this._indicators.add_child(this._nightLight);
+        this._indicators.add_child(this._darkMode);
         if (this._bluetooth)
             this._indicators.add_child(this._bluetooth);
         this._indicators.add_child(this._rfkill);
@@ -446,6 +448,7 @@ class QuickSettings extends PanelMenu.Button {
         if (this._bluetooth)
             this._addItems(this._bluetooth.quickSettingsItems);
         this._addItems(this._nightLight.quickSettingsItems);
+        this._addItems(this._darkMode.quickSettingsItems);
         this._addItems(this._rfkill.quickSettingsItems);
         this._addItems(this._autoRotate.quickSettingsItems);
         this._addItems(this._unsafeMode.quickSettingsItems);
diff --git a/js/ui/status/darkMode.js b/js/ui/status/darkMode.js
new file mode 100644
index 0000000000..d1ec2bdb43
--- /dev/null
+++ b/js/ui/status/darkMode.js
@@ -0,0 +1,49 @@
+/* exported Indicator */
+const {Gio, GObject} = imports.gi;
+
+const Main = imports.ui.main;
+const {QuickToggle, SystemIndicator} = imports.ui.quickSettings;
+
+const DarkModeToggle = GObject.registerClass(
+class DarkModeToggle extends QuickToggle {
+    _init() {
+        super._init({
+            label: _('Dark Mode'),
+            iconName: 'dark-mode-symbolic',
+        });
+
+        this._settings = new Gio.Settings({
+            schema_id: 'org.gnome.desktop.interface',
+        });
+        this._changedId = this._settings.connect('changed::color-scheme',
+            () => this._sync());
+
+        this.connectObject(
+            'destroy', () => this._settings.run_dispose(),
+            'clicked', () => this._toggleMode(),
+            this);
+        this._sync();
+    }
+
+    _toggleMode() {
+        Main.layoutManager.screenTransition.run();
+        this._settings.set_string('color-scheme',
+            this.checked ? 'default' : 'prefer-dark');
+    }
+
+    _sync() {
+        const colorScheme = this._settings.get_string('color-scheme');
+        const checked = colorScheme === 'prefer-dark';
+        if (this.checked !== checked)
+            this.set({checked});
+    }
+});
+
+var Indicator = GObject.registerClass(
+class Indicator extends SystemIndicator {
+    _init() {
+        super._init();
+
+        this.quickSettingsItems.push(new DarkModeToggle());
+    }
+});
diff --git a/po/POTFILES.in b/po/POTFILES.in
index a47bd8adba..46cbba5c56 100644
--- a/po/POTFILES.in
+++ b/po/POTFILES.in
@@ -59,6 +59,7 @@ js/ui/status/accessibility.js
 js/ui/status/autoRotate.js
 js/ui/status/bluetooth.js
 js/ui/status/brightness.js
+js/ui/status/darkMode.js
 js/ui/status/dwellClick.js
 js/ui/status/keyboard.js
 js/ui/status/location.js