# How to make themes

**URL:** <https://discourse.jabref.org/t/how-to-make-themes/3932>\
**Category:** Help\
**Created:** [August 15, 2023, 4:10am UTC](https://discourse.jabref.org/t/how-to-make-themes/3932 "2023-08-15T04:10:53Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![thedino-girl](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.jabref.org/thedino-girl/32/1658_2.png) [@thedino-girl](https://discourse.jabref.org/u/thedino-girl)\
**Post date:** [August 15, 2023, 4:10am UTC](https://discourse.jabref.org/t/how-to-make-themes/3932/1 "2023-08-15T04:10:53Z")

</div>

Hi

There is a light and dark theme in jabref.  
Can somebody explain how to make my own themes or edit those 2?

So I want to know:

- where are the files
- what to edit
- how to use the file in jabref when I edited it
- can I download somewhere other themes ready for jabref

In version 5.10 the dark theme has white text compared to the dark theme in 5.9, which has grey text.  
Why is that?

---

<div class="post-metadata">

**Author:** ![Siedlerchr](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.jabref.org/siedlerchr/32/216_2.png) [@Siedlerchr](https://discourse.jabref.org/u/Siedlerchr)\
**Post date:** [August 15, 2023, 11:09am UTC](https://discourse.jabref.org/t/how-to-make-themes/3932/2 "2023-08-15T11:09:08Z")

</div>

Hi  
you find all the infos here: [Custom themes - JabRef](https://docs.jabref.org/advanced/custom-themes)  
They are basically just CSS files. In the top of the files there are the colors defined.

Regarding the font color: @HoussemNasri had some infos on this.

---

<div class="post-metadata">

**Author:** ![thedino-girl](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.jabref.org/thedino-girl/32/1658_2.png) [@thedino-girl](https://discourse.jabref.org/u/thedino-girl)\
**Post date:** [August 15, 2023, 5:09pm UTC](https://discourse.jabref.org/t/how-to-make-themes/3932/3 "2023-08-15T17:09:51Z")

</div>

> [@Siedlerchr](#):
>
> Regarding the font color: @HoussemNasri had some infos on this.

what do you mean by that?

---

<div class="post-metadata">

**Author:** ![thedino-girl](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.jabref.org/thedino-girl/32/1658_2.png) [@thedino-girl](https://discourse.jabref.org/u/thedino-girl)\
**Post date:** [August 15, 2023, 5:17pm UTC](https://discourse.jabref.org/t/how-to-make-themes/3932/4 "2023-08-15T17:17:13Z")

</div>

- Where are the light and dark theme included with JabRef stored on windows?

- Is this feature officially in JabRef now?  
[https://github.com/JabRef/jabref/pull/7336](https://github.com/JabRef/jabref/pull/7336)

---

<div class="post-metadata">

**Author:** ![HoussemNasri](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.jabref.org/houssemnasri/32/1399_2.png) [@HoussemNasri](https://discourse.jabref.org/u/HoussemNasri)\
**Post date:** [August 15, 2023, 6:36pm UTC](https://discourse.jabref.org/t/how-to-make-themes/3932/5 "2023-08-15T18:36:40Z")

</div>

Hi @thedino-girl, to undo the new lighter color of texts, you can

1. Download [Dark.css](https://github.com/JabRef/jabref/blob/main/src/main/java/org/jabref/gui/Dark.css)
2. Open Dark.css in a text editor and set `-fx-light-text-color` to `#9aa3af`
3. Finally, load the edited css file into JabRef as a custom theme

---

<div class="post-metadata">

**Author:** ![thedino-girl](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.jabref.org/thedino-girl/32/1658_2.png) [@thedino-girl](https://discourse.jabref.org/u/thedino-girl)\
**Post date:** [August 17, 2023, 2:04am UTC](https://discourse.jabref.org/t/how-to-make-themes/3932/7 "2023-08-17T02:04:09Z")

</div>

@HoussemNasri  
Can you make a screenshot of jabref soo I can see what colors are what variables?

---

<div class="post-metadata">

**Author:** ![thedino-girl](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.jabref.org/thedino-girl/32/1658_2.png) [@thedino-girl](https://discourse.jabref.org/u/thedino-girl)\
**Post date:** [August 17, 2023, 4:47pm UTC](https://discourse.jabref.org/t/how-to-make-themes/3932/8 "2023-08-17T16:47:19Z")

</div>

About the Dark.css file: there is this variables

-jr-hover: #fff1;  
-jr-icon-background-armed: #fff2;

But is #fff1 and #fff2 really correct since a color needs to have 3 groups of 2 digits for R, G and B: [HTML HEX Colors](https://www.w3schools.com/html/html_colors_hex.asp)  
The 2 values here have only 4 digits so how can they work?

---

<div class="post-metadata">

**Author:** ![Siedlerchr](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.jabref.org/siedlerchr/32/216_2.png) [@Siedlerchr](https://discourse.jabref.org/u/Siedlerchr)\
**Post date:** [August 17, 2023, 5:45pm UTC](https://discourse.jabref.org/t/how-to-make-themes/3932/9 "2023-08-17T17:45:04Z")

</div>

Hi,

I guess it’s one of those shortcuts formats [CSS 4 Digit Hex Colors](https://www.quackit.com/css/color/values/css_hex_color_notation_4_digits.cfm)

---

<div class="post-metadata">

**Author:** ![HoussemNasri](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.jabref.org/houssemnasri/32/1399_2.png) [@HoussemNasri](https://discourse.jabref.org/u/HoussemNasri)\
**Post date:** [August 17, 2023, 8:23pm UTC](https://discourse.jabref.org/t/how-to-make-themes/3932/10 "2023-08-17T20:23:53Z")

</div>

> Can you make a screenshot of jabref soo I can see what colors are what variables?

I agree this would be really useful and will help users create custom themes faster. But unfortunately, I can’t commit time to this task right now, especially, since I don’t know the function of the colors off the top of my head.

Most of the components are styled with a set of base colors or with some derivation of those (such as darker or lighter shades). Once you’re familiar with the component names, navigating through the CSS styles should be straightforward. You can refer to this resource to learn about the names of UI components in JavaFX: [JavaFX UI Component Names Reference](https://jenkov.com/tutorials/javafx/tabpane.html). Also, I recommend having a look at the CSS reference of JavaFX: [https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html](https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html)