Style Guide

Colors

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.

Example:
To use a background color use the class:
bg-primary
To use a border color use the class:
border-primary
To use a text color use the class:
text-primary

Color variables

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.

primary-light
$color-primary-light
primary
$color-primary
primary-dark
$color-primary-dark
primary-fg
$color-primary-fg

Secondary color is used in places like secondary buttons (Cancel, Next, etc.), toolbar buttons apart from the primary use buttons.

secondary
$color-secondary

Danger color is used to highlight errors and failures

danger-lighter
$color-danger-lighter
danger-light
$color-danger-light
danger
$color-danger

Success colors are used to highlight success and completions

success-light
$color-success-light
success
$color-success

Warning colors are used to give informative warnings

warning-light
$color-warning-light
warning
$color-warning

Grays

Grays should be used for borders, negative/empty spaces, disabled texts only. They are generally used for framing the controls.

gray-lighter
$color-gray-lighter
gray-light
$color-gray-light
gray
$color-gray
gray-dark
$color-gray-dark
gray-darker
$color-gray-darker

Others

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.

bg-theme
$color-bg-theme
fg-theme
$color-fg-theme
border-color
$border-color

SQL editor

These are the color variables used by SQL editor

bg
$color-editor-bg
keyword
$color-editor-keyword
foldmarker
$color-editor-foldmarker
activeline
$color-editor-activeline