Is it possible to abstract out color theme definitions in CSS

Question

We have many images which are actually picked up based on a color theme (e.g. blue, red, gray ...). We create files with a common name under each theme (e.g. background, ...), is there a way to define the color theme in a common place so that the definition can be abstracted out. This would prevent me from changing the color theme all over the css file.

body {
    background: url('../img/blue/background.png');
    font-size: 13px;
    margin: 0px;
}

Answer 1

You can create dynamical CSS file by using any serverside scripting language like PHP.

style.css.php:

<?php
header("Content-type: text/css");
$theme = 'blue';
$color1 = '#fefefe';
?>

body {
    background: url('../img/<?=$theme?>/background.png');
    font-size: 13px;
    margin: 0px;
}

.sometext {
    color: <?=$color1?>
}

Answer 2

I don't believe you can with a pure css implementation as you would need to define your base paths for your images in a variable which you set with some logic (switch statement, if/else if, ..etc.) and then use that variable in the css.

Here are some options I thought of to do this. If you create a pseudo css file with your variable defined as a string that does not occur in css (ex: $basePath) and build out all your css rules in this fake css file as "$basePath+image.jpg". Then with some server side code retrieve the css file and create your template css files by replacing $basePath+ with the actual base path for that theme. The server side code would then save those css files as theme1.css, theme2.css, ...etc.

You then could use url variables to switch between themes using some server side code to insert a reference to the correct css theme file.

This way you would only need to maintain your pseudo template css file. Although you would need to rerun your css creation code each time you change the template css file so that your theme css files get updated.

Answer 3

While the options suggested here are viable approaches, I'd like to mention SASS and LESS

They are two CSS extension languages, which amongst other things provide variables for doing this sort of color stuff you mention.

Answer 4

Not natively in CSS - but you can write some scripts to compile your theme CSS files from templates with variable substitution. I would suggest having a 'layout' and a 'colour' css. The layout would be consistent irrespective of which theme the user is using. The colour css contains only those settings that change per theme.

<style type="text/css">
    @import ulr(layout.css);
    @import ulr(theme_<?= $activeTheme ?>_.css);
</style>

You could use a tool such as http://lesscss.org/ (if you like Ruby) to create your themed CSS files.

We use NAnt for something similar to this (not CSS, but same idea), and it saves a heap of time rather than maintaining multiple files that differ only by values.