-theme demo

ng-ttc-frontend/src/styles.css

@@ -1,5 +1,40 @@
 @import "tailwindcss";
 
+/* กำหนดตัวแปรสีพื้นฐาน */
+:root {
+    /* Default (Red Theme) */
+    --color-primary-50: #fef2f2;
+    --color-primary-100: #fee2e2;
+    --color-primary-500: #ef4444;
+    --color-primary-600: #dc2626;
+    --color-primary-900: #7f1d1d; /* สีแดงเข้มที่คุณใช้บ่อย */
+    --color-primary-950: #450a0a;
+}
+
+/* Blue Theme Override */
+.theme-blue {
+    --color-primary-50: #eff6ff;
+    --color-primary-100: #dbeafe;
+    --color-primary-500: #3b82f6;
+    --color-primary-600: #2563eb;
+    --color-primary-900: #1e3a8a; /* สีน้ำเงินเข้ม */
+    --color-primary-950: #172554;
+}
+
+/* Green Theme Override */
+.theme-green {
+    --color-primary-50: #f0fdf4;
+    --color-primary-100: #dcfce7;
+    --color-primary-500: #22c55e;
+    --color-primary-600: #16a34a;
+    --color-primary-900: #14532d;
+    --color-primary-950: #052e16;
+}
+
+/* ... CSS อื่นๆ ของคุณ ... */
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
 /* Global base styles for the app. Keep lightweight and self-contained so
    the login component can reliably fill the viewport without producing
    an outer page scrollbar. */
@@ -92,7 +127,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   /* Prevent the browser from showing a scroll bar for the page itself;
-     the login card will scroll internally if needed. */
+      the login card will scroll internally if needed. */
 }
 
 /* Simple utilities used by nested components in this workspace */
@@ -108,7 +143,7 @@ body {
   padding: 10px;
   margin: 10px;
   /* Use flex centering so nested components (like the login widget)
-     are centered without forcing the document to scroll. */
+      are centered without forcing the document to scroll. */
   display: flex;
   align-items: center;
   justify-content: center;