How do I do this?
I want to ensure consistency through usage of the same colors.
Thanks in advance!
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.appendChild(linkElement);
This has the effect of importing the client sites CSS styles into my App's default.aspx.
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!
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
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.