Dynamic CSS Rules

I want to provide an option to change colors of my website. Just like those wordpress themes that allow to change the Color & fonts from backend.

Is there a proper way to achieve this thing without posting css rules in style tag? Like changing Sass variables from backend and compiling it from the server?

I would love to know your way of doing this!

Jeffberry

11 years ago

Level 4

I would just make your CSS into a blade file and render/return it via a route.

css.blade.php

body {
    background-color: {{ $backgroundColor }};
}

routes.php

Route::get('/css', function() {
    return view('css', ['backgroundColor' => '#fff']);
});

HTML

<link media="all" rel="stylesheet" type="text/css" href="/css">

Note that this is untested psuedo-code, but it should get you on the right track. You could also point your route to a CSS controller and prepare/return the view there.

1 like

chrisgeary92

11 years ago

Level 13

I've modified @Jeffberry's code to make it look less dynamic (to anyone browser the source code it looks like a normal .css file). Also sends the correct headers.

I haven't tested it though, but I've done the same before with robots.txt which worked fine.

Route::get('/style.css', function() {
    return View::response('css', ['backgroundColor' => '#fff'])->header('Content-Type', 'text/css');
});

5 likes

Please or to participate in this conversation.