I am building a Sharepoint 2013 App in Javascript / HTML / CSS and I want to implement / inherit the color / class / css used by the theme.

How do I do this?

I want to ensure consistency through usage of the same colors.

Thanks in advance!

  • im very exited to similar idea in UI and color customizations that improve or simpler and easier for users. have you anothers in here or your blog? for example show colors in right top corner and when select users save in personal customizations? personal view ? user's personalized custom page Commented Dec 12, 2016 at 20:02

5 Answers 5


I achieved this goal by adding the following to my App.js:

//Build absolute path to the layouts root with the spHostUrl
var layoutsRoot = strHostUrl + '/_layouts/15/';

//Create a Link element for the defaultcss.ashx resource
var linkElement = document.createElement('link');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('href', layoutsRoot + 'defaultcss.ashx');

//Add the linkElement as a child to the head section of the html
var headElement = document.getElementsByTagName('head');

This has the effect of importing the client sites CSS styles into my App's default.aspx.

Reference: Link

  • 1
    Thanks for the reply. This specific CSS file is already added when running the App because it has to show the navigation at the top. So this is abundant functionality I think? Nonetheless, what I would like to do is get what the color is that Sharepoint sets to the theme - at runtime. I don't want to specifically set the color that I can find in the CSS, because then it won't be dynamic to the theme. If the user changes the theme, the colors in my app should change with the theme.
    – Tom
    Commented Feb 5, 2013 at 8:25

Thanks to the other answers I have solved the problem.

The default css file is automatically linked when using the App, but using Keith Tuomi's code to define the css file is a good idea to ensure linkage.

I went through the css file and found the appropriate class called ms-ContentAccent1-bgColor which gives the color.

I am going to test if this works cross-theme, but for now it works!

Thank you!

EDIT: Using Keith Tuomi's solution to implement the layout does not work cross-theme as it implements the default theme where I want to get the color from the currently selected theme. Which works by using the automatically added css file and the same class.

EDIT2: After searching around in the CSS file and the rest of the (default) site, I found out that there are better classes to use then the class like ms-ContentAccent1-bgColor. The class ms-tileview-tile-content for example is used on the main page to show tile content, perfect for my Flexbox implementation.

EDIT3: Using the correct classes is mandatory, so doing some research into this is a wise idea. Following the links provided by the other answers I got to this very useful list: http://msdn.microsoft.com/en-us/library/jj220046.aspx#UXGuide_CSS


Make the Default.aspx page of your the app inherit from the app.master Masterpage. This way your app web will automatically take the styling of your host web.


I just wrote a blog entry on how to do this on the server-side. Put the class ThemeHelper into your apps, and then generate your CSS on the server-side, placing theme colors into the CSS where necessary.


Hope this helps!


In the MSDN library you can find the UX guidelines that help you to understand which styles you have inside the sheets: http://msdn.microsoft.com/en-us/library/jj220046.aspx

BTW if you use tha standard controls/chrome controls,they use the standard style inside the standard css.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.