Snippet · Mecha CMS

Code snippet collection for developers.

Automatic Custom Posts

Author: Taufik Nurrohman · 421 Views

Tweet

Change page color theme automatically based on the current URL path.

Insert this snippet to the index.php file of your active shield:

// <http://www.jonasjohn.de/snippets/php/color-inverse.htm>
function fn_color_inv($color) {
    $rgb = "";
    for ($x = 0; $x < 3; ++$x) {
        $c = 255 - hexdec(substr($color, (2 * $x), 2));
        $c = ($c < 0) ? 0 : dechex($c);
        $rgb .= (strlen($c) < 2) ? '0' . $c : $c;
    }
    return $rgb;
}

// <http://stackoverflow.com/a/3015242/1163000>
function fn_color_yin_or_yang($color) {
    $color = str_split($color, 2);
    return $color[0] + $color[1] + $color[2] > 382 ? '000000' : 'ffffff';
}

// <http://stackoverflow.com/a/11951022/1163000>
function fn_color_lev($color, $step) {
    $step = max(-255, min(255, $step));
    $rgb = "";
    foreach (str_split($color, 2) as $v) {
        $v = hexdec($v);
        $v = max(0, min(255, $v + $step));
        $rgb .= str_pad(dechex($v), 2, '0', STR_PAD_LEFT);
    }
    return $rgb;
}

Hook::set('asset.top', function($content) use($url) {
    // Generate HEX color code from current URL
    $background = substr(md5($url->path), 0, 6);
    // Determine whether the text should be white or black
    $color = fn_color_yin_or_yang($background);
    // Set page background and text color
    $css  = 'html,.toc li:after{background:#' . $background . ';color:#' . $color . '}';
    // Set link text color
    $css .= 'a{color:#' . fn_color_lev($background, 170) . '}';
    $css .= 'a:focus,a:active{color:#' . fn_color_lev($background, 210) . '}';
    // Set button background and text color
    $css .= '.button{background:#' . fn_color_lev($background, 170) . ';color:#' . $color . '}';
    $css .= '.button:focus,.button:active{background:#' . fn_color_lev($background, 210) . ';color:#' . $color . '}';
    // Set form input background and text color
    $css .= '.input,.select,.textarea{background:#' . $color . ';color:#' . $background . '}';
    // Set code snippet background and text color
    $css .= 'pre code{background:#' . fn_color_inv($color) . '}';
    $css .= 'pre .xmp{background:#' . fn_color_lev($background, 70) . ';color:#' . $background . '}';
    // Set quote and table border color
    $css .= 'blockquote,.table th,.table td{border-color:#' . fn_color_lev($background, 30) . '}';
    return $content . '<style media="screen">' . $css . '</style>';
}, 11);

Here are some results of the Document shield after customized by the code snippet above:

1
2
3
4
5
6

TODO: Need a better HEX color code generator based on current URL path other than this:

substr(md5($url->path), 0, 6);

Why I don’t see any pages with black text color?

0 Comments

No comments yet.