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 color by adding from the Code injection into the Site Header the following style:

<style type="text/css">
    :root,
    [data-theme] {
        --themeDarker: #6f2d09;
        --themeDark: #8d390b;
        --themeDarkAlt: #b5490f;
        --themePrimary: #ca5010;
        --themeSecondary: #e55c12;
        --themeTertiary: #f6b28d;
        --themeLight: #fbdac9;
        --themeLighter: #fdede4;
        --themeLighterAlt: #fef6f1;
        --accent: #986f0b;
    }
</style>

Note: the sample above is based on the orange theme of SharePoint