|
|
# Theme Configuration |
|
|
\ No newline at end of file |
|
|
# 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. |