Jump to content

AdminDevModeColors: different colors for development backends


Recommended Posts

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:


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


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.


  • Like 8
  • Thanks 2
Link to comment
Share on other sites

  • 4 weeks later...

@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';


  • Like 2
Link to comment
Share on other sites

  • 4 years later...

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);



Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...