craftcms · brandonkelly · Sep 22, 2026 · Sep 22, 2026 · Sep 22, 2026 · Sep 22, 2026
diff --git a/packages/craftcms-graphiql/src/graphiql-init.js b/packages/craftcms-graphiql/src/graphiql-init.js
@@ -30,6 +30,10 @@ const CraftGraphiQL = ({endpoint, selectedSchema}) => {
 
   return React.createElement(GraphiQL, {
     fetcher: graphQLFetcher,
+    // The CP's own styling for GraphiQL is light-only, and GraphiQL otherwise
+    // follows the system preference. Forcing it also drops the theme picker
+    // from its settings dialog.
+    forcedTheme: 'light',
   });
 };
 

diff --git a/packages/craftcms-ui/scripts/generate-color-palette.js b/packages/craftcms-ui/scripts/generate-color-palette.js
@@ -45,7 +45,10 @@ function printStyles() {
   );
 
   lines.push(comment());
-  lines.push('\n:root,\n:host {');
+  // `[data-theme='light']` alongside the root, so a light subtree inside a dark
+  // one re-declares the palette. Without it only dark themes a subtree, and a
+  // light marker keeps inheriting whatever it sits in.
+  lines.push("\n:root,\n:host,\n[data-theme='light'] {");
   lines.push(lightColors);
   lines.push(`  /* Static colors */\n`);
   lines.push(staticColors);

diff --git a/packages/craftcms-ui/src/styles/shared/color-palette.css b/packages/craftcms-ui/src/styles/shared/color-palette.css
@@ -1,7 +1,8 @@
 /* Auto-generated by scripts/generate-color-palette.js — do not edit manually */
 
 :root,
-:host {
+:host,
+[data-theme='light'] {
   --color-gray-50: #eaecef;
   --color-gray-100: #d4d7dd;
   --color-gray-200: #c2c6ce;

diff --git a/resources/js/common/components/CpSidebar.vue b/resources/js/common/components/CpSidebar.vue
@@ -110,6 +110,7 @@
 
   .cp-sidebar[data-mode='docked'] {
     height: calc(100dvh - var(--cp-debug-bar-height, 0px));
+    max-height: 100%;
     transform: none;
     position: sticky;
     inset-block-start: 0;

diff --git a/resources/js/common/layouts/screens/PageScreen.vue b/resources/js/common/layouts/screens/PageScreen.vue
@@ -62,6 +62,7 @@
     defaultFormActions: () => ['saveAndContinueEditing'],
     formAdditionalButtons: () => [],
     contentMaxWidth: false,
+    fillViewport: false,
   });
 
   const slots = defineSlots<ScreenSlots>();
@@ -199,7 +200,9 @@
     :has-sidebar="hasSidebar"
     :additional-skip-links="additionalSkipLinks"
   />
-  <div class="bg-header">
+  <div
+    :class="{'page-screen': true, 'page-screen--fill-viewport': fillViewport}"
+  >
     <CpTopBar :crumbs="crumbs" :has-context-menu="hasContextMenu" />
     <div class="cp">
       <div class="cp__sidebar">
@@ -421,6 +424,28 @@ Main App shell
     height: 100%;
   }
 
