Theme Configuration

The theme is based on Fluent UI Framework and Microsoft SharePoint appearance.

You can change the main colors by adding from the Code injection into the Site Header the following style:

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

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

Or, create your own theme from the Fluent UI Theme Designer to generate it and apply it as light and dark mode.

From the Ghost Code injection, add into the Site Header part your theme color 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>