bccsa · johan-bell · Jul 29, 2026 · Jul 29, 2026 · Jul 30, 2026 · Jul 30, 2026
diff --git a/cms/index.html b/cms/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="h-screen overflow-hidden bg-zinc-50 text-zinc-900">
+<html lang="en" class="h-screen overflow-hidden dark:bg-slate-700 dark:text-zinc-100">
     <head>
         <meta charset="UTF-8" />
         <link id="favIcon" rel="icon" href="%VITE_LOGO_FAVICON%" />

diff --git a/cms/src/components/BasePage.vue b/cms/src/components/BasePage.vue
@@ -70,25 +70,28 @@ const handleMobileSidebarToggle = () => {
 </script>
 
 <template>
-    <div class="flex h-full flex-col overflow-hidden">
+    <div class="flex h-full flex-col overflow-hidden dark:bg-slate-900">
         <div
             :class="isFullWidth ? 'mx-auto w-full' : 'min-w-full max-w-7xl'"
             class="flex min-h-0 flex-1 flex-col overflow-hidden"
         >
             <div class="relative z-30 flex-shrink-0">
                 <div
                     data-topbar
-                    class="flex h-12 shrink-0 items-center gap-x-1 bg-white shadow-sm sm:gap-x-3"
+                    class="flex h-12 shrink-0 items-center gap-x-1 bg-white shadow-sm dark:bg-slate-800 dark:shadow-none sm:gap-x-3"
                     :class="[
-                        { 'border-b border-zinc-200': !$slots.internalPageHeader },
+                        {
+                            'border-b border-zinc-200 dark:border-slate-700':
+                                !$slots.internalPageHeader,
+                        },
                         topBarInsetClasses,
                     ]"
                 >
                     <button
                         v-if="isEditContentPage || isMobileScreen || isEditLanguagePage"
                         type="button"
                         data-test="chevron-icon"
-                        class="text-zinc-500"
+                        class="text-zinc-500 transition-colors dark:text-zinc-400 hover:dark:text-zinc-200"
                         :class="{
                             'ml-1.5 max-lg:-ml-1': isEditContentPage || isEditLanguagePage,
                         }"
