I'd like to use some colors from the wordpress admin theme to build my back-end plugin's theme, based on Bootstrap-3 & SASS/LESS.

I think I saw a few functions to get the colors of the admin theme but I am not sure its the right way to go. I am aware there might be 3th party admin themes but I'd be already happy to get the standard-themes covered.

Anyone knows how to do it? thanks. ps: a javascript solution is ok too.

update: I can't rely on Wordpress specific markup since my app is also used outside of WP. All i want is build my plugin's theme (Bootstrap 3-4) using the Wordpress's admin theme's CSS variables (if such exists). So if anyone knows how to build a variables.less/scss file for the Wordpress admin themes, then I am done I guess.

I'd like to use some colors from the wordpress admin theme to build my back-end plugin's theme, based on Bootstrap-3 & SASS/LESS.

I think I saw a few functions to get the colors of the admin theme but I am not sure its the right way to go. I am aware there might be 3th party admin themes but I'd be already happy to get the standard-themes covered.

Anyone knows how to do it? thanks. ps: a javascript solution is ok too.

update: I can't rely on Wordpress specific markup since my app is also used outside of WP. All i want is build my plugin's theme (Bootstrap 3-4) using the Wordpress's admin theme's CSS variables (if such exists). So if anyone knows how to build a variables.less/scss file for the Wordpress admin themes, then I am done I guess.

• themes

3 Answers 3

Building admin interfaces in WordPress is quite ad hoc. Which is historical reason for many of those interface looking nothing like WP admin surrounding them.

In general it works in terms of markup, rather than colors. You don't code in terms of "black" or "red", but in semantic terms like "primary" or "notification".

There are are some plugins/guides out there that help figure out markup (for example WP Admin Pattern Library) but they aren't really complete/official/whatever.

So in general the process loosely works as following:

1. Find a part of native WP admin with elements you need.
2. Ripoff and reuse HTML markup of those elements.
3. Fine tune whatever is missing with your own CSS.
4. Keep an eye out for changes in markup with new WP releases (it likes to fiddle and keep admin pretty every couple years).

After long digging in 3rd party admin themes and the Wordpress source code (wp-admin/css), the only reliable way to extract something usable like a variables.less/sass file from the latest Worpdress code seems to be in doing it the hard way:

1. parse the files from wp-admin/css with an CSS-AST generator (see http://iamdustan/reworkcss_ast_explorer/#/lExnKWzBFZ)
2. then transfer the selectors of interest ('.wp-ui-text-icon',....) into the variables.less/sass (in Node.JS).
3. As soon you've that file, you're ready to integrate it in your theme

(as soon I got something running, I will post it here; it's quite a painful job but worth the shot).

Many years later, CSS variables are available, and it's pretty easy to extract the currently active admin color scheme to a set of variables that can then be used by a plugin's stylesheet: https://wordpress.stackexchange/a/369713/181870