theme.md

 # Theme Configuration
+
+The theme is based on [https://developer.microsoft.com/en-us/fluentui](Fluent UI) Framework and Microsoft SharePoint appearence.
+
+You can use the Fluent UI [Theme Designer](https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/7.0/theming-designer/index.html) to generate a custom theme color and apply it as light and dark mode.
+
+To overwrite the theme color with your own one, add **Code injection** into the *Site Header* part like this:
+
+```html
+<style type="text/css">
+    :root,
+    [data-theme=dark] {
+        --themePrimary: #0078d4;
+        --themeLighterAlt: #eff6fc;
+        --themeLighter: #deecf9;
+        --themeLight: #c7e0f4;
+        --themeTertiary: #71afe5;
+        --themeSecondary: #2b88d8;
+        --themeDarkAlt: #106ebe;
+        --themeDark: #005a9e;
+        --themeDarker: #004578;
+        --neutralLighterAlt: #050607;
+        --neutralLighter: #f3f2f1;
+        --neutralLight: #edebe9;
+        --neutralQuaternaryAlt: #e1dfdd;
+        --neutralQuaternary: #d0d0d0;
+        --neutralTertiaryAlt: #c8c6c4;
+        --neutralTertiary: #a19f9d;
+        --neutralSecondary: #605e5c;
+        --neutralPrimaryAlt: #3b3a39;
+        --neutralPrimary: #CDCECF;
+        --neutralDark: #DFE0E1;
+        --black: #ffffff;
+        --white: #1b1a19;
+    }
+
+    [data-theme=light] {
+        --themePrimary: #0078d4;
+        --themeLighterAlt: #eff6fc;
+        --themeLighter: #deecf9;
+        --themeLight: #c7e0f4;
+        --themeTertiary: #71afe5;
+        --themeSecondary: #2b88d8;
+        --themeDarkAlt: #106ebe;
+        --themeDark: #005a9e;
+        --themeDarker: #004578;
+        --neutralLighterAlt: #faf9f8;
+        --neutralLighter: #f3f2f1;
+        --neutralLight: #edebe9;
+        --neutralQuaternaryAlt: #e1dfdd;
+        --neutralQuaternary: #d0d0d0;
+        --neutralTertiaryAlt: #c8c6c4;
+        --neutralTertiary: #a19f9d;
+        --neutralSecondary: #605e5c;
+        --neutralPrimaryAlt: #3b3a39;
+        --neutralPrimary: #323130;
+        --neutralDark: #201f1e;
+        --black: #000000;
+        --white: #ffffff;
+    }
+
+    @media (prefers-color-scheme:light) {
+        :root:not([data-theme=dark]) {
+            --themePrimary: #0078d4;
+            --themeLighterAlt: #eff6fc;
+            --themeLighter: #deecf9;
+            --themeLight: #c7e0f4;
+            --themeTertiary: #71afe5;
+            --themeSecondary: #2b88d8;
+            --themeDarkAlt: #106ebe;
+            --themeDark: #005a9e;
+            --themeDarker: #004578;
+            --neutralLighterAlt: #faf9f8;
+            --neutralLighter: #f3f2f1;
+            --neutralLight: #edebe9;
+            --neutralQuaternaryAlt: #e1dfdd;
+            --neutralQuaternary: #d0d0d0;
+            --neutralTertiaryAlt: #c8c6c4;
+            --neutralTertiary: #a19f9d;
+            --neutralSecondary: #605e5c;
+            --neutralPrimaryAlt: #3b3a39;
+            --neutralPrimary: #323130;
+            --neutralDark: #201f1e;
+            --black: #000000;
+            --white: #1b1a19;
+        }
+    }
+</style>
+```
+
+You can change the primary color only by adding from the **Code injection** into the *Site Header* the following style:
+
+```html
+<style type="text/css">
+    :root,
+    [data-theme] {
+        --themePrimary: #A4262C;
+    }
+</style>
+```
+
+> **Note**: you need to define a Light and a Dark color themes to overwrite both of theme.