Using .Net ConfigurationManager.AppSettings in CSS

Question

I have an AppSettings key for a specific color that my company uses and I want to apply that color to a CSS class. It is important that it uses the key, because other companies may want to change the color to their own. My problem is that I cannot figure out how to apply my key in my stylesheet. Is there any way to call the ConfigurationManager in a .css file or is there some kind of workaround?

Web.config with keys:

    <appSettings>
        <add key="webpages:Version" value="3.0.0.0" />
        <add key="webpages:Enabled" value="false" />
        <add key="ClientValidationEnabled" value="true" />
        <add key="UnobtrusiveJavaScriptEnabled" value="true" />
        <add key="CorpColorBlue" value="#004B85"/>
        <add key="CorpColorGreen" value="#009467"/>
        <add key="CorpColorOrange" value="#E98300"/>
    </appSettings>

CSS Class I am trying to apply it to (brackets are for clarification):

.thead-company {
    color: white;
    background-color: [COMPANY-BLUE];
    border-color: [COMPANY-BLUE];
}

My current solution is to just call the ConfigurationManager directly in my views, but that is too much duplicated code and will be an issue when a color is changed. What can I do instead?

Current solution:

...
@{
    var companyBlue = ConfigurationManager.AppSettings["CorpColorBlue"];
}
...
<table class="table table-hover table-bordered table-striped">
    <thead class="thead-company" style="background-color:@companyBlue; border-color:@companyBlue">
...

You have the following options - 1. include the style tags in your cshtml file, 2. not sure if you can still do this but you used to be able to create an ashx file and serve it as css. 3. inline as you are. Although I don't see the point of putting these values in the app settings as the way you seem to be using them, they will always stay the same - unless you're saying corpblue may be different depending on which app is using it — Pete
– Pete, Commented Aug 4, 2021 at 9:57
Or with mvc you can serve an action as css: stackoverflow.com/questions/3286010/… — Pete
– Pete, Commented Aug 4, 2021 at 10:03
I will give it a try with that action as css you linked. I should probably have named the color as corpprimary, corpsecondary etc. as the colors depends on the company's colors, which means they may vary (I realize corpblue is a bad name, since other companies may not use blue). Thank you for the reply, I will return with the results. — Aletho
– Aletho, Commented Aug 4, 2021 at 10:50
It worked perfectly, I've added my working solution as an answer. Thanks a lot for your assistance Pete! — Aletho
– Aletho, Commented Aug 4, 2021 at 11:11

Aletho · Accepted Answer · 2021-08-04 11:10:56Z

As user @Pete linked in the comments, this question has the answer I needed. The best way for me to avoid duplicated code was to use the accepted answer in the question and implement it like so:

Controller:

public ContentResult GetCompanyColorStyle()
        {
            var builder = new StringBuilder();

            builder.Append(".thead-company-primary");
            builder.Append(" { ");
            builder.Append(string.Format("{0}: {1}; ", "background-color", System.Configuration.ConfigurationManager.AppSettings["CorpColorPrimary"]));
            builder.Append(string.Format("{0}: {1}; ", "border-color", System.Configuration.ConfigurationManager.AppSettings["CorpColorPrimary"]));
            builder.AppendLine("}");

            return Content(builder.ToString(), "text/css");
        }

_Layout.cshtml:

<link href="@Url.RouteUrl(new { controller = "Home", action = "GetCompanyColorStyle" })" rel="stylesheet" type="text/css" />

Collectives™ on Stack Overflow

Using .Net ConfigurationManager.AppSettings in CSS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related