Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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!

share|improve this question
add comment

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');
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

share|improve this answer
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 Feb 5 '13 at 8:25
add comment
up vote 2 down vote accepted

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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!

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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