Automatically convert CSS file to be used on dark backgrounds

Question

I have about 200 CSS files like this:

/**
 * GeSHi Dynamically Generated Stylesheet
 * --------------------------------------
 * Dynamically generated stylesheet for bnf
 * CSS class: , CSS id: 
 * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann
 * (http://qbnz.com/highlighter/ and http://geshi.org/)
 * --------------------------------------
 */
.bnf .de1, .bnf .de2 {font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;}
.bnf  {font-family:monospace;}
.bnf .imp {font-weight: bold; color: red;}
.bnf li, .bnf .li1 {font-weight: normal; vertical-align:top;}
.bnf .ln {width:1px;text-align:right;margin:0;padding:0 2px;vertical-align:top;}
.bnf .li2 {font-weight: bold; vertical-align:top;}
.bnf .sy0 {color: #000066; font-weight: bold;}
.bnf .st0 {color: #a00;}
.bnf .st1 {color: #a00;}
.bnf .re0 {color: #007;}
.bnf .ln-xtra, .bnf li.ln-xtra, .bnf div.ln-xtra {background-color: #ffc;}
.bnf span.xtra { display:block; }

But colors in these CSS files are designed to look ok only on light (preferably white) backgrounds. Is there an algo (I can express in PHP code) I can apply to colors in these files to make them look nice on dark backgrounds (close to black)? May be I should just invert all colors? Or is there a better way?

Answer 1

If the CSS files contain some set of colors, you could define new colors for each available color first.
Then you read a complete CSS file into a variable with the file_get_contents function. Apply str_replace to repalce all colors with their new values and finally use file_put_contents to write the file back. (using another name?)

To process 200 CSS files, use opendir, readdir and closedir to read the contents of the directory containing your CSS files, so you are able to batch process the PHP code to convert the color values.

Answer 2

To convert all color values found from an CSS file to their inverse values, you can use this function:

function inverseColors($css) {
    preg_match_all('/#([a-f0-9]{6}|[a-f0-9]{3})/i', $css, $matches);
    $original = $matches[0];
    $inversed = array();
    foreach($matches[1] as $key => $color) {    
        $parts = str_split($color, strlen($color) == 3 ? 1 : 2);
        foreach($parts as &$part) {
            $part = str_pad(dechex(255 - hexdec($part)), 2, 0, STR_PAD_LEFT);
        }
        $inversed[$key] = '#'.implode('', $parts);    
    }

    $css = str_replace($original, $inversed, $css);
    echo $css;
}

That'll work on both three and six digit hex color values. But note that this will not result in optimal colors, inverse color will probably not be the best for your layout. Better results could be achieved by creating a lookup table for all colors and substituting those values in the new CSS.

To loop through all CSS files, you can use SPL classes to do a recursive search, then replace the CSS files using

file_put_contents($file, inverseColors(file_get_contents($file)));

Take a look at PHP's documentation about glob to learn more how to iterate directories recursively (in the comments section).