The colors above are from the official site custom theme. View this page with the default theme to see the colors that are used by default.

Customization and theming

SQLPage is designed to be easily customizable and themable. You cannot pass arbitrary color codes to components from your SQL queries, but you can customize which exact color is associated to each color name.

Creating a custom theme

To create a custom theme, you can create a CSS file and use the shell component to include it.

index.sql

select 'shell' as component, 'custom_theme.css' as css, 'custom_theme' as theme;

custom_theme.css

:root,
.layout-boxed[data-bs-theme="custom_theme"] {
  color-scheme: light;

  /* Base text colors */
  --tblr-body-color: #cfd5e6;
  --tblr-text-secondary-rgb: 204, 209, 217;
  --tblr-secondary-color: #cccccc;
  --tblr-muted-color: rgba(191, 191, 191, 0.8);

  /* Background colors */
  --tblr-body-bg: #0f1426;
  --tblr-bg-surface: #111629;
  --tblr-bg-surface-secondary: #151a2e;
  --tblr-bg-surface-tertiary: #191f33;

  /* Primary and secondary colors */
  --tblr-primary-rgb: 95, 132, 169;
  --tblr-primary: rgb(var(--tblr-primary-rgb));
  --tblr-secondary-rgb: 235, 232, 255;
  --tblr-secondary: rgb(var(--tblr-secondary-rgb));

  /* Border colors */
  --tblr-border-color: #151926;
  --tblr-border-color-translucent: #404d73b3;

  /* Theme colors. All sqlpage colors can be customized in the same way. */
  --tblr-blue-rgb: 84, 151, 213; /* To convert between #RRGGBB color codes to decimal RGB values, you can use https://www.rapidtables.com/web/color/RGB_Color.html */
  --tblr-blue: rgb(var(--tblr-blue-rgb));

  --tblr-red-rgb: 229, 62, 62;
  --tblr-red: rgb(var(--tblr-red-rgb));

  --tblr-green-rgb: 72, 187, 120;
  --tblr-green: rgb(var(--tblr-green-rgb));
}