Theme Configuration
The theme is based on https://developer.microsoft.com/en-us/fluentui Framework and Microsoft SharePoint appearence.
You can use the Fluent UI Theme Designer 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:
<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:
<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.