Sp-dev-docs: Theme Token Variables in SASS available for any SPFX Project

Created on 3 Aug 2017 · 3Comments · Source: SharePoint/sp-dev-docs

Enhancement Request

During one of my latest blog post on using theme colors in SPFX Code I created a SASS file that includes all Office UI Fabric Colors as theme tokens.
It might make sense when this variable will be available by default to be used in any custom design built in SPFX. The SASS file works as far as have have tested it pretty well in the local workbench or Office 365.

This file can also be found in one of my GISTs

tracked

Source

StfBauer

👍2 ❤1 🎉1

Most helpful comment

Meanwhile I release and NPM Package to support theme tokens. This npm package is name 'spfx-uifabric-themes' and can be found on npm

This package can be imported through the SASS @import statement

@import './node_modules/spfx-uifabric-themes/office.theme.vars';

.container {
  background-color: $ms-themePrimary;
}

Variable will be replace during compilation to this.

.container_742604fa {
  background-color: "[theme:themePrimary, default:#0078d7]"
}

Have fun coding.

StfBauer on 3 Sep 2017

👍3 ❤2

All 3 comments

Meanwhile I release and NPM Package to support theme tokens. This npm package is name 'spfx-uifabric-themes' and can be found on npm

This package can be imported through the SASS @import statement

@import './node_modules/spfx-uifabric-themes/office.theme.vars';

.container {
  background-color: $ms-themePrimary;
}

Variable will be replace during compilation to this.

.container_742604fa {
  background-color: "[theme:themePrimary, default:#0078d7]"
}

Have fun coding.

StfBauer on 3 Sep 2017

👍3 ❤2

@StfBauer I came across your blog post the other day, but then I noticed that SPFx already provides these theme color tokens as Sass variables. When I generate a new SPFx web part (using SPFx generator 1.3.4 and 1.4.0), the .scss file that is created imports from ~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss at the top of the file. For example, I'm able to use $ms-color-themePrimary in my Sass and it gets replaced with "[theme:themePrimary, default: #0078d7]" when compiled. If you navigate to node_modules/@microsoft/sp-office-ui-fabric-core/dist/sass/ there is a ThemeOverrides.scss file you can see all of the token variables.

joshmcrty on 10 Feb 2018

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues