diff --git a/data/gnome-shell-icons.gresource.xml b/data/gnome-shell-icons.gresource.xml
index c110026c8..9b4e6f361 100644
--- a/data/gnome-shell-icons.gresource.xml
+++ b/data/gnome-shell-icons.gresource.xml
@@ -4,6 +4,7 @@
scalable/actions/color-pick.svg
scalable/actions/carousel-arrow-next-symbolic.svg
scalable/actions/carousel-arrow-previous-symbolic.svg
+ scalable/actions/dark-mode-symbolic.svg
scalable/actions/pointer-double-click-symbolic.svg
scalable/actions/pointer-drag-symbolic.svg
scalable/actions/pointer-primary-click-symbolic.svg
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 000000000..94eee23e7
--- /dev/null
+++ b/data/icons/scalable/actions/dark-mode-symbolic.svg
@@ -0,0 +1,2 @@
+
+
diff --git a/js/js-resources.gresource.xml b/js/js-resources.gresource.xml
index 71d3d492f..d6508a2ee 100644
--- a/js/js-resources.gresource.xml
+++ b/js/js-resources.gresource.xml
@@ -135,6 +135,7 @@
ui/status/accessibility.js
ui/status/autoRotate.js
ui/status/brightness.js
+ ui/status/darkMode.js
ui/status/dwellClick.js
ui/status/location.js
ui/status/keyboard.js
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 95e9740ff..597c6b27c 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 000000000..d1ec2bdb4
--- /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 a47bd8adb..46cbba5c5 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