Style Guide

Colors

pgadmin4 follows naming convention similar to Bootstrap for color variables.

The current app may have more colors than what is included here. When a color is encountered in the app that is not documented here, default to replacing that color with one that is documented here.

Each color listed on this page can be used for Background, Text, and Border. Pre-pend each class name with .bg- or .text- or .border- to use as background or border.

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

These colors should be used in the SCSS files. The name of the colors suggests where to use the variable. The primary color should be used to call attention to the main part of the app. Use sparingly.

primary-lighter
$color-primary-lighter
primary-light
$color-primary-light
primary
$color-primary
primary-dark
$color-primary-dark
primary-darker
$color-primary-darker
danger-lighter
$color-danger-lighter
danger-light
$color-danger-light
danger
$color-danger
danger-dark
$color-danger-dark
danger-darker
$color-danger-darker
success-lighter
$color-success-lighter
success-light
$color-success-light
success
$color-success
success-dark
$color-success-dark
success-darker
$color-success-darker
warning-lighter
$color-warning-lighter
warning-light
$color-warning-light
warning
$color-warning
warning-dark
$color-warning-dark
warning-darker
$color-warning-darker

Grays

For text, avoid using black or #000 to lower the contrast between the background and text.

gray-white
$color-gray-white
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
$color-bg
bg-inverse
$color-bg-inverse
fg
$color-fg
fg-inverse
$color-fg-inverse

SQL editor

These are the color variables used by SQL editor

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