helen / admin-color-schemer

Create your own admin color scheme, right in the WordPress admin under the Tools menu.

Admin Color Schemer

Contributors: wordpressdotorg, helen, markjaquith
Requires at least: 3.8
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Stable tag: 1.1

Create your own admin color scheme, right in the WordPress admin under the Tools menu.

Description

Create your own admin color scheme, right in the WordPress admin under the Tools menu. Go simple with the four basic colors, or get into the details and customize to your heart's content.

Contributing

Pull requests and issues on GitHub welcome.

Installation

Admin Color Schemer is most easily installed automatically via the Plugins tab in your dashboard. Your uploads folder also needs to be writeable in order to save the scheme.

Frequently Asked Questions

Why do I have to click a button to preview?

The preview currently operates by generating a complete stylesheet and reloading it. While in some environments this happens near-instantaneously, the time and resources it takes to reflect a change are not ideal for live previews. We do hope to solve this in a later release.

I'm getting an ugly screen asking me for a username and password.

This means that your uploads folder requires credentials in order to save the the scheme files. If you're not sure how to fix that, please try the support forums. We'll also work on making this prompt more beautiful in the future.

What should I do if I've updated this plugin or WordPress recently and now my color scheme doesn't look right?

Some versions of WordPress or this plugin may change how the custom color scheme output is generated, so if you see something funny, first try re-saving your custom color scheme. If it's still broken, then please let us know.

Screenshots

1. Admin color schemer in action

Changelog

1.1

• Updated phpsass library to fix PHP 7 bug (with many thanks to @KZeni).
• Ensure custom color scheme can be previewed when using the default admin color scheme.
• Avoid a potential PHP notice.

1.0

• Initial release

admin-color-schemer's Issues

Feature request: button colour to also affect ACF buttons

It would be really great if the button colour selected also applied to buttons in the Advanced Custom Fields plugin. Thanks for this plugin, I use it on every site I build.

Consider support for prefers-color-scheme media query (light / dark mode support)

Ref: https://twitter.com/Keithamus/status/1055179677277384705

Safari Tech Preview now supports a prefers-color-scheme: dark CSS media query that is used when macOS Mojave is in dark mode.

I would love to see this plugin support this separate media query by offering both a "Regular/Normal/Default" (what the plugin currently offers) and "Dark" set of colors to be used (Dark then being optional, of course, and simply offering the same amount of scheme customization as the regular color set.)

Correct me if I'm wrong, but it could be as simple as duplicating the existing admin color controls to have a separate "Dark" set (possibly include a new box or have it as a new column in the existing box... including how it's used by prefers-color-scheme with browsers, of course) and then setting up the dark color customizations to output just like the existing setup with them wrapped in the prefers-color-scheme: dark media query.

Feature Request : Metabox Titles Color

Hi !

I am a big fan of your plugin !

I was tweaking the admin CSS a bit and I found that to have a background color on metabox titles was absolutely gorgious !
It would be awesome if you could embed this feature into your plugin !

the CSS class are : .meta-box-sortables h3, .postbox h3, and it could be awesome if we could change both background and text color :)

Screenshot : http://cl.ly/image/0F29402g1635
Isn't that gorgious ? :)

Create multiple schemes and name them

PHP bug

richthegeek/phpsass#179

More links to the schemer admin page

It's kind of buried under Tools - some people have a habit of looking at the plugin row actions, and we should definitely link to edit a scheme from the user profile screen.

Lost customization on changing WP directory

Hello !
First of all, sorry for my bad english. I'm french, and I do my best...
And thank you so much for such a nice pluging !!!

When replacing a website with a WordPress solution, I prepare the new version in an under-directory.
When it's ok, I replace the old one in the main/online directory.
I change parameters following WordPress notice for doing that.
But I lose custom parameters of Admin Color Schemer.
Il looked in the database / usermeta table trying to find a bad url that should be changed, but nothing that seem to be wrong.
How could I fix that ?
Thank you in advance for any information !
Regards,

RTL support

For reference, core does this through Grunt+CSSJanus.

Create a contributing guide

Probably a CONTRIBUTING.md. Have already created a develop branch and set it to be the default in GitHub.

Previewing doesn't work when using the default color scheme

Discovered while testing to release 1.1, am not sure if this was always broken but I have a suspicion it probably was.

