# Custom themes

## General

Since `JabRef 5.2` it is possible to use custom themes. In `Preferences > Appearance > Visual theme` the themes in general can be changed. Themes are just [CSS](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics) files defining the look of the UI.

* **Light Theme**: The default theme is the light theme ([`Base.css`](https://github.com/JabRef/jabref/blob/main/src/main/java/org/jabref/gui/Base.css)).
* **Dark Theme**: There is an alternative dark theme ([`Dark.css`](https://github.com/JabRef/jabref/blob/main/src/main/java/org/jabref/gui/Dark.css)) which is based on `Base.css` and just overwrites the colors.
* **Custom Theme**: In `Preferences > Appearance > Visual theme > Custom theme` there can be set a custom theme by simply selecting a custom CSS (based on `Base.css` or `Dark.css`), for instance:

You can find a collection of user contributed themes at [https://themes.jabref.org](https://themes.jabref.org/).

{% file src="<https://2944476579-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lr3JU9j9iSUW8RYz1hD-2910905616%2Fuploads%2Fgit-blob-7e45fb51d9ad4464caa649306afc7434344943ee%2Fdark-custom.css?alt=media>" %}

## Selection of Useful CSS selectors

| UI element                       | CSS selector       |
| -------------------------------- | ------------------ |
| preview box                      | `#previewBody`     |
| `{} biblatex source` tab         | `.code-area`       |
| text in `{} biblatex source` tab | `.code-area .text` |

## Examples

**Light Theme** ![Light Theme](https://2944476579-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lr3JU9j9iSUW8RYz1hD-2910905616%2Fuploads%2Fgit-blob-ffb8d62c8cb314726ccd981a5727552c447fe00d%2Ftheme-light.png?alt=media\&token=040caced-7ebb-46a8-91bd-925ca01df965)

**Dark Theme** ![Dark Theme](https://2944476579-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lr3JU9j9iSUW8RYz1hD-2910905616%2Fuploads%2Fgit-blob-d6802a10afca75c144f0142fe7496afea8aab655%2Ftheme-dark.png?alt=media\&token=c92d2418-5a13-4539-8c18-f7e2a997671b)

**Custom Theme** ![Custom Theme](https://2944476579-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lr3JU9j9iSUW8RYz1hD-2910905616%2Fuploads%2Fgit-blob-a0758839249cb6693f949eaecb54d8bbc4c3ba0d%2Ftheme-custom.png?alt=media\&token=d3a10716-f83d-4e3a-a3a6-a1ce940f24f3) (based on the Dark Theme)

## Known bugs

* [#8523](https://github.com/JabRef/jabref/issues/8523): On Windows 10, it is not possible to use fonts that were installed user-wide in the CSS, only system-wide fonts are working. A workaround to use fonts that are not installed system-wide is to include the font file via [`@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face).