Please note this pertains to Sharepoint Online Themes only, not older versions or on-premises.
Specifically, my manager wants a dark theme and we want to use the "Dark Blue" theme as a base for it. I can pull the colors for custom themes, but the built-in themes do not seem to be accessible with SPO Powershell get-spotheme or other methods i can find. Since it is a publically available theme, I did not expect it to be too difficult to get the information. I found this link https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-theming/sharepoint-site-theming-json-schema which is supposed to show the default theme colors, but when i create my own from it and add/apply, it is not even close to the current "Dark Blue" theme. The theme.spcolor and theme.sptheme file created on application i can get, but they use a different color and format.
RANT: Microsoft really does not make this user friendly, which seems like a poor oversight on their part since users often think things are better when they LOOK better. Even the Theme Generator found here appears to be broken (along with lots of old broken links) and you cannot scroll to view and confirm without using dev tools to edit page. https://fluentuipr.z22.web.core.windows.net/heads/master/theming-designer/index.html
Theme files pulled directly from site /_catalogs/Theme after applied and files created by SP show base slot colors but they are in an odd format starting with ff? I think i can take the ff off and that should be the hex values but not entirely sure it will be accurate. Would prefer to get the actual theme as it currently exists like you would use for add-spotheme/get-spotheme - unsure it the additional colors are extrapolated colors from applying a theme or if i should/can include them in a theme i create for with add-spotheme. ANY ADVICE APPRECIATED
Theme.sptheme Dark Blue
<?xml version="1.0" encoding="utf-8"?>
<s:theme xmlns:s="http://schemas.microsoft.com/sharepoint/"
name="Dark Blue"
colorPaletteUrl="theme.spcolor" />
Theme.spcolor Dark Blue
<?xml version="1.0" encoding="utf-8"?>
<s:colorPalette isInverted="true" previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText" xmlns:s="http://schemas.microsoft.com/sharepoint/">
<s:color name="themePrimary" value="ff3a96dd" />
<s:color name="themeLighterAlt" value="ff020609" />
<s:color name="themeLighter" value="ff091823" />
<s:color name="themeLight" value="ff112d43" />
<s:color name="themeTertiary" value="ff235a85" />
<s:color name="themeSecondary" value="ff3385c3" />
<s:color name="themeDarkAlt" value="ff4ba0e1" />
<s:color name="themeDark" value="ff65aee6" />
<s:color name="themeDarker" value="ff8ac2ec" />
<s:color name="accent" value="ff3a96dd" />
<s:color name="neutralLighterAlt" value="ff1d2b3c" />
<s:color name="neutralLighter" value="ff223244" />
<s:color name="neutralLight" value="ff2b3d51" />
<s:color name="neutralQuaternaryAlt" value="ff324459" />
<s:color name="neutralQuaternary" value="ff374a5f" />
<s:color name="neutralTertiaryAlt" value="ff4f637a" />
<s:color name="neutralTertiary" value="ffc8c8c8" />
<s:color name="neutralSecondary" value="ffd0d0d0" />
<s:color name="neutralPrimaryAlt" value="ffdadada" />
<s:color name="neutralPrimary" value="ffffffff" />
<s:color name="neutralDark" value="fff4f4f4" />
<s:color name="black" value="fff8f8f8" />
<s:color name="white" value="ff182534" />
<s:color name="primaryBackground" value="ff182534" />
<s:color name="primaryText" value="ffffffff" />
<s:color name="HyperlinkActive" value="ff8ac2ec" />
<s:color name="CommandLinksPressed" value="ff8ac2ec" />
<s:color name="NavigationPressed" value="ff8ac2ec" />
<s:color name="EmphasisHoverBorder" value="ff8ac2ec" />
<s:color name="TopBarPressedText" value="ff8ac2ec" />
<s:color name="HeaderNavigationPressedText" value="ff8ac2ec" />
<s:color name="Hyperlinkfollowed" value="ff8ac2ec" />
<s:color name="EmphasisHoverBackground" value="ff65aee6" />
<s:color name="EmphasisBorder" value="ff65aee6" />
<s:color name="AccentText" value="ff3a96dd" />
<s:color name="CommandLinksHover" value="ff3a96dd" />
<s:color name="RowAccent" value="ff3a96dd" />
<s:color name="NavigationAccent" value="ff3a96dd" />
<s:color name="NavigationHover" value="ff3a96dd" />
<s:color name="EmphasisBackground" value="ff3a96dd" />
<s:color name="HeaderNavigationHoverText" value="ff3a96dd" />
<s:color name="HeaderNavigationSelectedText" value="ff3a96dd" />
<s:color name="SuiteBarBackground" value="ff3a96dd" />
<s:color name="Hyperlink" value="ff3a96dd" />
<s:color name="ContentAccent1" value="ff3a96dd" />
<s:color name="AccentLines" value="ff3385c3" />
<s:color name="HeaderAccentLines" value="ff3385c3" />
<s:color name="ButtonPressedBorder" value="ff3385c3" />
<s:color name="SuiteBarHoverBackground" value="ff235a85" />
<s:color name="StrongLines" value="ff112d43" />
<s:color name="HeaderStrongLines" value="ff112d43" />
<s:color name="SuiteBarHoverText" value="ff112d43" />
<s:color name="ButtonPressedBackground" value="ff112d43" />
<s:color name="ButtonHoverBorder" value="ff112d43" />
<s:color name="ButtonHoverBackground" value="ff091823" />
<s:color name="SelectionBackground" value="7f112d43" />
<s:color name="HoverBackground" value="7f091823" />
<s:color name="NavigationHoverBackground" value="7f091823" />
<s:color name="PageBackground" value="ff182534" />
<s:color name="EmphasisText" value="ff182534" />
<s:color name="SuiteBarText" value="ff182534" />
<s:color name="TileText" value="ff182534" />
<s:color name="BackgroundOverlay" value="d8182534" />
<s:color name="HeaderBackground" value="d8182534" />
<s:color name="FooterBackground" value="d8182534" />
<s:color name="DisabledBackground" value="ff1d2b3c" />
<s:color name="HeaderDisabledBackground" value="ff1d2b3c" />
<s:color name="ButtonBackground" value="ff1d2b3c" />
<s:color name="ButtonDisabledBackground" value="ff1d2b3c" />
<s:color name="SubtleEmphasisBackground" value="ff223244" />
<s:color name="DialogBorder" value="ff223244" />
<s:color name="NavigationSelectedBackground" value="c62b3d51" />
<s:color name="TopBarBackground" value="c62b3d51" />
<s:color name="DisabledLines" value="ff2b3d51" />
<s:color name="HeaderDisabledLines" value="ff2b3d51" />
<s:color name="ButtonDisabledBorder" value="ff2b3d51" />
<s:color name="SuiteBarDisabledText" value="ff2b3d51" />
<s:color name="SubtleLines" value="ff4f637a" />
<s:color name="HeaderSubtleLines" value="ff4f637a" />
<s:color name="ButtonGlyphDisabled" value="ff4f637a" />
<s:color name="DisabledText" value="ffc8c8c8" />
<s:color name="CommandLinksDisabled" value="ffc8c8c8" />
<s:color name="HeaderDisableText" value="ffc8c8c8" />
<s:color name="ButtonDisabledText" value="ffc8c8c8" />
<s:color name="Lines" value="ffc8c8c8" />
<s:color name="HeaderLines" value="ffc8c8c8" />
<s:color name="ButtonBorder" value="ffc8c8c8" />
<s:color name="CommandLinks" value="ffd0d0d0" />
<s:color name="Navigation" value="ffd0d0d0" />
<s:color name="SubtleEmphasisText" value="ffd0d0d0" />
<s:color name="TopBarText" value="ffd0d0d0" />
<s:color name="HeaderNavigationText" value="ffd0d0d0" />
<s:color name="ButtonGlyph" value="ffd0d0d0" />
<s:color name="BodyText" value="ffffffff" />
<s:color name="WebPartHeading" value="ffffffff" />
<s:color name="HeaderText" value="ffffffff" />
<s:color name="ButtonText" value="ffffffff" />
<s:color name="ButtonGlyphActive" value="ffffffff" />
<s:color name="TopBarHoverText" value="ffffffff" />
<s:color name="StrongBodyText" value="fff4f4f4" />
<s:color name="SiteTitle" value="fff4f4f4" />
<s:color name="CommandLinksSecondary" value="fff4f4f4" />
<s:color name="SubtleEmphasisCommandLinks" value="fff4f4f4" />
<s:color name="HeaderSiteTitle" value="fff4f4f4" />
<s:color name="TileBackgroundOverlay" value="7ff8f8f8" />
<s:color name="ContentAccent2" value="ff00485b" />
<s:color name="ContentAccent3" value="ff288054" />
<s:color name="ContentAccent4" value="ff767956" />
<s:color name="ContentAccent5" value="ffed0033" />
<s:color name="ContentAccent6" value="ff682a7a" />
</s:colorPalette>
normal format for sp application via powershell is like the below:
#DARK BLUE BUILT IN – wrong/old
$themeDB1 = @{
“themePrimary: '#00bcf2',
themeLighterAlt: '#00090c',
themeLighter: '#001318',
themeLight: '#002630',
themeTertiary: '#005066',
themeSecondary: '#00abda',
themeDarkAlt: '#0ecbff',
themeDark: '#44d6ff',
themeDarker: '#6cdfff',
neutralLighterAlt: '#2e3340',
neutralLighter: '#353a49',
neutralLight: '#404759',
neutralQuaternaryAlt: '#474e62',
neutralQuaternary: '#4c546a',
neutralTertiaryAlt: '#646e8a',
neutralTertiary: '#c8c8c8',
neutralSecondaryAlt: '#d0d0d0',
neutralSecondary: '#dadada',
neutralPrimaryAlt: '#eaeaea',
neutralPrimary: '#ffffff',
neutralDark: '#f4f4f4',
black: '#f8f8f8',
white: '#262a35',
primaryBackground: '#262a35',
primaryText: '#ffffff',
error: '#ff5f5f',
accent: '#3a96dd'
}
Add-SPOTheme -Identity "FedPoint Dark Blue 1" -Palette $themeDB1 -IsInverted $true -Overwrite
#(from what i can tell -isinverted $true is for Dark background themes, but i have not had much luck `testing it as yet)
- attempted to pull themes, only able to pull custom themes.
- attempted to pull files created on theme application, not in same format and some info may be extrapolated at time of theme application with colors using different values than expected.
- attempted to use disclosed MS Theme colors listed, but color values do not match actual current values when applied as a test theme.
UPDATE
- Changed format to PowerShell accepted format
- Removed first two letters of each color and replaced with #
- replaced "themePrimary"="#3a96dd” with bright blue "themePrimary"="#2489ed”;
- Replaced "themeLight"="#112d43"; with navy "themeLight"="#00308f"; This allows it to be selected as header and section background, may be too busy for our needs, considering creating two Dark Mode themes instead
- It is likely most things after black/white are not in use as they are not in the FLUENT theme generator, but not sure since microsoft does not seem to want to document SharePoint Online Themes well
- NOTE: May want to simply remove any with alpha not equal to FF (opaque)
Code I ended up using is:
$themeDB2 = @{
"themePrimary"="#2489ed";
"themeLighterAlt"="#020609";
"themeLighter"="#091823";
"themeLight"="#00308f";
"themeTertiary"="#235a85";
"themeSecondary"="#3385c3";
"themeDarkAlt"="#4ba0e1";
"themeDark"="#65aee6";
"themeDarker"="#8ac2ec";
"accent"="#2489ed";
"neutralLighterAlt"="#1d2b3c";
"neutralLighter"="#223244";
"neutralLight"="#2b3d51";
"neutralQuaternaryAlt"="#324459";
"neutralQuaternary"="#374a5f";
"neutralTertiaryAlt"="#4f637a";
"neutralTertiary"="#c8c8c8";
"neutralSecondary"="#d0d0d0";
"neutralPrimaryAlt"="#dadada";
"neutralPrimary"="#ffffff";
"neutralDark"="#f4f4f4";
"black"="#f8f8f8";
"white"="#182534";
"primaryBackground"="#182534";
"primaryText"="#ffffff";
"HyperlinkActive"="#8ac2ec";
"CommandLinksPressed"="#8ac2ec";
"NavigationPressed"="#8ac2ec";
"EmphasisHoverBorder"="#8ac2ec";
"TopBarPressedText"="#8ac2ec";
"HeaderNavigationPressedText"="#8ac2ec";
"Hyperlinkfollowed"="#8ac2ec";
"EmphasisHoverBackground"="#65aee6";
"EmphasisBorder"="#65aee6";
"AccentText"="#2489ed";
"CommandLinksHover"="#2489ed";
"RowAccent"="#2489ed";
"NavigationAccent"="#2489ed";
"NavigationHover"="#2489ed";
"EmphasisBackground"="#2489ed";
"HeaderNavigationHoverText"="#2489ed";
"HeaderNavigationSelectedText"="#2489ed";
"SuiteBarBackground"="#2489ed";
"Hyperlink"="#2489ed";
"ContentAccent1"="#2489ed";
"AccentLines"="#3385c3";
"HeaderAccentLines"="#3385c3";
"ButtonPressedBorder"="#3385c3";
"SuiteBarHoverBackground"="#235a85";
"StrongLines"="#112d43";
"HeaderStrongLines"="#112d43";
"SuiteBarHoverText"="#112d43";
"ButtonPressedBackground"="#112d43";
"ButtonHoverBorder"="#112d43";
"ButtonHoverBackground"="#091823";
"SelectionBackground"="#112d43";
"HoverBackground"="#091823";
"NavigationHoverBackground"="#091823";
"PageBackground"="#182534";
"EmphasisText"="#182534";
"SuiteBarText"="#182534";
"TileText"="#182534";
"BackgroundOverlay"="#182534";
"HeaderBackground"="#182534";
"FooterBackground"="#182534";
"DisabledBackground"="#1d2b3c";
"HeaderDisabledBackground"="#1d2b3c";
"ButtonBackground"="#1d2b3c";
"ButtonDisabledBackground"="#1d2b3c";
"SubtleEmphasisBackground"="#223244";
"DialogBorder"="#223244";
"NavigationSelectedBackground"="#2b3d51";
"TopBarBackground"="#2b3d51";
"DisabledLines"="#2b3d51";
"HeaderDisabledLines"="#2b3d51";
"ButtonDisabledBorder"="#2b3d51";
"SuiteBarDisabledText"="#2b3d51";
"SubtleLines"="#4f637a";
"HeaderSubtleLines"="#4f637a";
"ButtonGlyphDisabled"="#4f637a";
"DisabledText"="#c8c8c8";
"CommandLinksDisabled"="#c8c8c8";
"HeaderDisableText"="#c8c8c8";
"ButtonDisabledText"="#c8c8c8";
"Lines"="#c8c8c8";
"HeaderLines"="#c8c8c8";
"ButtonBorder"="#c8c8c8";
"CommandLinks"="#d0d0d0";
"Navigation"="#d0d0d0";
"SubtleEmphasisText"="#d0d0d0";
"TopBarText"="#d0d0d0";
"HeaderNavigationText"="#d0d0d0";
"ButtonGlyph"="#d0d0d0";
"BodyText"="#ffffff";
"WebPartHeading"="#ffffff";
"HeaderText"="#ffffff";
"ButtonText"="#ffffff";
"ButtonGlyphActive"="#ffffff";
"TopBarHoverText"="#ffffff";
"StrongBodyText"="#f4f4f4";
"SiteTitle"="#f4f4f4";
"CommandLinksSecondary"="#f4f4f4";
"SubtleEmphasisCommandLinks"="#f4f4f4";
"HeaderSiteTitle"="#f4f4f4";
"TileBackgroundOverlay"="#f8f8f8";
"ContentAccent2"="#00485b";
"ContentAccent3"="#288054";
"ContentAccent4"="#767956";
"ContentAccent5"="#ed0033";
"ContentAccent6"="#682a7a";
}
Add-SPOTheme -Identity "Dark Mode Blue 1" -Palette $themeDB2 -IsInverted $true -Overwrite