Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • Ghost Fluent UI Ghost Fluent UI
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 17
    • Issues 17
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Packages & Registries
    • Packages & Registries
    • Infrastructure Registry
  • Analytics
    • Analytics
    • CI/CD
    • Repository
    • Value stream
  • Wiki
    • Wiki
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Ghost Themes
  • Ghost Fluent UIGhost Fluent UI
  • Wiki
  • theme

theme · Changes

Page history
Update theme authored Feb 08, 2021 by Laurent Sittler's avatar Laurent Sittler
Hide whitespace changes
Inline Side-by-side
Showing with 26 additions and 26 deletions
+26 -26
  • theme.md theme.md +26 -26
  • No files found.
theme.md
View page @ c1236dd3
# 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
Clone repository

Home

Theme

  • Header
  • Footer

Search Engine

  • GhostHunder
  • Elasticsearch

Apps Launcher

Templates

  • Posts
  • Pages
  • Tags
  • Featured
  • Events

Blog Comments

  • Isso