+  .page-screen {
+    background-color: var(--c-surface-header);
+  }
+
+  /* The top bar keeps its height and the shell takes the rest. */
+  .page-screen--fill-viewport {
+    display: flex;
+    flex-direction: column;
+    height: calc(100dvh - var(--cp-debug-bar-height, 0px));
+
+    .cp {
+      display: flex;
+      flex: 1;
+      min-height: 0;
+    }
+
+    .cp__main {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
   /**
 Page
  */

diff --git a/resources/js/common/layouts/screens/types.ts b/resources/js/common/layouts/screens/types.ts
@@ -41,6 +41,12 @@ export interface ScreenProps {
    * slideout is narrow already.
    */
   contentMaxWidth?: boolean | string;
+  /**
+   * Fits the shell to the viewport instead of letting the document scroll,
+   * so `page-main` gets a definite height to fill (e.g. a full-bleed editor).
+   * Full pages only; a slideout is bounded already.
+   */
+  fillViewport?: boolean;
 }
 
 export interface ScreenEmits {

diff --git a/resources/js/pages/graphql/Explore.vue b/resources/js/pages/graphql/Explore.vue
@@ -40,9 +40,9 @@
 </script>
 
 <template>
-  <AppLayout>
+  <AppLayout fill-viewport>
     <template #page-main>
-      <main id="main" tabindex="-1" class="cp-graphiql">
+      <main id="main" tabindex="-1" class="cp-graphiql" data-theme="light">
         <div class="cp-graphiql__header">
           <h1>{{ t('Explore the GraphQL API') }}</h1>
           <form method="get" :action="exploreUrl" class="schema-selector">
@@ -78,7 +78,7 @@
   .cp-graphiql {
     display: grid;
     grid-template-rows: auto minmax(0, 1fr);
-    height: 100dvh;
+    height: 100%;
     min-height: 0;
     overflow: hidden;
   }

diff --git a/resources/js/pages/graphql/schemas/Edit.vue b/resources/js/pages/graphql/schemas/Edit.vue
@@ -8,6 +8,7 @@
   import {useSettingsSave} from '@/modules/settings/composables/useSettingsSave';
   import {store, update} from '@actions/Gql/SchemasController';
   import {useForm} from '@inertiajs/vue3';
+  import CpContainer from '@/common/components/CpContainer.vue';
 
   type TokenData = Pick<
     CraftCms.Cms.Gql.Data.GqlToken,
@@ -65,7 +66,7 @@
 </script>
 
 <template>
-  <craft-pane appearance="raised">
+  <CpContainer>
     <div class="grid gap-3">
       <CraftInput
         v-if="!schema.isPublic"
@@ -94,26 +95,30 @@
         />
       </section>
     </div>
-  </craft-pane>
+  </CpContainer>
 
   <LayoutSlot v-if="schema.isPublic" name="content-details">
-    <CraftSwitch
-      :label="t('Enabled')"
-      id="enabled"
-      name="enabled"
-      v-model="form.enabled"
-      :disabled="readOnly"
-      :error="form.errors.enabled"
-    />
+    <div class="p-lg">
+      <craft-field-group>
+        <CraftSwitch
+          :label="t('Enabled')"
+          id="enabled"
+          name="enabled"
+          v-model="form.enabled"
+          :disabled="readOnly"
+          :error="form.errors.enabled"
+        />
 
-    <CraftInput
-      :label="t('Expiry Date')"
-      id="expiryDate"
-      name="expiryDate"
-      type="datetime-local"
-      v-model="form.expiryDate"
-      :disabled="readOnly"
-      :error="form.errors.expiryDate"
-    />
+        <CraftInput
+          :label="t('Expiry Date')"
+          id="expiryDate"
+          name="expiryDate"
+          type="datetime-local"
+          v-model="form.expiryDate"
+          :disabled="readOnly"
+          :error="form.errors.expiryDate"
+        />
+      </craft-field-group>
+    </div>
   </LayoutSlot>
 </template>
diff --git a/resources/js/pages/graphql/schemas/Index.vue b/resources/js/pages/graphql/schemas/Index.vue
@@ -8,6 +8,7 @@
   import DeleteButton from '@/modules/admin-table/components/DeleteButton.vue';
   import {router} from '@inertiajs/vue3';
   import LayoutSlot from '@/common/components/LayoutSlot.vue';
+  import CpContainer from '@/common/components/CpContainer.vue';
 
   interface SchemaData {
     id: number;
@@ -92,7 +93,7 @@
       >{{ t('New schema') }}</CpLink
     >
   </LayoutSlot>
-  <craft-pane padding="0" appearance="raised">
+  <CpContainer>
     <AdminTable :table="table" />
-  </craft-pane>
+  </CpContainer>
 </template>
diff --git a/resources/js/pages/graphql/tokens/Edit.vue b/resources/js/pages/graphql/tokens/Edit.vue
@@ -16,6 +16,7 @@
   } from '@actions/Gql/TokensController';
   import {useForm, useHttp} from '@inertiajs/vue3';
   import {elevatedSessionManager} from '@/modules/auth/elevated-session';
+  import CpContainer from '@/common/components/CpContainer.vue';
 
   type TokenData = Pick<
     CraftCms.Cms.Gql.Data.GqlToken,
@@ -90,7 +91,7 @@
 </script>
 
 <template>
-  <craft-pane appearance="raised">
+  <CpContainer>
     <div class="grid gap-3">
       <CraftInput
         :label="t('Name')"
@@ -172,26 +173,28 @@
         </craft-button>
       </div>
     </div>
-  </craft-pane>
+  </CpContainer>
 
   <LayoutSlot name="content-details">
-    <CraftSwitch
-      :label="t('Enabled')"
-      id="enabled"
-      name="enabled"
-      v-model="form.enabled"
-      :disabled="readOnly"
-      :error="form.errors.enabled"
-    />
-
-    <CraftInput
-      :label="t('Expiry Date')"
-      id="expiryDate"
-      name="expiryDate"
-      type="datetime-local"
-      v-model="form.expiryDate"
-      :disabled="readOnly"
-      :error="form.errors.expiryDate"
-    />
+    <craft-field-group class="p-lg">
+      <CraftSwitch
+        :label="t('Enabled')"
+        id="enabled"
+        name="enabled"
+        v-model="form.enabled"
+        :disabled="readOnly"
+        :error="form.errors.enabled"
+      />
+
+      <CraftInput
+        :label="t('Expiry Date')"
+        id="expiryDate"
+        name="expiryDate"
+        type="datetime-local"
+        v-model="form.expiryDate"
+        :disabled="readOnly"
+        :error="form.errors.expiryDate"
+      />
+    </craft-field-group>
   </LayoutSlot>
 </template>
diff --git a/resources/js/pages/graphql/tokens/Index.vue b/resources/js/pages/graphql/tokens/Index.vue
@@ -10,6 +10,7 @@
   import {create, destroy, edit} from '@actions/Gql/TokensController';
   import Empty from '@/common/components/Empty.vue';
   import LayoutSlot from '@/common/components/LayoutSlot.vue';
+  import CpContainer from '@/common/components/CpContainer.vue';
 
   export interface TokenData {
     id: number;
@@ -99,7 +100,7 @@
       >{{ t('New token') }}</CpLink
     >
   </LayoutSlot>
-  <craft-pane padding="0" appearance="raised">
+  <CpContainer>
     <AdminTable :table="table">
       <template #empty-row>
         <Empty :label="t('No GraphQL tokens exist yet.')">
@@ -109,5 +110,5 @@
         </Empty>
       </template>
     </AdminTable>
-  </craft-pane>
+  </CpContainer>
 </template>