Merge pull request #281 from devforth/add-single-theme-support

feat: add support for single theme configuration in AdminForth

Author: ivictbor

adminforth/documentation/docs/tutorial/03-Customization/01-branding.md

@@ -94,6 +94,26 @@ const admin = new AdminForth({
 Here is how it looks:
 ![AdminForth Themes](image-10.png)
 
+## Single theme
+
+If you want to enforce a consistent theme and disable the theme switcher, you can configure AdminForth to use only one theme variant. 
+
+```ts title='./index.ts'
+
+const admin = new AdminForth({
+  ...
+  customization: {
+  //diff-add
+    singleTheme: "light",
+    styles: {
+      ...
+      }
+    } 
+  },
+  ...
+});
+```
+
 
 ## Square vs rounded buttons?
 

adminforth/modules/restApi.ts

@@ -223,6 +223,7 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
             everyPageBottom: this.adminforth.config.customization.globalInjections.everyPageBottom,
           },
           rememberMeDays: this.adminforth.config.auth.rememberMeDays,
+          singleTheme: this.adminforth.config.customization.singleTheme,
         };
       },
     });
@@ -301,6 +302,7 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
           loginPromptHTML: await tr(this.adminforth.config.auth.loginPromptHTML, 'system.loginPromptHTML'),
           loginPageInjections: this.adminforth.config.customization.loginPageInjections,
           rememberMeDays: this.adminforth.config.auth.rememberMeDays,
+          singleTheme: this.adminforth.config.customization.singleTheme,
         }
 
         const loggedInPart = {

adminforth/spa/src/App.vue

@@ -24,7 +24,8 @@
             />
 
             <div class="flex items-center ms-3 ">
-              <span               
+              <span  
+                v-if="!coreStore.config?.singleTheme"
                 @click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-lightHtml dark:text-darkSidebarTextHover dark:hover:bg-darkHtml dark:hover:text-darkSidebarTextActive" role="menuitem">
                 <IconMoonSolid class="w-5 h-5 text-blue-300" v-if="coreStore.theme !== 'dark'" />
                 <IconSunSolid class="w-5 h-5 text-yellow-300" v-else />
@@ -410,6 +411,14 @@ onBeforeMount(()=>{
   document.documentElement.classList.toggle('dark', theme.value === 'dark');
 })
 
+watch(() => coreStore.config?.singleTheme, (singleTheme) => {
+  if (singleTheme) {
+    theme.value = singleTheme;
+    window.localStorage.setItem('af__theme', singleTheme);
+    document.documentElement.classList.toggle('dark', theme.value === 'dark');
+  }
+}, { immediate: true })
+
 
 const ctaBadge: Ref<(AnnouncementBadgeResponse & { hash: string; }) | null> = computed(() => {
   const badge = coreStore.config?.announcementBadge;

adminforth/spa/src/spa_types/core.ts

@@ -21,6 +21,7 @@ export type ResourceColumns = {
 
 export type CoreConfig = {
     brandName: string,
+    singleTheme?: 'light' | 'dark',
     brandLogo: string,
     title: string,
     datesFormat: string,

adminforth/types/Back.ts

@@ -619,6 +619,11 @@ interface AdminForthInputConfigCustomization {
    */
   brandName?: string,
 
+  /**
+   * Whether to use single theme for the app
+   */
+  singleTheme?: 'light' | 'dark',
+
   /**
    * Whether to show brand name in sidebar
    * default is true

adminforth/types/Common.ts

@@ -1065,6 +1065,7 @@ export interface AdminForthConfigForFrontend {
   rememberMeDays: number,
   showBrandNameInSidebar: boolean,
   brandLogo?: string,
+  singleTheme?: 'light' | 'dark',
   datesFormat: string,
   timeFormat: string,
   auth: any,