1

This question already has an answer here:


I am developing a SharePoint 2013 hosted app.
I would like to use in my app the color of the style site.
How can I retrieve the information of the style used by the site using JS?
Thanks,Nk

marked as duplicate by Arsalan Adam Khatri, Robert Lindgren Apr 7 '14 at 8:20

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • Can you clarify your question a bit more? By default you inherit the master page and css from the host web. – Jesus Shelby Apr 4 '14 at 13:46
  • In my App I would like to keep the same color of the style of the site. (If the site has a blue theme in my app I will show blue css and so on) – Nk SP Apr 4 '14 at 13:48
0

To use the host web's colours you'll need to dynamically load the host web's style sheet with some JavaScript. If you're using jQuery on the page, then you can use following block of JavaScript to inject the host web's style sheet onto your page.

(function () {
    // Retrieve the host web's URL from the query string
    var scriptbase = $.queryString('SPHostUrl') + '/_layouts/15/';

    // Create a <link> tag for the style sheet
    var $doclink = $('link').attr('rel', 'stylesheet');
    // The style sheet is loaded through an ASP.NET HTTP handler (defaultcss.ashx)
    $doclink.attr('href', scriptbase + 'defaultcss.ashx');

    // Add the style sheet link to the 
    $('head').append($doclink);
})();

If that doesn't work, you can also check out Microsoft's article How to: Use a SharePoint website's style sheet in apps for SharePoint for an example that doesn't require jQuery.

  • How can I get only some css values from that file? – Nk SP Apr 4 '14 at 14:39
  • I need the color of the class .ms-consoletoolbar (the top bar) – Nk SP Apr 4 '14 at 14:56
  • Why not just add .ms-consoletoolbar class to the element? Then if you still need the color value you could read the color using jQuery .css() method on the element. – thm51mb Apr 4 '14 at 14:58
  • I can not add the the default css file. I have my own css – Nk SP Apr 4 '14 at 15:04
  • Hmm, maybe GetThemeShadeByName() is what you need? msdn.microsoft.com/en-us/library/office/… – thm51mb Apr 4 '14 at 15:56

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