diff --git a/CHANGELOG.md b/CHANGELOG.md
index e93889c9d..c5e45a49f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,10 @@ release channel, you can take advantage of these new features and fixes.
 
 ## New Features/Changes
 
-There have been no changes since the last stable release.
+- **Automatic Theme Selection:** If you haven't set a default theme for either your user account or the AzuraCast public
+  pages, the theme will automatically be determined by the user's browser based on their OS's theme preference (dark or
+  light). You can override this by selecting a default theme in the "Branding" settings, or reset to using browser
+  preference by selecting the "Prefer System Default" option.
 
 ## Code Quality/Technical Changes
 
diff --git a/config/forms/branding.php b/config/forms/branding.php
index 4676e6278..7c3d94042 100644
--- a/config/forms/branding.php
+++ b/config/forms/branding.php
@@ -16,8 +16,9 @@ return [
                             'Select a theme to use as a base for station public pages and the login page.'
                         ),
                         'choices' => [
-                            'light' => __('Light') . ' (' . __('Default') . ')',
-                            'dark' => __('Dark'),
+                            App\Customization::THEME_BROWSER => __('Prefer System Default'),
+                            App\Customization::THEME_LIGHT => __('Light'),
+                            App\Customization::THEME_DARK => __('Dark'),
                         ],
                         'default' => App\Customization::DEFAULT_THEME,
                         'form_group_class' => 'col-md-6',
