diff --git a/config/default.yml b/config/default.yml
index 885ff0952c..56389f0667 100644
--- a/config/default.yml
+++ b/config/default.yml
@@ -9,6 +9,7 @@
 
 # ui:
 #   enabled: true
+#   default_theme: system
 
 # cors:
 #   enabled: false
diff --git a/config/flipt.schema.cue b/config/flipt.schema.cue
index e26d116e47..14996e2613 100644
--- a/config/flipt.schema.cue
+++ b/config/flipt.schema.cue
@@ -216,7 +216,10 @@ import "strings"
 		}
 	}
 
-	#ui: enabled?: bool | *true
+	#ui: {
+		enabled?: 		bool | *true
+		default_theme?: "light" | "dark" | *"system"
+	}
 
 	#audit: {
 		sinks?: {
diff --git a/config/flipt.schema.json b/config/flipt.schema.json
index 5728a29fb1..1e0fb3679f 100644
--- a/config/flipt.schema.json
+++ b/config/flipt.schema.json
@@ -66,8 +66,8 @@
           "properties": {
             "domain": { "type": "string" },
             "secure": { "type": "boolean" },
-            "token_lifetime": {"type": "string"},
-            "state_lifetime": {"type": "string"},
+            "token_lifetime": { "type": "string" },
+            "state_lifetime": { "type": "string" },
             "csrf": {
               "type": "object",
               "properties": {
@@ -436,10 +436,7 @@
           "type": "integer"
         },
         "conn_max_lifetime": {
-          "oneOf": [
-            {"type": "integer"},
-            {"type": "string"}
-          ]
+          "oneOf": [{ "type": "integer" }, { "type": "string" }]
         },
         "prepared_statements_enabled": {
           "type": "boolean"
@@ -637,6 +634,12 @@
           "type": "boolean",
           "default": true,
           "deprecated": true
+        },
+        "default_theme": {
+          "type": "string",
+          "enum": ["light", "dark", "system"],
+          "default": "system",
+          "deprecated": false
         }
       },
       "title": "UI"
diff --git a/go.work.sum b/go.work.sum
index 88978686a2..a6a3ae777a 100644
--- a/go.work.sum
+++ b/go.work.sum
@@ -1115,6 +1115,7 @@ github.com/prometheus/procfs v0.8.0/go.mod h1:z7EfXMXOkbkqb9IINtpCn86r/to3BnA0ua
 github.com/prometheus/tsdb v0.7.1/go.mod h1:qhTCs0VvXwvX/y3TZrWD7rabWM+ijKTux40TwIPHuXU=
 github.com/rogpeppe/fastuuid v0.0.0-20150106093220-6724a57986af/go.mod h1:XWv6SoW27p1b0cqNHllgS5HIMJraePCO15w5zCzIWYg=
 github.com/rogpeppe/go-charset v0.0.0-20180617210344-2471d30d28b4/go.mod h1:qgYeAmZ5ZIpBWTGllZSQnw97Dj+woV0toclVaRGI8pc=
+github.com/russross/blackfriday v1.6.0 h1:KqfZb0pUVN2lYqZUYRddxF4OR8ZMURnJIG5Y3VRLtww=
 github.com/russross/blackfriday v1.6.0/go.mod h1:ti0ldHuxg49ri4ksnFxlkCfN+hvslNlmVHqNRXXJNAY=
 github.com/ryanuber/columnize v0.0.0-20160712163229-9b3edd62028f/go.mod h1:sm1tb6uqfes/u+d4ooFouqFdy9/2g9QGwK3SQygK0Ts=
 github.com/safchain/ethtool v0.0.0-20190326074333-42ed695e3de8/go.mod h1:Z0q5wiBQGYcxhMZ6gUqHn6pYNLypFAvaL3UvgZLR0U4=
diff --git a/internal/config/config.go b/internal/config/config.go
index 4563569fb7..8fee65f62c 100644
--- a/internal/config/config.go
+++ b/internal/config/config.go
@@ -434,7 +434,8 @@ func DefaultConfig() *Config {
 		},
 
 		UI: UIConfig{
-			Enabled: true,
+			Enabled:      true,
+			DefaultTheme: SystemUITheme,
 		},
 
 		Cors: CorsConfig{
diff --git a/internal/config/ui.go b/internal/config/ui.go
index cdf1ba9305..76a26f4687 100644
--- a/internal/config/ui.go
+++ b/internal/config/ui.go
@@ -2,18 +2,28 @@ package config
 
 import "github.com/spf13/viper"
 
+type UITheme string
+
+const (
+	SystemUITheme = UITheme("system")
+	DarkUITheme   = UITheme("dark")
+	LightUITheme  = UITheme("light")
+)
+
 // cheers up the unparam linter
 var _ defaulter = (*UIConfig)(nil)
 
 // UIConfig contains fields, which control the behaviour
 // of Flipt's user interface.
 type UIConfig struct {
-	Enabled bool `json:"enabled" mapstructure:"enabled"`
+	Enabled      bool    `json:"enabled" mapstructure:"enabled"`
+	DefaultTheme UITheme `json:"defaultTheme" mapstructure:"default_theme"`
 }
 
 func (c *UIConfig) setDefaults(v *viper.Viper) error {
 	v.SetDefault("ui", map[string]any{
-		"enabled": true,
+		"enabled":       true,
+		"default_theme": SystemUITheme,
 	})
 
 	return nil
diff --git a/ui/src/app/meta/metaSlice.ts b/ui/src/app/meta/metaSlice.ts
index 9a7afa4692..8adcee3685 100644
--- a/ui/src/app/meta/metaSlice.ts
+++ b/ui/src/app/meta/metaSlice.ts
@@ -2,6 +2,7 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { getConfig, getInfo } from '~/data/api';
 import { IConfig, IInfo, StorageType } from '~/types/Meta';
+import { Theme } from '~/types/Preferences';
 
 interface IMetaSlice {
   info: IInfo;
@@ -23,6 +24,9 @@ const initialState: IMetaSlice = {
     storage: {
       type: StorageType.DATABASE,
       readOnly: false
+    },
+    ui: {
+      defaultTheme: Theme.SYSTEM
     }
   }
 };
diff --git a/ui/src/app/preferences/Preferences.tsx b/ui/src/app/preferences/Preferences.tsx
index 7530b3da7d..d563bbcd61 100644
--- a/ui/src/app/preferences/Preferences.tsx
+++ b/ui/src/app/preferences/Preferences.tsx
@@ -1,6 +1,5 @@
 import { Switch } from '@headlessui/react';
 import { Formik } from 'formik';
-import nightwind from 'nightwind/helper';
 import { useDispatch, useSelector } from 'react-redux';
 import Select from '~/components/forms/Select';
 import { Theme, Timezone } from '~/types/Preferences';
@@ -45,7 +44,7 @@ export default function Preferences() {
               <Select
                 id="location"
                 name="location"
-                value={theme || Theme.LIGHT}
+                value={theme || Theme.SYSTEM}
                 options={[
                   { value: Theme.LIGHT, label: 'Light' },
                   { value: Theme.DARK, label: 'Dark' },
@@ -53,7 +52,6 @@ export default function Preferences() {
                 ]}
                 onChange={(e) => {
                   dispatch(themeChanged(e.target.value as Theme));
-                  nightwind.enable(Theme.DARK === (e.target.value as Theme));
                 }}
               />
             </div>
diff --git a/ui/src/app/preferences/preferencesSlice.ts b/ui/src/app/preferences/preferencesSlice.ts
index ab193c51b7..558b971038 100644
--- a/ui/src/app/preferences/preferencesSlice.ts
+++ b/ui/src/app/preferences/preferencesSlice.ts
@@ -2,6 +2,9 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { RootState } from '~/store';
 import { Theme, Timezone } from '~/types/Preferences';
+import { fetchConfigAsync } from '~/app/meta/metaSlice';
+
+export const preferencesKey = 'preferences';
 
 interface IPreferencesState {
   theme: Theme;
@@ -9,7 +12,7 @@ interface IPreferencesState {
 }
 
 const initialState: IPreferencesState = {
-  theme: Theme.LIGHT,
+  theme: Theme.SYSTEM,
   timezone: Timezone.LOCAL
 };
 
@@ -23,6 +26,18 @@ export const preferencesSlice = createSlice({
     timezoneChanged: (state, action) => {
       state.timezone = action.payload;
     }
+  },
+  extraReducers(builder) {
+    builder.addCase(fetchConfigAsync.fulfilled, (state, action) => {
+      const currentPreference = JSON.parse(
+        localStorage.getItem(preferencesKey) || '{}'
+      ) as IPreferencesState;
+
+      // If there isn't currently a set theme, set to the default theme
+      if (!currentPreference.theme) {
+        state.theme = action.payload.ui.defaultTheme;
+      }
+    });
   }
 });
 
diff --git a/ui/src/store.ts b/ui/src/store.ts
index e688d1503f..57b2e10aae 100644
--- a/ui/src/store.ts
+++ b/ui/src/store.ts
@@ -6,12 +6,14 @@ import {
 
 import { metaSlice } from './app/meta/metaSlice';
 import { namespacesSlice } from './app/namespaces/namespacesSlice';
-import { preferencesSlice } from './app/preferences/preferencesSlice';
+import {
+  preferencesKey,
+  preferencesSlice
+} from './app/preferences/preferencesSlice';
 import { LoadingStatus } from './types/Meta';
 
 const listenerMiddleware = createListenerMiddleware();
 
-const preferencesKey = 'preferences';
 const namespaceKey = 'namespace';
 
 listenerMiddleware.startListening({
diff --git a/ui/src/types/Meta.ts b/ui/src/types/Meta.ts
index 2e108e4054..aaa1e88d74 100644
--- a/ui/src/types/Meta.ts
+++ b/ui/src/types/Meta.ts
@@ -1,3 +1,5 @@
+import { Theme } from './Preferences';
+
 export interface IInfo {
   version: string;
   latestVersion?: string;
@@ -14,8 +16,13 @@ export interface IStorage {
   readOnly?: boolean;
 }
 
+export interface IUI {
+  defaultTheme: Theme;
+}
+
 export interface IConfig {
   storage: IStorage;
+  ui: IUI;
 }
 
 export enum StorageType {