SharePoint Online Create a custom theme

Question

I've been researching how to implement a company branded theme. I found a great article: HOW TO CREATE A MULTICOLORED THEME FOR A MODERN SHAREPOINT ONLINE SITE

I tested this in the console: window.__themeState__.theme

And it returned significantly more values than in the article and in theme generators.

What I wonder is, can I utilize all these values below or is it recommended to use only the values created in the generator?

{themeDarker: "#002b4f", themeDark: "#003b6b", themeDarkAlt: "#00457e", themePrimary: "#004e8c", themeSecondary: "#125d9a", …}
AccentLines: "#125d9a"
AccentText: "#004e8c"
BackgroundOverlay: "rgba(255, 255, 255, 0.85)"
BodyText: "#323130"
ButtonBackground: "#faf9f8"
ButtonBorder: "#a19f9d"
ButtonDisabledBackground: "#faf9f8"
ButtonDisabledBorder: "#edebe9"
ButtonDisabledText: "#a19f9d"
ButtonGlyph: "#605e5c"
ButtonGlyphActive: "#323130"
ButtonGlyphDisabled: "#c8c6c4"
ButtonHoverBackground: "#c7dced"
ButtonHoverBorder: "#9abfdd"
ButtonPressedBackground: "#9abfdd"
ButtonPressedBorder: "#125d9a"
ButtonText: "#323130"
CommandLinks: "#605e5c"
CommandLinksDisabled: "#a19f9d"
CommandLinksHover: "#004e8c"
CommandLinksPressed: "#002b4f"
CommandLinksSecondary: "#201f1e"
ContentAccent1: "#004e8c"
ContentAccent2: "#00485b"
ContentAccent3: "#288054"
ContentAccent4: "#767956"
ContentAccent5: "#ed0033"
ContentAccent6: "#682a7a"
DialogBorder: "#f3f2f1"
DisabledBackground: "#faf9f8"
DisabledLines: "#edebe9"
DisabledText: "#a19f9d"
EmphasisBackground: "#004e8c"
EmphasisBorder: "#003b6b"
EmphasisHoverBackground: "#003b6b"
EmphasisHoverBorder: "#002b4f"
EmphasisText: "#ffffff"
FooterBackground: "rgba(255, 255, 255, 0.85)"
HeaderAccentLines: "#125d9a"
HeaderBackground: "rgba(255, 255, 255, 0.85)"
HeaderDisableText: "#a19f9d"
HeaderDisabledBackground: "#faf9f8"
HeaderDisabledLines: "#edebe9"
HeaderLines: "#a19f9d"
HeaderNavigationHoverText: "#004e8c"
HeaderNavigationPressedText: "#002b4f"
HeaderNavigationSelectedText: "#004e8c"
HeaderNavigationText: "#605e5c"
HeaderSiteTitle: "#201f1e"
HeaderStrongLines: "#9abfdd"
HeaderSubtleLines: "#c8c6c4"
HeaderSubtleText: "#8a8886"
HeaderText: "#323130"
HoverBackground: "rgba(199, 220, 237, 0.50)"
Hyperlink: "#004e8c"
HyperlinkActive: "#002b4f"
Hyperlinkfollowed: "#002b4f"
Lines: "#a19f9d"
Navigation: "#605e5c"
NavigationAccent: "#004e8c"
NavigationHover: "#004e8c"
NavigationHoverBackground: "rgba(199, 220, 237, 0.50)"
NavigationPressed: "#002b4f"
NavigationSelectedBackground: "rgba(237, 235, 233, 0.78)"
PageBackground: "#ffffff"
RowAccent: "#004e8c"
SelectionBackground: "rgba(154, 191, 221, 0.50)"
SiteTitle: "#201f1e"
StrongBodyText: "#201f1e"
StrongLines: "#9abfdd"
SubtleBodyText: "#8a8886"
SubtleEmphasisBackground: "#f3f2f1"
SubtleEmphasisCommandLinks: "#201f1e"
SubtleEmphasisText: "#605e5c"
SubtleLines: "#c8c6c4"
SuiteBarBackground: "#004e8c"
SuiteBarDisabledText: "#edebe9"
SuiteBarHoverBackground: "#4a88ba"
SuiteBarHoverText: "#9abfdd"
SuiteBarText: "#ffffff"
TileBackgroundOverlay: "rgba(0, 0, 0, 0.50)"
TileText: "#ffffff"
TopBarBackground: "rgba(237, 235, 233, 0.78)"
TopBarHoverText: "#323130"
TopBarPressedText: "#002b4f"
TopBarText: "#605e5c"
WebPartHeading: "#323130"
accent: "#03787c"
accentButtonBackground: "#03787c"
accentButtonText: "#ffffff"
actionLink: "#323130"
actionLinkHovered: "#201f1e"
backgroundOverlay: "rgba(255, 255, 255, 0.85)"
black: "#000000"
blackTranslucent40: "rgba(0,0,0,.4)"
blockingBackground: "#FDE7E9"
blockingIcon: "#FDE7E9"
blue: "#0078d4"
blueDark: "#002050"
blueLight: "#00bcf2"
blueMid: "#00188f"
bodyBackground: "#ffffff"
bodyBackgroundChecked: "#edebe9"
bodyBackgroundHovered: "#f3f2f1"
bodyDivider: "#edebe9"
bodyFrameBackground: "#ffffff"
bodyFrameDivider: "#edebe9"
bodyStandoutBackground: "#faf9f8"
bodySubtext: "#605e5c"
bodyText: "#323130"
bodyTextChecked: "#000000"
buttonBackground: "#ffffff"
buttonBackgroundChecked: "#c8c6c4"
buttonBackgroundCheckedHovered: "#edebe9"
buttonBackgroundDisabled: "#f3f2f1"
buttonBackgroundHovered: "#f3f2f1"
buttonBackgroundPressed: "#edebe9"
buttonBorder: "#8a8886"
buttonBorderDisabled: "#f3f2f1"
buttonText: "#323130"
buttonTextChecked: "#201f1e"
buttonTextCheckedHovered: "#000000"
buttonTextDisabled: "#a19f9d"
buttonTextHovered: "#201f1e"
buttonTextPressed: "#201f1e"
cardShadow: "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)"
cardShadowHovered: "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)"
cardStandoutBackground: "#ffffff"
defaultStateBackground: "#faf9f8"
dialogBorder: "#f3f2f1"
disabledBackground: "#f3f2f1"
disabledBodySubtext: "#c8c6c4"
disabledBodyText: "#a19f9d"
disabledBorder: "#c8c6c4"
disabledSubtext: "#d2d0ce"
disabledText: "#a19f9d"
elevation4: "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)"
elevation8: "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)"
elevation16: "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)"
elevation64: "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)"
errorBackground: "#FDE7E9"
errorIcon: "#A80000"
errorText: "#a4262c"
focusBorder: "#605e5c"
green: "#107c10"
greenDark: "#004b1c"
greenLight: "#bad80a"
infoBackground: "#f3f2f1"
infoIcon: "#605e5c"
inputBackground: "#ffffff"
inputBackgroundChecked: "#004e8c"
inputBackgroundCheckedHovered: "#003b6b"
inputBorder: "#605e5c"
inputBorderHovered: "#323130"
inputFocusBorderAlt: "#004e8c"
inputForegroundChecked: "#ffffff"
inputIcon: "#004e8c"
inputIconDisabled: "#a19f9d"
inputIconHovered: "#003b6b"
inputPlaceholderBackgroundChecked: "#c7dced"
inputPlaceholderText: "#605e5c"
inputText: "#323130"
inputTextHovered: "#201f1e"
largeFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
largeFontSize: "18px"
largeFontWeight: 400
largeMozOsxFontSmoothing: "grayscale"
largeWebkitFontSmoothing: "antialiased"
link: "#004e8c"
linkHovered: "#002b4f"
listBackground: "#ffffff"
listHeaderBackgroundHovered: "#f3f2f1"
listHeaderBackgroundPressed: "#edebe9"
listItemBackgroundChecked: "#edebe9"
listItemBackgroundCheckedHovered: "#e1dfdd"
listItemBackgroundHovered: "#f3f2f1"
listText: "#323130"
listTextColor: "#323130"
magenta: "#b4009e"
magentaDark: "#5c005c"
magentaLight: "#e3008c"
mediumFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
mediumFontSize: "14px"
mediumFontWeight: 400
mediumMozOsxFontSmoothing: "grayscale"
mediumPlusFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
mediumPlusFontSize: "16px"
mediumPlusFontWeight: 400
mediumPlusMozOsxFontSmoothing: "grayscale"
mediumPlusWebkitFontSmoothing: "antialiased"
mediumWebkitFontSmoothing: "antialiased"
megaFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
megaFontSize: "68px"
megaFontWeight: 600
megaMozOsxFontSmoothing: "grayscale"
megaWebkitFontSmoothing: "antialiased"
menuBackground: "#ffffff"
menuDivider: "#c8c6c4"
menuHeader: "#004e8c"
menuIcon: "#004e8c"
menuItemBackgroundChecked: "#edebe9"
menuItemBackgroundHovered: "#f3f2f1"
menuItemBackgroundPressed: "#edebe9"
menuItemText: "#323130"
menuItemTextHovered: "#201f1e"
messageLink: "#005A9E"
messageLinkHovered: "#004578"
messageText: "#323130"
neutralDark: "#201f1e"
neutralLight: "#edebe9"
neutralLighter: "#f3f2f1"
neutralLighterAlt: "#faf9f8"
neutralPrimary: "#323130"
neutralPrimaryAlt: "#3b3a39"
neutralQuaternary: "#d2d0ce"
neutralQuaternaryAlt: "#e1dfdd"
neutralSecondary: "#605e5c"
neutralSecondaryAlt: "#8a8886"
neutralTertiary: "#a19f9d"
neutralTertiaryAlt: "#c8c6c4"
orange: "#d83b01"
orangeLight: "#ea4300"
orangeLighter: "#ff8c00"
primaryBackground: "#ffffff"
primaryButtonBackground: "#004e8c"
primaryButtonBackgroundDisabled: "#f3f2f1"
primaryButtonBackgroundHovered: "#00457e"
primaryButtonBackgroundPressed: "#003b6b"
primaryButtonBorder: "transparent"
primaryButtonText: "#ffffff"
primaryButtonTextDisabled: "#d2d0ce"
primaryButtonTextHovered: "#ffffff"
primaryButtonTextPressed: "#ffffff"
primaryText: "#333333"
purple: "#5c2d91"
purpleDark: "#32145a"
purpleLight: "#b4a0ff"
red: "#e81123"
redDark: "#a4262c"
roundedCorner2: "2px"
roundedCorner4: "4px"
roundedCorner6: "6px"
severeWarningBackground: "#FED9CC"
severeWarningIcon: "#D83B01"
smallFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
smallFontSize: "12px"
smallFontWeight: 400
smallInputBorder: "#605e5c"
smallMozOsxFontSmoothing: "grayscale"
smallPlusFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
smallPlusFontSize: "12px"
smallPlusFontWeight: 400
smallPlusMozOsxFontSmoothing: "grayscale"
smallPlusWebkitFontSmoothing: "antialiased"
smallWebkitFontSmoothing: "antialiased"
successBackground: "#DFF6DD"
successIcon: "#107C10"
successText: "#107C10"
suiteBarBackground: "#004e8c"
suiteBarDisabledText: "#edebe9"
suiteBarText: "#ffffff"
superLargeFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
superLargeFontSize: "42px"
superLargeFontWeight: 600
superLargeMozOsxFontSmoothing: "grayscale"
superLargeWebkitFontSmoothing: "antialiased"
teal: "#008272"
tealDark: "#004b50"
tealLight: "#00b294"
themeAccent: "#004e8c"
themeAccentTranslucent10: "rgba(0, 78, 140, 0.10)"
themeDark: "#003b6b"
themeDarkAlt: "#00457e"
themeDarker: "#002b4f"
themeLight: "#9abfdd"
themeLighter: "#c7dced"
themeLighterAlt: "#f0f6fa"
themePrimary: "#004e8c"
themeSecondary: "#125d9a"
themeTertiary: "#4a88ba"
tinyFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
tinyFontSize: "10px"
tinyFontWeight: 400
tinyMozOsxFontSmoothing: "grayscale"
tinyWebkitFontSmoothing: "antialiased"
topBarBackground: "rgba(237, 235, 233, 0.78)"
topBarHoverText: "#323130"
topBarText: "#605e5c"
variantBorder: "#edebe9"
variantBorderHovered: "#a19f9d"
warningBackground: "#FFF4CE"
warningHighlight: "#ffb900"
warningIcon: "#797775"
warningText: "#323130"
white: "#ffffff"
whiteTranslucent40: "rgba(255, 255, 255, 0.40)"
xLargeFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
xLargeFontSize: "20px"
xLargeFontWeight: 600
xLargeMozOsxFontSmoothing: "grayscale"
xLargePlusFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
xLargePlusFontSize: "24px"
xLargePlusFontWeight: 600
xLargePlusMozOsxFontSmoothing: "grayscale"
xLargePlusWebkitFontSmoothing: "antialiased"
xLargeWebkitFontSmoothing: "antialiased"
xSmallFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
xSmallFontSize: "10px"
xSmallFontWeight: 400
xSmallMozOsxFontSmoothing: "grayscale"
xSmallWebkitFontSmoothing: "antialiased"
xxLargeFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
xxLargeFontSize: "28px"
xxLargeFontWeight: 600
xxLargeMozOsxFontSmoothing: "grayscale"
xxLargePlusFontFamily: "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
xxLargePlusFontSize: "32px"
xxLargePlusFontWeight: 600
xxLargePlusMozOsxFontSmoothing: "grayscale"
xxLargePlusWebkitFontSmoothing: "antialiased"
xxLargeWebkitFontSmoothing: "antialiased"
yellow: "#ffb900"
yellowDark: "#d29200"
yellowLight: "#fff100"

Answer 1

The new SharePoint site theming features use a JSON schema to store color settings and other information about each theme.

It is recommended to use the values mentioned in below official Microsoft documentation:

SharePoint site theming: JSON schema

An online Theme Generator tool can help you to define new custom themes.