Skip to content

Instantly share code, notes, and snippets.

@StfBauer

StfBauer/_theming.scss

Last active November 7, 2024 22:18
Show Gist options
  • Save StfBauer/413781275585f2549a4b0bbe26b8be42 to your computer and use it in GitHub Desktop.
Save StfBauer/413781275585f2549a4b0bbe26b8be42 to your computer and use it in GitHub Desktop.
Download ZIP
Sass Variables of all theme slots
Raw
_theming.scss
$ms-greenLight: "[theme:greenLight, default:#bad80a]";
$ms-neutralSecondaryAlt: "[theme:info, default:#767676]";
$ms-neutralLight: "[theme:infoBackground, default:#eaeaea]";
$ms-magenta: "[theme:magenta, default:#b4009e]";
$ms-magentaDark: "[theme:magentaDark, default:#5c005c]";
$ms-magentaLight: "[theme:magentaLight, default:#e3008c]";
$ms-neutralDark: "[theme:neutralDark, default:#212121]";
$ms-neutralLight: "[theme:neutralLight, default:#eaeaea]";
$ms-neutralLighter: "[theme:neutralLighter, default:#f4f4f4]";
$ms-neutralLighterAlt: "[theme:neutralLighterAlt, default:#f8f8f8]";
$ms-neutralPrimary: "[theme:neutralPrimary, default:#333333]";
$ms-neutralPrimaryAlt: "[theme:neutralPrimaryAlt, default:#3C3C3C]";
$ms-neutralQuaternary: "[theme:neutralPrimaryTranslucent50, default:#d0d0d0]";
$ms-neutralQuaternaryAlt: "[theme:neutralQuaternary, default:#dadada]";
$ms-neutralSecondary: "[theme:neutralQuaternaryAlt, default:#666666]";
$ms-neutralSecondaryAlt: "[theme:neutralSecondary, default:#767676]";
$ms-neutralTertiary: "[theme:neutralSecondaryAlt, default:#a6a6a6]";
$ms-neutralTertiaryAlt: "[theme:neutralTertiary, default:#c8c8c8]";
$ms-white: "[theme:neutralTertiaryAlt, default:#ffffff]";
$ms-orange: "[theme:orange, default:#d83b01]";
$ms-orangeLight: "[theme:orangeLight, default:#ea4300]";
$ms-orangeLighter: "[theme:orangeLighter, default:#ff8c00]";
$ms-primaryBackground: "[theme:primaryBackground, default:#0078d7]";
$ms-primaryText: "[theme:primaryText, default:#0078d7]";
$ms-purple: "[theme:purple, default:#5c2d91]";
$ms-purpleDark: "[theme:purpleDark, default:#32145a]";
$ms-purpleLight: "[theme:purpleLight, default:#b4a0ff]";
$ms-red: "[theme:red, default:#e81123]";
$ms-redDark: "[theme:redDark, default:#a80000]";
$ms-success: "[theme:success, default:#107c10]";
$ms-successBackground: "[theme:successBackground, default:#dff6dd]";
$ms-teal: "[theme:teal, default:#008272]";
$ms-tealDark: "[theme:tealDark, default:#004b50]";
$ms-tealLight: "[theme:tealLight, default:#00b294]";
$ms-themeAccent: "[theme:themeAccent, default:inherit]";
$ms-themeAccentTranslucent10: "[theme:themeAccentTranslucent10, default:inherit]";
$ms-themeDark: "[theme:themeDark, default:#005a9e]";
$ms-themeDarkAlt: "[theme:themeDarkAlt, default:#106ebe]";
$ms-themeDarker: "[theme:themeDarker, default:#004578]";
$ms-themeLight: "[theme:themeLight, default:#b3d6f2]";
$ms-themeLightAlt: "[theme:themeLightAlt, default:inherit]";
$ms-themeLighter: "[theme:themeLighter, default:#deecf9]";
$ms-themeLighterAlt: "[theme:themeLighterAlt, default:#eff6fc]";
$ms-themePrimary: "[theme:themePrimary, default:#0078d7]";
$ms-themeSecondary: "[theme:themeSecondary, default:#2488d8]";
$ms-themeTertiary: "[theme:themeTertiary, default:#69afe5]";
$ms-themeTertiaryAlt: "[theme:themeTertiaryAlt, default:#c8c8c8]";
$ms-white: "[theme:white, default:#ffffff]";
$ms-whiteTranslucent40: "[theme:whiteTranslucent40, default:rgba(255,255,255,.4)]";
$ms-yellow: "[theme:yellow, default:#ffb900]";
$ms-yellowLight: "[theme:yellowLight, default:#fff100]";
@patrickabel
Copy link

Bookmarked @StfBauer – thanks for sharing!

@StfBauer
Copy link
Author

StfBauer commented Dec 5, 2017

Meanwhile this Gist is a bit outdated - I created a npm package that allows you to consume those variables easier.
NPM Package: https://www.npmjs.com/package/spfx-uifabric-themes
Git Repository: https://github.com/StfBauer/spfx-uifabric-themes
Blog Post:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment