diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml
index 24b3be8dbb7fede4614da73c9aa77ebedfeb0831..8a4948e41ba7ce8eddd6dc62d1d0b0f24e28f136 100644
--- a/data/gnome-shell-theme.gresource.xml
+++ b/data/gnome-shell-theme.gresource.xml
@@ -9,7 +9,8 @@
     <file>checkbox-off-focused.svg</file>
     <file>checkbox-off-light.svg</file>
     <file>checkbox-off.svg</file>
-    <file>gnome-shell.css</file>
+    <file>gnome-shell-dark.css</file>
+    <file>gnome-shell-light.css</file>
     <file>gnome-shell-high-contrast.css</file>
     <file>gnome-shell-start.svg</file>
     <file>pad-osd.css</file>
diff --git a/data/theme/gnome-shell.scss b/data/theme/gnome-shell-dark.scss
similarity index 100%
rename from data/theme/gnome-shell.scss
rename to data/theme/gnome-shell-dark.scss
diff --git a/data/theme/gnome-shell-light.scss b/data/theme/gnome-shell-light.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ae6fce7ddda91e52d3fae655c4dab2f9b0260c6f
--- /dev/null
+++ b/data/theme/gnome-shell-light.scss
@@ -0,0 +1,6 @@
+$variant: 'light';
+
+@import "gnome-shell-sass/_colors"; //use gtk colors
+@import "gnome-shell-sass/_drawing";
+@import "gnome-shell-sass/_common";
+@import "gnome-shell-sass/_widgets";
diff --git a/data/theme/meson.build b/data/theme/meson.build
index 26471b6792e52521e5b886249b7da080d0995f37..b9d283f372d34668f94ced499f195cff4a410669 100644
--- a/data/theme/meson.build
+++ b/data/theme/meson.build
@@ -1,6 +1,7 @@
 theme_sources = files([
   'gnome-shell-high-contrast.scss',
-  'gnome-shell.scss',
+  'gnome-shell-dark.scss',
+  'gnome-shell-light.scss',
   'gnome-shell-sass/_colors.scss',
   'gnome-shell-sass/_common.scss',
   'gnome-shell-sass/_drawing.scss',
@@ -44,7 +45,8 @@ theme_sources = files([
 
 stylesheets = [
   'gnome-shell-high-contrast.css',
-  'gnome-shell.css'
+  'gnome-shell-dark.css',
+  'gnome-shell-light.css',
 ]
 
 foreach stylesheet: stylesheets
diff --git a/js/ui/main.js b/js/ui/main.js
index d1a2076f66b429d7df84d851d5864ffc16133108..e7d567da81bbed476d8ece102354e5e8a86bc84d 100644
--- a/js/ui/main.js
+++ b/js/ui/main.js
@@ -159,6 +159,7 @@ function start() {
     sessionMode.connect('updated', _sessionUpdated);
 
     St.Settings.get().connect('notify::high-contrast', _loadDefaultStylesheet);
+    St.Settings.get().connect('notify::color-scheme', _loadDefaultStylesheet);
 
     // Initialize ParentalControlsManager before the UI
     ParentalControlsManager.getDefault();
@@ -388,6 +389,25 @@ function _getStylesheet(name) {
     return null;
 }
 
+/** @returns {string} */
+function _getStyleVariant() {
+    const { colorScheme } = St.Settings.get();
+    switch (sessionMode.colorScheme) {
+    case 'force-dark':
+        return 'dark';
+    case 'force-light':
+        return 'light';
+    case 'prefer-dark':
+        return colorScheme === St.SystemColorScheme.PREFER_LIGHT
+            ? 'light' : 'dark';
+    case 'prefer-light':
+        return colorScheme === St.SystemColorScheme.PREFER_DARK
+            ? 'dark' : 'light';
+    default:
+        return '';
+    }
+}
+
 function _getDefaultStylesheet() {
     let stylesheet = null;
     let name = sessionMode.stylesheetName;
@@ -396,8 +416,11 @@ function _getDefaultStylesheet() {
     if (St.Settings.get().high_contrast)
         stylesheet = _getStylesheet(name.replace('.css', '-high-contrast.css'));
 
+    if (stylesheet === null)
+        stylesheet = _getStylesheet(name.replace('.css', `-${_getStyleVariant()}.css`));
+
     if (stylesheet == null)
-        stylesheet = _getStylesheet(sessionMode.stylesheetName);
+        stylesheet = _getStylesheet(name);
 
     return stylesheet;
 }
diff --git a/js/ui/sessionMode.js b/js/ui/sessionMode.js
index b8b627370d7c8000603745d7f5331bad287410c5..4c20bf58113a44edba98deda043cf7d97b3a52b9 100644
--- a/js/ui/sessionMode.js
+++ b/js/ui/sessionMode.js
@@ -23,6 +23,7 @@ const _modes = {
     'restrictive': {
         parentMode: null,
         stylesheetName: 'gnome-shell.css',
+        colorScheme: 'prefer-dark',
         themeResourceName: 'gnome-shell-theme.gresource',
         hasOverview: false,
         showCalendarEvents: false,
diff --git a/meson/generate-stylesheets.py b/meson/generate-stylesheets.py
index bd6b641b8ec57441b54ddf4d4bea147b7f311de5..10e65b7569fdce0eaea36494670bec8cc2e074a6 100644
--- a/meson/generate-stylesheets.py
+++ b/meson/generate-stylesheets.py
@@ -6,7 +6,8 @@ import subprocess
 
 stylesheets = [
     'data/theme/gnome-shell-high-contrast.css',
-    'data/theme/gnome-shell.css'
+    'data/theme/gnome-shell-dark.css',
+    'data/theme/gnome-shell-light.css'
 ]
 
 sourceroot = os.environ.get('MESON_SOURCE_ROOT')
diff --git a/src/st/meson.build b/src/st/meson.build
index 717aa058873f446f36b13f77a5ed4cf27ca2305a..e389f8a2d960f42d3e29b9f5d1d8544b9cef736b 100644
--- a/src/st/meson.build
+++ b/src/st/meson.build
@@ -180,7 +180,7 @@ st_cflags = [
 libst = shared_library('st-1.0',
   sources: st_gir_sources + st_nogir_sources + croco_sources,
   c_args: st_cflags,
-  dependencies: [clutter_dep, gtk_dep, mutter_dep, libxml_dep, m_dep],
+  dependencies: [clutter_dep, gtk_dep, mutter_dep, libxml_dep, m_dep, schemas_dep],
   build_rpath: mutter_typelibdir,
   install_rpath: mutter_typelibdir,
   install_dir: pkglibdir,
diff --git a/src/st/st-settings.c b/src/st/st-settings.c
index 839171b8a03c472cdaa46d37f8a720223cbd4524..6c0b3b393d8b82eb1096b6d7e4276e4d7e36535a 100644
--- a/src/st/st-settings.c
+++ b/src/st/st-settings.c
@@ -26,11 +26,13 @@
 
 #include "st-private.h"
 #include "st-settings.h"
+#include "st-enum-types.h"
 
 #define KEY_ENABLE_ANIMATIONS     "enable-animations"
 #define KEY_PRIMARY_PASTE         "gtk-enable-primary-paste"
 #define KEY_DRAG_THRESHOLD        "drag-threshold"
 #define KEY_FONT_NAME             "font-name"
+#define KEY_COLOR_SCHEME          "color-scheme"
 #define KEY_HIGH_CONTRAST         "high-contrast"
 #define KEY_GTK_ICON_THEME        "icon-theme"
 #define KEY_MAGNIFIER_ACTIVE      "screen-magnifier-enabled"
@@ -42,6 +44,7 @@ enum {
   PROP_PRIMARY_PASTE,
   PROP_DRAG_THRESHOLD,
   PROP_FONT_NAME,
+  PROP_COLOR_SCHEME,
   PROP_HIGH_CONTRAST,
   PROP_GTK_ICON_THEME,
   PROP_MAGNIFIER_ACTIVE,
@@ -71,6 +74,7 @@ struct _StSettings
   gboolean disable_show_password;
   gint drag_threshold;
   double slow_down_factor;
+  StSystemColorScheme color_scheme;
 };
 
 G_DEFINE_TYPE (StSettings, st_settings, G_TYPE_OBJECT)
@@ -185,6 +189,9 @@ st_settings_get_property (GObject    *object,
     case PROP_GTK_ICON_THEME:
       g_value_set_string (value, settings->gtk_icon_theme);
       break;
+    case PROP_COLOR_SCHEME:
+      g_value_set_enum (value, settings->color_scheme);
+      break;
     case PROP_MAGNIFIER_ACTIVE:
       g_value_set_boolean (value, settings->magnifier_active);
       break;
@@ -275,6 +282,18 @@ st_settings_class_init (StSettingsClass *klass)
                                                     "",
                                                     ST_PARAM_READABLE);
 
+  /**
+   * StSettings:color-scheme:
+   *
+   * The preferred color-scheme
+   */
+  props[PROP_COLOR_SCHEME] = g_param_spec_enum ("color-scheme",
+                                                "Color scheme",
+                                                "Color scheme",
+                                                ST_TYPE_SYSTEM_COLOR_SCHEME,
+                                                ST_SYSTEM_COLOR_SCHEME_DEFAULT,
+                                                ST_PARAM_READABLE);
+
   /**
    * StSettings:magnifier-active:
    *
@@ -339,6 +358,13 @@ on_interface_settings_changed (GSettings   *g_settings,
       g_object_notify_by_pspec (G_OBJECT (settings),
                                 props[PROP_GTK_ICON_THEME]);
     }
+  else if (g_str_equal (key, KEY_COLOR_SCHEME))
+    {
+      settings->color_scheme = g_settings_get_enum (g_settings, key);
+      g_warning ("%d", settings->color_scheme);
+      g_object_notify_by_pspec (G_OBJECT (settings),
+                                props[PROP_COLOR_SCHEME]);
+    }
 }
 
 static void
@@ -422,6 +448,8 @@ st_settings_init (StSettings *settings)
                                                KEY_FONT_NAME);
   settings->gtk_icon_theme = g_settings_get_string (settings->interface_settings,
                                                     KEY_GTK_ICON_THEME);
+  settings->color_scheme = g_settings_get_enum (settings->interface_settings,
+                                                KEY_COLOR_SCHEME);
   settings->drag_threshold = g_settings_get_int (settings->mouse_settings,
                                                  KEY_DRAG_THRESHOLD);
   settings->magnifier_active = g_settings_get_boolean (settings->a11y_applications_settings,
diff --git a/src/st/st-settings.h b/src/st/st-settings.h
index 8b25494699596e3dd4e7afb1453878fb56d24c1c..f12c4b5da06d74f2390a6888481b87637319045c 100644
--- a/src/st/st-settings.h
+++ b/src/st/st-settings.h
@@ -25,9 +25,16 @@
 #define __ST_SETTINGS_H__
 
 #include <glib-object.h>
+#include <gdesktop-enums.h>
 
 G_BEGIN_DECLS
 
+typedef enum {
+  ST_SYSTEM_COLOR_SCHEME_DEFAULT = G_DESKTOP_COLOR_SCHEME_DEFAULT,
+  ST_SYSTEM_COLOR_SCHEME_PREFER_DARK = G_DESKTOP_COLOR_SCHEME_PREFER_DARK,
+  ST_SYSTEM_COLOR_SCHEME_PREFER_LIGHT = G_DESKTOP_COLOR_SCHEME_PREFER_LIGHT,
+} StSystemColorScheme;
+
 #define ST_TYPE_SETTINGS (st_settings_get_type ())
 G_DECLARE_FINAL_TYPE (StSettings, st_settings, ST, SETTINGS, GObject)