chore: add styles for show table

Author: yaroslav8765

adminforth/modules/styles.ts

@@ -52,6 +52,14 @@ export const styles = () => ({
     lightFormHeading: "alias:lightListTableHeading", // show view heading
     lightFormFieldTextColor: "alias:lightListTableText",
 
+    lightShowTableHeadingBackground: "alias:lightFormHeading",
+    lightShowTableHeadingText: "#374151",
+    lightShowTableUnderHeadingBackground: "alias:lightFormHeading",
+    lightShowTableUnderHeadingText: "#374151",
+    lightShowTablesBodyBackground: "alias:lightForm",
+    lightShowTableBodyText: "#6B7280",
+    lightShowTableBodyBorder: "#F3F4F6",
+
     lightButtons: "#FFFFFF", // button background
     lightButtonsBorder: "#DDDDDD", // button border
     lightButtonsText: "#111827", // button text
@@ -428,6 +436,14 @@ export const styles = () => ({
     darkFiltersClearAllButtonText: "#9CA3AF",
     darkFiltersClearAllButtonTextHover: "#FFFFFF",
     darkFiltersClearAllButtonFocus: "#374151",
+
+    darkShowTableHeadingBackground: "alias:darkFormHeading",
+    darkShowTableHeadingText: "#9CA3AF",
+    darkShowTableUnderHeadingBackground: "alias:darkFormHeading",
+    darkShowTableUnderHeadingText: "#9CA3AF",
+    darkShowTablesBodyBackground: "alias:darkForm",
+    darkShowTableBodyText: "#9CA3AF",
+    darkShowTableBodyBorder: "#F3F4F6",
   },
   boxShadow: {
     customLight: "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow

adminforth/spa/src/components/ShowTable.vue

@@ -1,10 +1,10 @@
 <template>
       <div :class="`overflow-x-auto ${isRounded ? 'rounded-default' : ''} shadow-resourseFormShadow dark:shadow-darkResourseFormShadow`">
-        <div v-if="groupName && !noTitle"  class="text-md font-semibold px-6 py-3 flex flex-1 items-center text-gray-700 bg-lightFormHeading dark:bg-darkFormHeading  dark:text-gray-400 rounded-t-lg">
+        <div v-if="groupName && !noTitle"  class="text-md font-semibold px-6 py-3 flex flex-1 items-center text-lightShowTableHeadingText bg-lightShowTableHeadingBackground dark:bg-darkShowTableHeadingBackground  dark:text-darkShowTableHeadingText rounded-t-lg">
         {{ groupName }}
         </div>
-      <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 table-fixed">
-        <thead v-if="!allColumnsHaveCustomComponent"  class="text-gray-700 dark:text-gray-400 bg-lightFormHeading dark:bg-darkFormHeading dark:border-darkFormBorder block md:table-row-group">
+      <table class="w-full text-sm text-left rtl:text-right text-lightShowTableBodyText dark:text-darkShowTableBodyText table-fixed">
+        <thead v-if="!allColumnsHaveCustomComponent"  class="text-lightShowTableUnderHeadingText dark:text-darkShowTableUnderHeadingText bg-lightShowTableUnderHeadingBackground dark:bg-darkShowTableUnderHeadingBackground dark:border-darkFormBorder block md:table-row-group">
           <tr>
             <th scope="col" class="px-6 py-3 text-xs uppercase hidden md:w-52 md:table-cell">
               {{ $t('Field') }}
@@ -18,8 +18,8 @@
           <tr
             v-for="column in columns"
             :key="column.name"
-            class="bg-lightForm border-t border-gray-100 
-              dark:bg-darkForm dark:border-darkFormBorder block md:table-row"
+            class="bg-lightShowTablesBodyBackground border-t border-lightShowTableBodyBorder 
+              dark:bg-darkShowTablesBodyBackground dark:border-darkShowTableBodyBorder block md:table-row"
           >
             <component
                 v-if="column.components?.showRow"

dev-demo/index.ts

@@ -178,6 +178,14 @@ export const admin = new AdminForth({
           FormHeading: "alias:lightListTableHeading", 
           FormFieldTextColor: "alias:lightListTableText",
 
+          ShowTableHeadingBackground: "alias:lightPrimary",
+          ShowTableHeadingText: "alias:lightShowTableHeadingBackground inverse",
+          ShowTableUnderHeadingBackground: "alias:lightShowTableHeadingBackground lighten",
+          ShowTableUnderHeadingText: "alias:lightShowTableUnderHeadingBackground inverse",
+          ShowTablesBodyBackground: "alias:lightShowTableUnderHeadingBackground lighten",
+          ShowTableBodyText: "alias:lightShowTablesBodyBackground inverse",
+          ShowTableBodyBorder: "alias:lightShowTableHeadingBackground darken",
+
           Buttons: "#FFFFFF", 
           ButtonsBorder: "#DDDDDD", 
           ButtonsText: "#111827",
@@ -368,6 +376,14 @@ export const admin = new AdminForth({
           FormHeading: "alias:darkListTableHeading",
           FormFieldTextColor: "alias:darkListTableText",
 
+          ShowTableHeadingBackground: "alias:darkPrimary",
+          ShowTableHeadingText: "alias:darkShowTableHeadingBackground inverse",
+          ShowTableUnderHeadingBackground: "alias:darkShowTableHeadingBackground lighten",
+          ShowTableUnderHeadingText: "alias:darkShowTableUnderHeadingBackground inverse",
+          ShowTablesBodyBackground: "alias:darkShowTableUnderHeadingBackground lighten",
+          ShowTableBodyText: "alias:darkShowTablesBodyBackground inverse",
+          ShowTableBodyBorder: "alias:darkShowTableHeadingBackground darken",
+
           DropdownButtonsBackground: "alias:darkForm darken",
           DropownButtonsBorder: "alias:darkForm lighten", 
           DropdownButtonsText: "alias:darkListTableText",