diff --git a/config/forms/profile.php b/config/forms/profile.php
index ca35b9ae0..2313954b3 100644
--- a/config/forms/profile.php
+++ b/config/forms/profile.php
@@ -93,8 +93,9 @@ return [
                     [
                         'label' => __('Site Theme'),
                         'choices' => [
-                            'light' => __('Light') . ' (' . __('Default') . ')',
-                            'dark' => __('Dark'),
+                            App\Customization::THEME_BROWSER => __('Prefer System Default'),
+                            App\Customization::THEME_LIGHT => __('Light'),
+                            App\Customization::THEME_DARK => __('Dark'),
                         ],
                         'default' => App\Customization::DEFAULT_THEME,
                         'form_group_class' => 'col-md-6',
diff --git a/frontend/scss/azuracast/pages/_embed-colors.scss b/frontend/scss/azuracast/pages/_embed-colors.scss
index 133e4e8c9..96af22b2a 100644
--- a/frontend/scss/azuracast/pages/_embed-colors.scss
+++ b/frontend/scss/azuracast/pages/_embed-colors.scss
@@ -1,3 +1,3 @@
-&.embed-social {
+body.embed-social {
   background: $card-bg !important;
 }
diff --git a/frontend/scss/azuracast/pages/_public-colors.scss b/frontend/scss/azuracast/pages/_public-colors.scss
index 62cd78a15..83e89c1b7 100644
--- a/frontend/scss/azuracast/pages/_public-colors.scss
+++ b/frontend/scss/azuracast/pages/_public-colors.scss
@@ -1,4 +1,4 @@
-&.page-minimal {
+body.page-minimal {
   background: $body-bg url($public-page-bg);
   background-size: cover;
   background-attachment: fixed;
diff --git a/frontend/scss/base/_base-colors.scss b/frontend/scss/base/_base-colors.scss
index 3c903768f..d74c0f7a8 100644
--- a/frontend/scss/base/_base-colors.scss
+++ b/frontend/scss/base/_base-colors.scss
@@ -1,4 +1,4 @@
-& {
+body {
   background-color: $body-bg;
   color: $body-color;
 }
diff --git a/frontend/scss/style.scss b/frontend/scss/style.scss
index 6245cec67..b4eb1f109 100644
--- a/frontend/scss/style.scss
+++ b/frontend/scss/style.scss
@@ -3,12 +3,12 @@
   @import 'common';
 }
 
-body.theme-light {
+@at-root {
   $theme: 'light';
   @import 'common-colors';
 }
 
-body.theme-dark {
+[data-theme="dark"] {
   $theme: 'dark';
   @import 'common-colors';
 }
diff --git a/src/Controller/Frontend/Profile/ThemeAction.php b/src/Controller/Frontend/Profile/ThemeAction.php
index 805b24ee9..e1cebf690 100644
--- a/src/Controller/Frontend/Profile/ThemeAction.php
+++ b/src/Controller/Frontend/Profile/ThemeAction.php
@@ -2,9 +2,10 @@
 
 namespace App\Controller\Frontend\Profile;
 
-use App\Form\UserProfileForm;
+use App\Customization;
 use App\Http\Response;
 use App\Http\ServerRequest;
+use Doctrine\ORM\EntityManagerInterface;
 use Psr\Http\Message\ResponseInterface;
 
 class ThemeAction
@@ -12,9 +13,23 @@ class ThemeAction
     public function __invoke(
         ServerRequest $request,
         Response $response,
-        UserProfileForm $userProfileForm
+        EntityManagerInterface $em
     ): ResponseInterface {
-        $userProfileForm->switchTheme($request);
+        $user = $request->getUser();
+
+        $currentTheme = $user->getTheme();
+        if (empty($currentTheme)) {
+            $currentTheme = Customization::DEFAULT_THEME;
+        }
+
+        $user->setTheme(
+            (Customization::THEME_LIGHT === $currentTheme)
+                ? Customization::THEME_DARK
+                : Customization::THEME_LIGHT
+        );
+
+        $em->persist($user);
+        $em->flush();
 
         $referrer = $request->getHeaderLine('Referer');
         return $response->withRedirect(
diff --git a/src/Customization.php b/src/Customization.php
index 2509cd4e5..18457e44b 100644
--- a/src/Customization.php
+++ b/src/Customization.php
@@ -9,8 +9,9 @@ use Psr\Http\Message\ServerRequestInterface;
 
 class Customization
 {
-    public const DEFAULT_THEME = 'light';
+    public const DEFAULT_THEME = 'browser';
 
+    public const THEME_BROWSER = 'browser';
     public const THEME_LIGHT = 'light';
     public const THEME_DARK = 'dark';
 
diff --git a/src/Entity/Settings.php b/src/Entity/Settings.php
index 0bc35db4a..de54d9900 100644
--- a/src/Entity/Settings.php
+++ b/src/Entity/Settings.php
@@ -278,7 +278,7 @@ class Settings
      * @ORM\Column(name="public_theme", type="string", length=50, nullable=true)
      *
      * @OA\Property(example="light")
-     * @Assert\Choice({Customization::THEME_LIGHT, Customization::THEME_DARK})
+     * @Assert\Choice({Customization::THEME_BROWSER, Customization::THEME_LIGHT, Customization::THEME_DARK})
      * @var string|null Base Theme for Public Pages
      */
     protected $public_theme = Customization::DEFAULT_THEME;
diff --git a/src/Form/UserProfileForm.php b/src/Form/UserProfileForm.php
index b305c4963..8f14eb545 100644
--- a/src/Form/UserProfileForm.php
+++ b/src/Form/UserProfileForm.php
@@ -58,31 +58,6 @@ class UserProfileForm extends EntityForm
         return parent::process($request, $user);
     }
 
-    public function switchTheme(ServerRequest $request): void
-    {
-        $user = $request->getUser();
-
-        $themeField = $this->getField('theme');
-
-        $themeFieldOptions = $themeField->getOptions();
-        $themeOptions = array_keys($themeFieldOptions['choices']);
-
-        $currentTheme = $user->getTheme();
-        if (empty($currentTheme)) {
-            $currentTheme = $themeField->getValue();
-        }
-
-        foreach ($themeOptions as $theme) {
-            if ($theme !== $currentTheme) {
-                $user->setTheme($theme);
-                break;
-            }
-        }
-
-        $this->em->persist($user);
-        $this->em->flush();
-    }
-
     public function getView(ServerRequest $request): string
     {
         $user = $request->getUser();
diff --git a/templates/main.phtml b/templates/main.phtml
index 6272b9337..a757f319c 100644
--- a/templates/main.phtml
+++ b/templates/main.phtml
@@ -12,11 +12,9 @@
  * @var App\Environment $environment
  */
 
-$page_class ??= '';
-$page_class .= ' theme-' . $customization->getTheme();
 ?>
 <!DOCTYPE html>
-<html>
+<html data-theme="<?=$customization->getTheme()?>">
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -37,7 +35,7 @@ $page_class .= ' theme-' . $customization->getTheme();
     echo $assets->js();
     ?>
 </head>
-<body class="page-full <?=$page_class?> <?php
+<body class="page-full <?=$page_class ?? ''?> <?php
 if (!empty($sidebar)): ?>has-sidebar<?php
 endif; ?>">
 <?=$assets->inlineJs()?>
@@ -207,5 +205,13 @@ if (null !== $flash && $flash->hasMessages()): ?>
     </script>
 <?php
 endif; ?>
+
+<script type="text/javascript" nonce="<?=$assets->getCspNonce()?>">
+    let currentTheme = document.documentElement.getAttribute('data-theme');
+    if (currentTheme === 'browser') {
+        currentTheme = (window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
+        document.documentElement.setAttribute('data-theme', currentTheme);
+    }
+</script>
 </body>
 </html>
diff --git a/templates/minimal.phtml b/templates/minimal.phtml
index 1c906b7a1..677150b8a 100644
--- a/templates/minimal.phtml
+++ b/templates/minimal.phtml
@@ -13,10 +13,8 @@
  * @var App\Environment $environment
  */
 
-$page_class ??= '';
-$page_class .= ' theme-' . $customization->getPublicTheme();
 ?>
-<html>
+<html data-theme="<?=$customization->getPublicTheme()?>">
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -39,7 +37,7 @@ $page_class .= ' theme-' . $customization->getPublicTheme();
     ?>
 </head>
 
-<body class="page-minimal <?=$page_class?>">
+<body class="page-minimal <?=$page_class ?? ''?>">
 <?=$assets->inlineJs()?>
 
 <?=$this->section('content')?>
@@ -67,5 +65,13 @@ if (null !== $flash && $flash->hasMessages()): ?>
     </script>
 <?php
 endif; ?>
+
+<script type="text/javascript" nonce="<?=$assets->getCspNonce()?>">
+    let currentTheme = document.documentElement.getAttribute('data-theme');
+    if (currentTheme === 'browser') {
+        currentTheme = (window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
+        document.documentElement.setAttribute('data-theme', currentTheme);
+    }
+</script>
 </body>
 </html>