The preview mechanism works by replacing the CSS file reference on #colors-css, but if you're using the default admin color scheme there is no separate color scheme file to load and therefore no #colors-css. Pull request to fix this incoming.

Are there differences between how this plugin works and built in schemes

Are there differences between how this plugin works and built in schemes - I ask as there is a plugin I use that has a non-traditional wordpress menu. It adopts the menu colors from the built in schemes, but it does not with the custom one.

Live preview

Some ideas on how to do this, but nothing that doesn't require duplicating things in core and possibly creating a less-than-smooth transition between core upgrades. Ideas welcome.

JSON export/import

Per @markjaquith: "People could share these suckers in a tweet’s length."

Support PHP 7

Hey guys, any plans to update this to PHP7?

SVG icon color handling

Two things:

1. The focus and current colors are currently hard-coded to white. These should get the appropriate values when otherwise specified (menu-highlight-icon and menu-current-icon, I believe).
2. Changes to icon colors need to be reflected on preview.

Missing empty-scheme.php template

Hello,

I believe this plugin is missing its empty-scheme.php.

Warning: include(C:\apache\htdocs\wordpress\wp-content\plugins\admin-color-schemer/templates/empty-scheme.php): failed to open stream: No such file or directory in C:\apache\htdocs\wordpress-latest\wp-content\plugins\admin-color-schemer\classes\plugin.php on line 110

Warning: include(): Failed opening 'C:\apache\htdocs\wordpress\wp-content\plugins\admin-color-schemer/templates/empty-scheme.php' for inclusion (include_path='.;C:\php\pear') in C:\apache\htdocs\wordpress-latest\wp-content\plugins\admin-color-schemer\classes\plugin.php on line 110

Not working with check boxes

If you look at screen options for example, I can't see which options are checked or not. I'm using WP 5.5.1, the most recent TwentyTwenty theme, Admin Color Schemer 1.1 and no other plugins. I just chose colors for the 4 basic options.
I was able to reproduce this on another website.

Handle core upgrades

In the case that core's Sass files change between releases, in particular minor ones, we should handle that appropriately. A likely path would be to delete all the files, both copied from core and generated, re-copy, and re-compile.

Community palette sharing / voting / etc.

Possibly powered by .org; specifically not a @nacin project.

Fix PHP 8.x fatal error upon saving custom admin color scheme

It seems the lib/phpsass library (last updated 5 years ago, it seems) needs to be updated to a new version or otherwise patched to avoid a fatal PHP error when saving a color scheme for those using PHP 8.0+.

The exact errors appear to be:

1. Fatal error: An error of type E_COMPILE_ERROR was caused in line 133 of the file /wp-content/plugins/admin-color-schemer/lib/phpsass/tree/SassRuleNode.php. Error message: Array and string offset access syntax with curly braces is no longer supported
2. Fatal error: Uncaught Error: count(): Argument #1 ($value) must be of type Countable|array, string given in /wp-content/plugins/admin-color-schemer/lib/phpsass/tree/SassMixinNode.php on line 66
3. Fatal error: Uncaught Error: strlen(): Argument #1 ($str) must be of type string, array given in /wp-content/plugins/admin-color-schemer/lib/phpsass/script/SassScriptFunction.php on line 207

Ideally, there's a new version of that PHPSass library that can be dropped in to replace the old one which accommodates modern PHP.

Otherwise, it appears those 3 errors can be patched while leaving the rest as-is to get things back into working order on PHP 8.0 from what I've tested:

1. Replace those 2 sets of curly braces with square brackets
2. Add if(gettype($this->args) == 'string'){ $this->args = array($this->args); } before $argc = count($this->args);
3. Add $string = ''.$string; before $strlen = strlen($string);
   for the 3 respective files & errors above.

