AdminDevModeColors: different colors for development backends

[BitPoet]

Inspired by this thread with a little nugget based on AOS by @benbyf to visually distinguish development systems from production ones, I wrote a small module that does the same and lets you adapt colors and text.

Link to the github repo:

AdminDevModeColors

Version 0.0.1 is still very alpha and only tested on PW 3.0.124.

Description

This module lets you change the color for the top toolbar and add a small piece of text for development systems, so you are immediately you aren't working on production (and vice versa). The adaptions are made through pure CSS and applied if either the "Enable DEV mode" checkbox in the module's configuration is checked or the property $config->devMode is set to true in site/config.php.

Works with Default, Reno and Uikit admin themes (though probably needs a lot of testing with different versions still).

Since a screenshot says more than thousand words...

Production system (unchanged):

Dev system (Default admin theme):

Dev system (Reno admin theme):

Dev system (Uikit admin theme):

Feel free to leave any feedback here and report any problems either in this thread or the github issue tracker.

 

[horst]

@BitPoet  Many thanks for this nice helper!

Whats about a little enhancement like this?

	protected function getStyle() {
		$bgcolor = $this->bgColor;
		if($this->config->devModeBgColor) $bgcolor = $this->config->devModeBgColor;
		if(! $bgcolor) $bgcolor = 'rgb(153, 12, 94)';
		$fgcolor = $this->fgColor;
		if($this->config->devModeFgColor) $fgcolor = $this->config->devModeFgColor;
		if(! $fgcolor) $fgcolor = 'rgb(255, 255, 255)';
		$devstring = $this->devString;
		if($this->config->devModeDevString) $devstring = $this->config->devModeDevString;
		if(! $devstring) $devstring = 'DEV';
...

 

[arjen]

Looking good! Thanks for posting.

@Martijn Geerts reminds you of something? ? 

[Martijn Geerts]

@arjen yep stupidity protection ?

[BitPoet]

On 5/21/2019 at 8:01 PM, horst said:

Whats about a little enhancement like this?

Implemented in dev but not tested yet ?

[Andy]

I see a very handy module. When I have a lot of different open projects, it can be hard to figure out what you have open at the moment. I wanted to do something like this myself. But my hands did not come to the matter. Thank you very much @BitPoet

However, I would like to mention one more important parameter. I would like the tab icon to change its color as well. This will be visible by the color of the tab in the browser on which development is taking place.

I also have different icons for frontend and backend. This is convenient for clients in a running project.

Such a method can be easily implemented in ready.php

$page->addHookAfter('render', function($event) {
    $template = $event->object->template;
    if ($template == 'admin') {
        $event->return = str_replace("<title>", "<link rel='icon' type='image/png' href='/img/backend_favicon.png'><title>", $event->return);
    }
});