allowing users to select which colors in css document

[TechBoyJK]

Hola,

I'm about done with my site design. CSS is almost complete, and I'm happy with how the site appears across all browsers.

The next step in my development cycle is going to be provide alternate color themes to my users. I will have a default theme, and at the top right corner will be a small palette/swatch of about 7 colors, each representing a color theme.

What is the best way to approach this?

My idea is that each theme has its own set of color variables which would be included as a file, inserted into the style sheet.Each theme would have it's own include file, and a variable placed in a cookie would determine which theme file was included.

ie (i'm using cfml but it should apply to any scripting language)

-------------------------------
<cfset background = #e3edc2 >
<cfset color = #333 >
<cfset text = #686397 >
<cfset validated text = blue >
<cfset error text = red >
<cfset header background = #abd240 >
<cfset navbar backgroud = #686397 >

-----------------------------------

Then in the actual style sheet I would have

---------------------------------------------

<cf include template="theme.cfm">

body
{
background: #variable#; color: #variable#;
font: .8em arial, helvetica, sans-serif;
margin: auto;
padding:0px;

}

a
{
color: #variable#;
}


.smalltext
{
font-family: arial, helvetica, sans-serif;
color: #variable#;
font-size: .7em;
}


---------------------------------------------------------


Does this seem logical? Basically, I just want people to be able to choose between various color sets that would be applied to the style sheet dynamically. I can then work from one Main style sheet and add color themes as I please.

 

[PhatoseAlpha]

Wouldn't using external style sheets, and simply changing the referenced stylesheet be far more appropriate?

 

[MrScott81]

^^^ Agreed.

 

[TechBoyJK]

Originally posted by: PhatoseAlpha
Wouldn't using external style sheets, and simply changing the referenced stylesheet be far more appropriate?

I've decided that's what I'm going to do.

CSS doesn't like variables, and cfml won't even parse the css file due to it not being a cfml file.

So I'm just creating seperate css files, and setting a variable in a cookie that determines which is loaded.