Additionally, it'd probably be good to update/add to the plugin's data in the main plugin file & readme info for mentioning the required PHP version (currently missing but 5.6 might be a fine option [haven't tested to be sure] unless 7.0 or something is a better option since those still on 5.6 are likely already needing to use old versions of plugins anyway & would be easier to test/guarantee), required WordPress version (3.8+ might be fine as-is), and the WordPress version it's been tested up to (currently missing while it can now be 6.2.2 to get rid of that warning on https://wordpress.org/plugins/admin-color-schemer/ that says the plugin hasn't been tested with modern WP versions) while also updating the plugin version, changelog, etc. accordingly.

*Keeping in mind that https://core.trac.wordpress.org/ticket/48881 might also still be happening for anyone with checkboxes that don't show up. I wonder if there's a good way where the checkbox just isn't given a custom style unless it's been specifically set in the custom admin color scheme setting for that one item to help avoid oddities regarding this.

I’ve also posted this at https://wordpress.org/support/topic/fatal-error-fix-php-8-x-fatal-error-upon-saving-custom-admin-color-scheme/ if it’s seen as beneficial to discuss/track things further there (and/or also putting this in one of the first spots one might look at when encountering this issue.)

Add support for editor color scheme

The color theme in WordPress Core now add custom colors also to the editor. This is being done by adding css custom properties in the editor. These get injected via a body class on the editor pages.

The available colors in the editor seem to be:

--wp-admin-theme-color: #000;
--wp-admin-theme-color-darker-10: #000;
--wp-admin-theme-color-darker-20: #000;

In core they are defined here: https://github.com/WordPress/WordPress/blob/ad48a153873cdef28ab03c54a034de807e729052/wp-includes/css/dist/edit-post/style.css#L1998-L2008

body.admin-color-light {
    --wp-admin-theme-color: #0085ba;
    --wp-admin-theme-color-darker-10: #0073a1;
    --wp-admin-theme-color-darker-20: #006187;
    --wp-admin-border-width-focus:2px
}

body.admin-color-modern {
    --wp-admin-theme-color: #3858e9;
    --wp-admin-theme-color-darker-10: #2145e6;
    --wp-admin-theme-color-darker-20: #183ad6;
    --wp-admin-border-width-focus:2px
}

body.admin-color-blue {
    --wp-admin-theme-color: #096484;
    --wp-admin-theme-color-darker-10: #07526c;
    --wp-admin-theme-color-darker-20: #064054;
    --wp-admin-border-width-focus:2px
}

body.admin-color-coffee {
    --wp-admin-theme-color: #46403c;
    --wp-admin-theme-color-darker-10: #383330;
    --wp-admin-theme-color-darker-20: #2b2724;
    --wp-admin-border-width-focus:2px
}

body.admin-color-ectoplasm {
    --wp-admin-theme-color: #523f6d;
    --wp-admin-theme-color-darker-10: #46365d;
    --wp-admin-theme-color-darker-20: #3a2c4d;
    --wp-admin-border-width-focus:2px
}

body.admin-color-midnight {
    --wp-admin-theme-color: #e14d43;
    --wp-admin-theme-color-darker-10: #dd382d;
    --wp-admin-theme-color-darker-20: #d02c21;
    --wp-admin-border-width-focus:2px
}

body.admin-color-ocean {
    --wp-admin-theme-color: #627c83;
    --wp-admin-theme-color-darker-10: #576e74;
    --wp-admin-theme-color-darker-20: #4c6066;
    --wp-admin-border-width-focus:2px
}

body.admin-color-sunrise {
    --wp-admin-theme-color: #dd823b;
    --wp-admin-theme-color-darker-10: #d97426;
    --wp-admin-theme-color-darker-20: #c36922;
    --wp-admin-border-width-focus:2px
}

Feature idea be able to choose the theme name: "Custom"

That you can choose what the admin theme is called in a setting menu.

already suggested this over at wordpress.org but figured I"d share it here too.

Separate icon styling for admin bar and admin menu

It would be nice to be able to style the admin bar icons separately from the admin menu.

For example:

When editing a scheme that has advanced colors set, those colors should float to the top section.

Otherwise they are hidden/buried.

Enforce required values

We should either error out or fall back - this may need to be case-by-case. For instance, the icon_color should fall back to white if cleared out, but not specifying a base color should probably result in an error.

Handle plugin updates

Closely related to #2 - sometimes the plugin updates might mean changes to the way the Sass is compiled, so it should probably either recompile the CSS on update or prompt the user to do so. The latter is probably safer. Either way, this will need to store an option with the plugin's version whenever the CSS is compiled.

No-JS preview

A preview.css file is written - just need to do the magic to make this work for no-JS in addition to the implemented AJAX way.

Color variables coming up as "undefined" on my development site

Even though I'm running from build. Here's what it looks like: https://cloudup.com/cNQMqQSq4Ls