@@ -109,17 +112,19 @@ const handleMobileSidebarToggle = () => {
 
                     <!-- Separator -->
                     <div
-                        class="h-6 w-px bg-zinc-900/10"
+                        class="h-6 w-px bg-zinc-900/10 dark:bg-zinc-100/10"
                         :class="{ hidden: !isEditContentPage && !isEditLanguagePage }"
                         aria-hidden="true"
                     />
 
                     <TopBar>
                         <template #quickActions>
-                            <div class="flex w-full min-w-0 items-center justify-between gap-2">
+                            <div
+                                class="flex w-full min-w-0 items-center justify-between gap-2 dark:text-zinc-100"
+                            >
                                 <h1
                                     v-if="title"
-                                    class="text-md flex min-w-0 items-center gap-2 truncate font-semibold leading-7"
+                                    class="text-md flex min-w-0 items-center gap-2 truncate font-semibold leading-7 dark:text-zinc-100"
                                 >
                                     {{ title }}
                                 </h1>
@@ -143,15 +148,18 @@ const handleMobileSidebarToggle = () => {
                     </TopBar>
                 </div>
             </div>
-            <div v-if="loading" class="flex min-h-0 flex-1 items-center justify-center">
+            <div
+                v-if="loading"
+                class="flex min-h-0 flex-1 items-center justify-center dark:bg-slate-900"
+            >
                 <LoadingBar />
             </div>
             <template v-else>
                 <RouterLink
                     v-if="backLinkLocation"
                     :to="backLinkLocation"
                     :params="backLinkParams"
-                    class="-mx-2 mb-1 inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 active:bg-zinc-200 sm:pl-6"
+                    class="-mx-2 mb-1 inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm text-zinc-600 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-slate-800 dark:hover:text-zinc-200 sm:pl-6"
                 >
                     <ArrowLeftIcon class="h-4 w-4" /> {{ backLinkText }}
                 </RouterLink>
@@ -181,7 +189,7 @@ const handleMobileSidebarToggle = () => {
 
                 <div
                     v-if="$slots.internalPageHeader"
-                    class="w-full flex-shrink-0 border-b border-t border-zinc-300 border-t-zinc-100 bg-white shadow"
+                    class="w-full flex-shrink-0 border-b border-t border-zinc-300 border-t-zinc-100 bg-white shadow dark:border-slate-700 dark:border-t-slate-800 dark:bg-slate-800/50 dark:shadow-none"
                 >
                     <div class="py-2" :class="chromeInsetClasses">
                         <slot name="internalPageHeader" />
@@ -190,7 +198,7 @@ const handleMobileSidebarToggle = () => {
 
                 <div
                     data-test="base-page-content"
-                    class="flex min-h-0 flex-1 flex-col"
+                    class="flex min-h-0 flex-1 flex-col dark:bg-slate-900"
                     :class="contentInsetClasses"
                 >
                     <div
@@ -212,7 +220,7 @@ const handleMobileSidebarToggle = () => {
                     <div
                         v-if="$slots.footer"
                         data-test="base-page-footer"
-                        class="flex-shrink-0 border-t border-zinc-200 bg-white pb-2 pt-2 lg:pb-4"
+                        class="flex-shrink-0 border-t border-zinc-200 bg-white pb-2 pt-2 dark:border-slate-700 dark:bg-slate-800 lg:pb-4"
                         :class="contentInset && contentInsetClasses"
                     >
                         <slot name="footer" />

diff --git a/cms/src/components/EmptyState.vue b/cms/src/components/EmptyState.vue
@@ -30,11 +30,11 @@ const goBackOrHome = useGoBackOrHome();
     <div class="mx-3 rounded-md border-2 border-dashed border-zinc-200 py-12 text-center lg:mx-0">
         <component
             :is="icon ?? DocumentPlusIcon"
-            class="mx-auto h-10 w-10 text-zinc-400"
+            class="mx-auto h-10 w-10 dark:text-zinc-100"
             aria-hidden="true"
         />
-        <h3 class="mt-2 text-sm font-semibold text-zinc-900">{{ title }}</h3>
-        <p class="mt-1 text-sm text-zinc-500">{{ description }}</p>
+        <h3 class="mt-2 text-sm font-semibold dark:text-zinc-100">{{ title }}</h3>
+        <p class="mt-1 text-sm dark:text-zinc-100">{{ description }}</p>
         <div class="mt-6 flex flex-wrap items-center justify-center gap-3">
             <LButton
                 v-if="showBackButton"

diff --git a/cms/src/components/authProvider/AuthConfig.vue b/cms/src/components/authProvider/AuthConfig.vue
@@ -33,14 +33,14 @@ function normalizeDomainString(value: string | undefined): string {
 </script>
 
 <template>
-    <div class="rounded-md border border-b border-zinc-200 bg-white p-2 pb-2">
+    <div class="rounded-md border border-b border-zinc-200 p-2 pb-2 dark:bg-slate-800">
         <div class="mb-2 flex items-center justify-between">
-            <h3 class="text-sm font-medium text-zinc-900">Auth Configuration</h3>
+            <h3 class="text-sm font-medium dark:text-zinc-100">Auth Configuration</h3>
         </div>
 
         <div class="space-y-2">
             <div>
-                <label for="domain" class="mb-1 block text-xs font-medium text-zinc-700">
+                <label for="domain" class="mb-1 block text-xs font-medium dark:text-zinc-100">
                     Domain
                     <span v-if="!isEditing" class="text-red-500">*</span>
                 </label>
@@ -58,7 +58,7 @@ function normalizeDomainString(value: string | undefined): string {
             </div>
 
             <div>
-                <label for="clientId" class="mb-1 block text-xs font-medium text-zinc-700">
+                <label for="clientId" class="mb-1 block text-xs font-medium dark:text-zinc-100">
                     Client ID
                     <span v-if="!isEditing" class="text-red-500">*</span>
                 </label>
@@ -75,7 +75,7 @@ function normalizeDomainString(value: string | undefined): string {
             </div>
 
             <div>
-                <label for="audience" class="mb-1 block text-xs font-medium text-zinc-700">
+                <label for="audience" class="mb-1 block text-xs font-medium dark:text-zinc-100">
                     Audience
                     <span v-if="!isEditing" class="text-red-500">*</span>
                 </label>
@@ -89,11 +89,10 @@ function normalizeDomainString(value: string | undefined): string {
                     :required="!isEditing"
                     @update:model-value="provider.audience = $event"
                 />
-                <p class="mt-0.5 text-[11px] text-zinc-500">
+                <p class="mt-0.5 text-[11px] dark:text-zinc-100">
                     The API identifier/audience configured in your auth provider
                 </p>
             </div>
-
         </div>
     </div>
 </template>
diff --git a/cms/src/components/authProvider/DisplayCard.vue b/cms/src/components/authProvider/DisplayCard.vue
@@ -51,7 +51,7 @@ const handleEdit = () => {
 
 <template>
     <div
-        class="w-full cursor-pointer divide-y divide-zinc-100 border-y border-zinc-300 bg-white px-2 py-1 sm:rounded-md sm:border"
+        class="w-full cursor-pointer divide-y divide-zinc-100 border-y border-zinc-500 px-2 py-1 dark:bg-slate-800 sm:rounded-md sm:border"
         @click="handleEdit"
     >
         <div class="relative flex cursor-pointer items-center justify-between py-1">
@@ -61,7 +61,9 @@ const handleEdit = () => {
                     'flex justify-between': isSmallScreen,
                 }"
             >
-                <div class="mr-1 max-w-full truncate text-wrap text-sm font-medium">
+                <div
+                    class="mr-1 max-w-full truncate text-wrap text-sm font-medium dark:text-zinc-100"
+                >
                     {{
                         capitaliseFirstLetter(provider.displayName || provider.label) ||
                         provider.domain ||
@@ -72,7 +74,7 @@ const handleEdit = () => {
         </div>
 
         <div class="flex w-full items-center gap-2 py-1 text-xs">
-            <div class="flex flex-nowrap gap-1">
+            <div class="flex flex-nowrap gap-1 dark:text-zinc-100">
                 <LBadge
                     v-if="provider.domain && provider.clientId"
                     type="default"
@@ -103,7 +105,7 @@ const handleEdit = () => {
         <div v-if="isSmallScreen" class="flex flex-wrap items-center gap-1 py-1">
             <div class="flex flex-1 items-center gap-1">
                 <div>
-                    <UserGroupIcon class="h-4 w-4 text-zinc-400" />
+                    <UserGroupIcon class="h-4 w-4 dark:text-zinc-100" />
                 </div>
                 <div class="flex flex-wrap gap-1">
                     <LBadge
@@ -125,18 +127,15 @@ const handleEdit = () => {
                     </LBadge>
                 </div>
             </div>
-            <div class="flex w-max items-start text-xs text-zinc-400">
-                <ClockIcon class="mr-[1px] h-3.5 w-3.5 text-zinc-400" />
+            <div class="flex w-max items-start text-xs dark:text-zinc-100">
+                <ClockIcon class="mr-[1px] h-3.5 w-3.5 dark:text-zinc-100" />
                 <span title="Last Updated" class="text-[11px]">{{
                     renderDate("small", "Last Updated", provider.updatedTimeUtc)
                 }}</span>
             </div>
         </div>
 
-        <div
-            v-if="!isSmallScreen"
-            class="flex items-center justify-between pt-1 text-xs sm:gap-4"
-        >
+        <div v-if="!isSmallScreen" class="flex items-center justify-between pt-1 text-xs sm:gap-4">
             <div class="flex w-full flex-1 flex-wrap items-center gap-1">
                 <UserGroupIcon class="h-4 w-4 text-zinc-400" />
                 <LBadge

diff --git a/cms/src/components/authProvider/FormModal.vue b/cms/src/components/authProvider/FormModal.vue
@@ -219,10 +219,10 @@ const handleRevert = () => {
 
                 <LabelAndType v-model:provider="provider" :disabled="isDisabled" />
 
-                <div class="rounded-md border border-zinc-200 bg-white p-2">
+                <div class="rounded-md border border-zinc-700 p-2 dark:bg-slate-800">
                     <label
                         for="provider-sort-index"
-                        class="mb-1 block text-xs font-medium text-zinc-700"
+                        class="mb-1 block text-xs font-medium dark:text-zinc-100"
                     >
                         Sort Index
                     </label>
@@ -247,7 +247,7 @@ const handleRevert = () => {
                     </p>
                 </div>
 
-                <div class="rounded-md border border-zinc-200 bg-white p-2">
+                <div class="rounded-md border border-zinc-500 p-2 dark:bg-slate-800">
                     <LCombobox
                         v-model:selected-options="provider.memberOf as string[]"
                         :label="`Group Membership`"

diff --git a/cms/src/components/authProvider/IconSection.vue b/cms/src/components/authProvider/IconSection.vue
@@ -80,9 +80,9 @@ watch(
 </script>
 
 <template>
-    <div class="rounded-md border border-zinc-200 bg-white p-2">
+    <div class="rounded-md border border-zinc-200 p-2 dark:bg-slate-800">
         <div class="mb-1 flex items-center justify-between">
-            <label class="block text-xs font-medium text-zinc-700">Icon</label>
+            <label class="block text-xs font-medium dark:text-zinc-100">Icon</label>
             <LButton
                 v-if="isBucketSelected"
                 :icon="ArrowUpOnSquareIcon"
@@ -101,7 +101,7 @@ watch(
                 @change="handleFileChange"
             />
         </div>
-        <div class="rounded-md border border-zinc-200 bg-white p-2">
+        <div class="rounded-md border border-zinc-200 p-2 dark:bg-slate-800">
             <ImageEditor
                 ref="imageEditorRef"
                 v-model:parent="provider as unknown as ContentParentDto"
@@ -111,7 +111,7 @@ watch(
             />
         </div>
         <div class="mt-2">
-            <label for="icon-opacity" class="mb-1 block text-xs font-medium text-zinc-700">
+            <label for="icon-opacity" class="mb-1 block text-xs font-medium dark:text-zinc-100">
                 Icon Opacity
             </label>
             <div class="flex items-center gap-2">

diff --git a/cms/src/components/authProvider/LabelAppearance.vue b/cms/src/components/authProvider/LabelAppearance.vue
@@ -10,13 +10,11 @@ const provider = defineModel<AuthProviderDto>("provider", { required: true });
 </script>
 
 <template>
-    <div class="rounded-md border border-zinc-200 bg-white p-2">
-        <h3 class="mb-2 text-sm font-medium text-zinc-900">Appearance</h3>
+    <div class="rounded-md border border-zinc-200 p-2 dark:bg-slate-800">
+        <h3 class="mb-2 text-sm font-medium dark:text-zinc-100">Appearance</h3>
         <div class="grid grid-cols-2 gap-4">
             <div>
-                <label class="mb-1 block text-xs font-medium text-zinc-700"
-                    >Text Color</label
-                >
+                <label class="mb-1 block text-xs font-medium dark:text-zinc-100">Text Color</label>
                 <div class="flex items-center gap-2">
                     <div
                         class="relative h-[38px] w-[38px] flex-shrink-0 overflow-hidden rounded-md border border-zinc-300"
@@ -47,7 +45,7 @@ const provider = defineModel<AuthProviderDto>("provider", { required: true });
                 </div>
             </div>
             <div>
-                <label class="mb-1 block text-xs font-medium text-zinc-700"
+                <label class="mb-1 block text-xs font-medium dark:text-zinc-100"
                     >Background Color</label
                 >
                 <div class="flex items-center gap-2">
@@ -57,7 +55,9 @@ const provider = defineModel<AuthProviderDto>("provider", { required: true });
                         <input
                             type="color"
                             :value="provider.backgroundColor || '#ffffff'"
-                            @input="provider.backgroundColor = ($event.target as HTMLInputElement).value"
+                            @input="
+                                provider.backgroundColor = ($event.target as HTMLInputElement).value
+                            "
                             class="absolute inset-0 h-full w-full cursor-pointer rounded-full opacity-0"
                             :disabled="disabled"
                         />

diff --git a/cms/src/components/authProvider/UserFieldMappings.vue b/cms/src/components/authProvider/UserFieldMappings.vue
@@ -34,15 +34,15 @@ function setMapping(key: "externalUserId" | "email" | "name", value: string) {
 </script>
 
 <template>
-    <div class="rounded-md border border-zinc-200 bg-white p-2">
-        <h3 class="mb-2 text-sm font-medium text-zinc-900">User field names</h3>
+    <div class="rounded-md border border-zinc-200 p-2 dark:bg-slate-800">
+        <h3 class="mb-2 text-sm font-medium dark:text-zinc-100">User field names</h3>
         <p class="mb-2 text-[11px] text-zinc-500">
             Override the JWT claim paths used to identify users. Leave blank to use standard OIDC
             defaults (<code>sub</code>, <code>email</code>, <code>name</code>).
         </p>
         <div class="space-y-2">
             <div>
-                <label for="ufm-userId" class="mb-1 block text-xs font-medium text-zinc-700"
+                <label for="ufm-userId" class="mb-1 block text-xs font-medium dark:text-zinc-100"
                     >User ID claim</label
                 >
                 <LInput
@@ -56,7 +56,7 @@ function setMapping(key: "externalUserId" | "email" | "name", value: string) {
                 />
             </div>
             <div>
-                <label for="ufm-email" class="mb-1 block text-xs font-medium text-zinc-700"
+                <label for="ufm-email" class="mb-1 block text-xs font-medium dark:text-zinc-100"
                     >Email claim</label
                 >
                 <LInput
@@ -70,7 +70,7 @@ function setMapping(key: "externalUserId" | "email" | "name", value: string) {
                 />
             </div>
             <div>
-                <label for="ufm-name" class="mb-1 block text-xs font-medium text-zinc-700"
+                <label for="ufm-name" class="mb-1 block text-xs font-medium dark:text-zinc-100"
                     >Name claim</label
                 >
                 <LInput