Diagram and Documentation Styles

DbSchema lets you change how the diagram looks: its theme, the color of each table, and its fonts and colors through CSS. Some of these changes reach the HTML5 documentation as well.

None of these changes touches the database.

Choose a theme

A theme sets the colors of the whole DbSchema window, the diagram included.

1. Choose View → Appearance → Theme.
2. Click a theme: Classic, Architect, Caspian, Moonlight or Dark.
3. Press Apply & Close.

The theme belongs to your DbSchema installation, not to the model. A colleague who opens your model sees it in their own theme.

Color a table

A table color groups related tables at a glance, such as all the order tables in orange.

1. Right-click the table header on the diagram.
2. Choose Change Color.
3. Press Color and pick the color.
4. Tick In All Diagrams to use the color on every diagram that shows the table.
5. Press OK.

DbSchema saves the color in the model file. The HTML5 documentation and the PDF use it for the table header, with the brightness of their own light or dark style.

Change fonts and colors with custom CSS

DbSchema draws its windows and the diagram with CSS, the same style language as web pages. Your own CSS rules load after the theme, so they override it, and they stay when you update DbSchema.

1. Choose View → Appearance → Theme.
2. Press Edit Custom CSS.
3. Type your rules. The dialog starts with commented examples that you can copy.
4. Press Save & Apply.

This rule sets bigger table names and a green table body:

/* Bigger table names and a green table body on the diagram */
.diagram, .diagram > .viewport {
    font: 14px 'System';
    table-header-font: bold 16px 'System';
    table-background: #12291f;
    table-header-foreground: #ffd479;
}

If the diagram keeps its old look after Save & Apply, click an empty spot on the diagram to redraw it.

DbSchema saves the rules in custom.css, in the config/appearance folder of your DbSchema settings folder, which is .DbSchema in your home folder. To go back to the theme, delete the rules and press Save & Apply.

What reaches the HTML5 documentation

The HTML5 documentation and the PDF have their own light style, or a dark one with Dark Theme.

• The fonts of the diagram, set by font, table-header-font and callout-font, carry into the documentation's diagram image.
• The colors set in CSS stay in DbSchema. The documentation keeps its own colors.
• The table colors from Color a table carry into the documentation.

Find the property to change

Each theme is a set of CSS files in the config/appearance folder of the DbSchema installation. Open them to copy a value. Do not edit them: an update replaces them.

The rules use three blocks:

• .root: the windows, dialogs and menus. Values that start with -fx- are JavaFX's own, and values that start with -var- are DbSchema's.
• .diagram, .diagram > .viewport: the diagram. Write both selectors, as the Moonlight theme does.
• .code-editor: the SQL editor.

A value can be a color such as #12291f, or a variable such as -var-diagram.

Diagram properties

Where a table or a group has its own color, the header, the border and the group properties keep that color's hue. They take only the brightness and the saturation from the CSS value. table-background applies as it is, whatever the table color.

SQL editor properties

Common problems

How do I change the look of tables?

Use a theme for the whole look, Change Color for single tables, and custom CSS for fonts and exact colors. Each is a section above.

My CSS has no effect

Check the selector: diagram properties belong in .diagram, .diagram > .viewport, not in .root. Then click the diagram to redraw it.

Next steps

• Generate HTML5 documentation
• Arrange tables on diagrams
• Change other settings