# 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).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.jabref.org/advanced/custom-themes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.