Alternate Color Schemes Using PHP

One great use for PHP is alternate content depending on different inputs. In this article, we will show how to serve up alternately colored style sheets via PHP.

Disclaimer: This makes use of CSS variables, over which there has been much debate. This article will not discuss whether one should or should not use CSS variables, only present a way to use them.

First, the call in the HTML will no longer call a CSS file, but a PHP file.

<link rel="stylesheet" type="text/css" file="styles.css" />

to

<link rel="stylesheet" type="text/css" file="styles.php?color=green" />

Of course, color can be any nomial you wish, and green can be any color you wish, or even the name of a color scheme, such as hotlava.

Now we move on to the CSS file. For the purposes of demonstration, we will be using the following sample CSS file:

body {
	background: #7BA05B;
}
#header {
	background: url(lush-forest.jpg);
}
#content {
	background: #FFFFFF;
	color: #465945;
}

First, if you haven’t already, change the extension of your CSS file to .php. For example, styles.css would become styles.php

Here is a very important step; don’t omit this. At the top of your new PHP file, add this line:

<?php header("Content-type: text/css"); ?>

This makes the server send the page as CSS. If you do not add this line, it will default to sending as HTML, and your browser will interpret it as this, thus leaving your actual page CSS-less.

The next step is to define some color schemes. For example, let’s add in a red color scheme to our example CSS. The following should go between the header line and the beginning of your CSS.

<?php
	$schemes = array (
		'green' => array (
			'header' => 'lush-forest.jpg',
			'page-bg' => '#7BA05B',
			'content-bg' => '#FFFFFF',
			'text' => '#465945'
			),
		'red' => array (
			'header' => 'flamin-lava.jpg',
			'page-bg' => '#FA8072',
			'content-bg' => '#FFFFFF',
			'text' => '#800000'
			)
		);
?>

Now that we have defined the schemes, we need a way to figure out which scheme is being called for.


/*
 * Because the variable is being specified in the request URL
 * we can use the GET array. You can replace 'color' with
 * whatever you have named your variable
 */
$scheme-name = $_GET['color'];
$scheme = $schemes[$scheme-name];
// If the specified scheme does not exist, default to 'green'
if ( !$scheme ) { $scheme = $schemes['green']; }

Then, in the CSS part, we replace the colors with PHP echos

body {
	background: <?php echo $scheme['page-bg']; ?>;
}
#header {
	background: url(<?php echo $scheme['header']; ?>);
}
#content {
	background: <?php echo $scheme['content-bg']; ?>;
	color: <?php echo $scheme['text']; ?>;
}

So in whole, the file would look like this:


<?php
	header("Content-type: text/css");
	$schemes = array (
		'green' => array (
			'header' => 'lush-forest.jpg',
			'page-bg' => '#7BA05B',
			'content-bg' => '#FFFFFF',
			'text' => '#465945'
			),
		'red' => array (
			'header' => 'flamin-lava.jpg',
			'page-bg' => '#FA8072',
			'content-bg' => '#FFFFFF',
			'text' => '#800000'
			)
		);
	$scheme-name = $_GET['color'];
	$scheme = $schemes[$scheme-name];
	if ( !$scheme ) { $scheme = $schemes['green']; }
?>
body {
	background: <?php echo $scheme['page-bg']; ?>;
}
#header {
	background: url(<?php echo $scheme['header']; ?>);
}
#content {
	background: <?php echo $scheme['content-bg']; ?>;
	color: <?php echo $scheme['text']; ?>;
}

Through this, it is possible to serve up different color schemes from the same file. Stay tuned for our next article in which we will explain how to “remember” the user’s preference and serve up the designated color scheme.

Leave a Reply

Alternate Color Schemes Using PHP