# 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://content.gitbook.com/content/281Mg52F3z2V4SGGMiwL/blobs/XQJmbqWMY7943PcoTUsp/dark-custom%20(2)%20(1).css>" %}

## 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://content.gitbook.com/content/281Mg52F3z2V4SGGMiwL/blobs/YD6B1TUDOn5hNgEKsmYc/theme-light.png)

**Dark Theme** ![Dark Theme](https://content.gitbook.com/content/281Mg52F3z2V4SGGMiwL/blobs/WSUp35DGlYl9Vyak6J2U/theme-dark.png)

**Custom Theme** ![Custom Theme](https://content.gitbook.com/content/281Mg52F3z2V4SGGMiwL/blobs/p1yrSVhef3PLMLa6pvdw/theme-custom.png) (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).