From 569f16beeacae157cfa9c15198fc298fde42e663 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Sat, 23 Aug 2025 13:41:41 -0400
Subject: [PATCH] Configurable app shell (body and main content area) colors

This will help folks with different contrast preferences, as well as make it easier to to test and experiment with perhaps some new defaults.
---
 resources/css/ui.css             | 13 ++++++++++++-
 resources/views/layout.blade.php |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/resources/css/ui.css b/resources/css/ui.css
index 13ecbea644b..6b3884609b8 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -18,6 +18,16 @@
     --color-gray-950: var(--color-zinc-950);
     --color-volt: oklch(93.86% 0.2018 122.24);
 
+    --color-content-bg: var(--color-white);
+    --color-content-border: var(--color-gray-200);
+    --color-content-dark-bg: var(--color-gray-900);
+    --color-content-dark-border: var(--color-gray-800);
+
+    --color-body-bg: var(--color-gray-100);
+    --color-body-border: transparent;
+    --color-body-dark-bg: var(--color-gray-900);
+    --color-body-dark-border: var(--color-black);
+
     /* Temp */
     --color-dark-100: #dfe1e5;
     --color-dark-150: #bbbdc0;
@@ -125,7 +135,8 @@
 
 @layer components {
     .content-card {
-        @apply min-h-full px-3 sm:px-6 md:px-12 sm:pb-6 bg-white border dark:bg-gray-900 dark:border-y-0 dark:border-r-0 border-gray-200 dark:border-white/7 rounded-2xl dark:rounded-none;
+        @apply min-h-full px-3 sm:px-6 md:px-12 sm:pb-6 bg-content-bg border dark:bg-content-dark-bg dark:border-y-0 dark:border-r-0 border-content-border dark:border-content-dark-border rounded-2xl dark:rounded-none;
+
     }
 }
 
diff --git a/resources/views/layout.blade.php b/resources/views/layout.blade.php
index 09522a5e7f3..df1646886b7 100644
--- a/resources/views/layout.blade.php
+++ b/resources/views/layout.blade.php
@@ -25,7 +25,7 @@ class="@yield('content-class') pt-14"
                         'showing-license-banner': showBanner
                     }"
                 >
-                    <main id="main" class="flex bg-gray-100 dark:bg-gray-900 dark:border-t rounded-t-2xl dark:border-white/10 fixed top-14 inset-x-0 bottom-0 min-h-[calc(100vh-3.5rem)]">
+                    <main id="main" class="flex bg-body-bg dark:bg-body-dark-bg dark:border-t rounded-t-2xl dark:border-body-dark-border fixed top-14 inset-x-0 bottom-0 min-h-[calc(100vh-3.5rem)]">
                         @include('statamic::partials.nav-main')
                         <div id="main-content" v-cloak class="main-content p-2 h-full flex-1 overflow-y-auto">
                             <div class="relative content-card @yield('content-card-modifiers') min-h-full">