How do I Inherit the CSS Theme Color in my Sharepoint 2013 App?

Question

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!

Answer 1

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

Answer 2

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');
headElement[0].appendChild(linkElement);

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

Reference: http://blogs.msdn.com/b/richard_dizeregas_blog/archive/2012/08/02/optimizing-user-experience-for-sharepoint-2013-apps.aspx

Answer 3

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.

Answer 4

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.

http://go.limeleap.com/community/bid/287707/How-to-Easily-Bring-SharePoint-2013-Theme-Colors-Into-Your-Apps

Hope this helps!

Answer 5

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.