|
|
# Theme Configuration
|
|
|
|
|
|
The theme is based on [https://developer.microsoft.com/en-us/fluentui](Fluent UI) Framework and Microsoft SharePoint appearence.
|
|
|
The theme is based on [https://developer.microsoft.com/en-us/fluentui](Fluent UI) Framework and Microsoft SharePoint appearance.
|
|
|
|
|
|
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.
|
|
|
You can change the main colors by adding from the **Code injection** into the *Site Header* the following style:
|
|
|
|
|
|
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] {
|
|
|
--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](https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/7.0/theming-designer/index.html) 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:
|
|
|
|
|
|
```html
|
|
|
<style type="text/css">
|
... | ... | @@ -86,26 +108,4 @@ To overwrite the theme color with your own one, add **Code injection** into the |
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
```
|
|
|
|
|
|
You can change the color by adding from the **Code injection** into the *Site Header* the following style:
|
|
|
|
|
|
```html
|
|
|
<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 |
|
|
``` |
|
|
\ No newline at end of file |