pgAdmin styling, colors and usage of colors has been changed since version 4.0 largely to improve the consistency, user experience and ease of development
The app uses fixed set of colors throughout to give uniform look and feel across different dialogs, controls and tools.
Colors listed on this page are used for specific purpose. Class names starting with .bg- or .text- or .border- are defined for quick use, but not to be used out of the theme on which pgAdmin is build.
The colors used by pgAdmin are described in this section. pgAdmin majorly uses three colors namely primary, secondary and gray. There are few more colors which are used based on the specific context. To make the application more customizable, variables are defined specific to modules and takes values from the standard available colors. These variables should be used in the SCSS files and if required new variables can be added based on the module requirements, but the values should be taken from the available colors. Please note, all the required colors are defined and there is no need to add any new colors.
Available colors are:
The primary color should be used to call attention to the main part of the app. Use sparingly.
Secondary color is used in places like secondary buttons (Cancel, Next, etc.), toolbar buttons apart from the primary use buttons.
Danger color is used to highlight errors and failures
Success colors are used to highlight success and completions
Warning colors are used to give informative warnings
Grays should be used for borders, negative/empty spaces, disabled texts only. They are generally used for framing the controls.
Use these variables for foreground and background colors instead of white and black respectively. This will help in switching the colors easily if planned for a dark theme.
These are the color variables used by SQL editor