How to custom the theme of my website depends on user - html

Question

I'm using bootstrap 3 and i have to set multiple themes ont my website depends on each client we have.
Client 1 : green theme;
Client 2 : purple theme;
Client 3 : grey theme..
And goes on...
Context
The solution has to be dynamic, the website looks like the same, juste color change.
For now i use the theme on url (get theme... i search for a better solution)
I can't make a specific css by client type, duplicated code -> maintain impossible.
My solution for now
I make a file in php called bootstrap-override.css.php
Wich contain on top this code :
<?php
header("Content-Type: text/css");
$defaultWhite = $white = '#FFFFFF';
$defaultGray1 = $gray1 = '#E7E7E7';
$defaultGray2 = $gray2 = '#CDCDCD';
$defaultGray3 = $gray3 = '#F2F2F2';
$defaultGrayBlue1 = $grayBlue1 = '#99AEBD';
$defaultGrayBlue2 = $grayBlue2 = '#495D6C';
$defaultBlue1 = $blue1 = '#0094D7';
$defaultBlue2 = $blue2 = '#004F9F';
if (isset($_GET['theme'])) {
switch ($_GET['theme']) {
case 'CA':
$grayBlue1 = '#008168';
$blue1 = '#009AA5';
$blue2 = '#2A3B48';
break;
case 'CE':
$defaultGrayBlue1 = $grayBlue1 = '#ABABAB';
$defaultGrayBlue2 = '#727274';
$blue1 = '#D70119';
$blue2 = '#D70119';
break;
// More client...
}
}
?>
And my css using those variables, I call it using this code :
$this->headLink()->prependStylesheet($this->basePath() . '/websiteName/css/bootstrap-override.css.php'.((!empty($_GET['theme'])) ? "?theme={$_GET['theme']}" : ''))
(ZF2 application)
But the switch case part is ugly and the get part too.., i can't leave this in that way if i have a new client type i will make this code more complexe... i wanted a more efficient way to do this.
If someone can help to improve this.
Edit : From comments, Store all theme in Database, with a 1/n relationship between client / theme is possible, I had already thought month ago... but my problem for this solution is to design it. If i store this in Database, i have to create a model layer to respect Zend\MVC best practises, and how i design my CSS in this architecture ?

Answer 1

If I understand the issue correctly I would suggest adding CSS files to the HeadLink.
You could have a 'default' CSS file which implements the shared styles for all clients and then a separate, theme specific, CSS file which then specifies the just the styling for CA, CE etc.
To apply this to the HeadLink view helper you can use an event listener, listening 'on render'.
For example
use Zend\ModuleManager\Feature;
use Zend\EventManager\EventInterface;
use Zend\Mvc\MvcEvent;
class Module implements BootstrapListenerInterface
{
public function onBootstrap(EventInterface $event)
{
$eventManager = $event->getApplication()->getEventManager();
$eventManager->attach(MvcEvent::EVENT_RENDER, [$this, 'addClientCss'], 100);
}
public function addClientCss(MvcEvent $event)
{
$serviceManager = $event->getApplication()->getServiceManager();
$config = $serviceManager->get('config');
if (! isset($config['custom_css']) || ! is_array($config['custom_css'])) {
return;
}
$viewPluginManager = $serviceManager->get('ViewPluginManager');
$headLink = $viewPluginManager->get('headlink');
$basePath = $viewPluginManager->get('basepath')();
foreach($config['custom_css'] as $cssFilePath) {
$headLink->appendStylesheet($basePath . $cssFilePath);
}
}
}
Then the configuration in the required module.config.php.
return [
'client_css' => [
'/some/css/path/to/styles.css',
'/another/path/to/css/file.css'.
],
];
This would ideally be located in a module that is specific for the client or project you are working on (and also last in the module list in application.config.php) so that this config is merged last.