# CSS Themes

The extension has two modes: `light` and `dark`, which you can customize separately. Most elements can be styled through just a few CSS variables.

{% hint style="info" %}
If you're using a third-party theme, consider reaching out to the developer and asking them if they could support zoteroRoam directly in their theme.
{% endhint %}

## Basic styling

You'll most likely want to start by customizing the extension's base accents ; by default, they use a similar color scheme as the Blueprint library does (which is natively used by Roam).

The corresponding CSS variables are : 

* `--zr-accent-1-hsl` (default = a shade of blue)
* `--zr-accent-2-hsl` (default = a shade of orange)

As their name indicates, these variables should contain HSL color values. Other formats will not work. There are many online tools [such as this one](https://fffuel.co/cccolor/) where you can explore the color wheel and find the matching HSL parameters.

#### Example for light mode

```css
:root {
    --zr-accent-1-hsl: 164,58%,47%; /* a shade of green */
    --zr-accent-2-hsl: 315,77%,66%; /* a shade of pink */
}
```

#### Example for dark mode

```css
[zr-dark-theme="true"] {
    --zr-accent-1-hsl: 162, 100%, 62%; /* a shade of green */
    --zr-accent-2-hsl: 44, 70%, 51%; /* a shade of yellow */
}
```

## Light Mode

Here are the variables and default values the extension uses for light mode:

```css
:root {
    --zr-accent-1-hsl: 223, 100%, 44%;
    --zr-accent-2-hsl: 18, 63%, 39%;
    --zr-negative-hsl: 0, 92%, 41%;
    --zr-positive-hsl: 155, 58%, 27%;
    --zr-accent-1: hsla(var(--zr-accent-1-hsl), 100%);
    --zr-accent-2: hsla(var(--zr-accent-2-hsl), 100%);
    --zr-negative-co: hsla(var(--zr-negative-hsl), 100%);
    --zr-positive-co: hsla(var(--zr-positive-hsl), 100%);
    --zr-auxiliary: #5c7080;
    --zr-border-co: #ececec;
    --zr-box-bg: #f8f8f8;
    --zr-box-shadow-co: #d7dced4d;
    --zr-dialog-bg: #ffffff;
    --zr-input-size: 240px;
    --zr-minimal-bg: #cad1df26;
    --zr-negative-bg: #fff1f2;
    --zr-positive-bg: #45d29826;
    --zr-secondary-co: #696969;
    --zr-secondary-fw: 300;
    --zr-shortcut-co: inherit;
    --zr-text-co: inherit;
    --zr-text-small: 0.85rem;
}
```

## Dark Mode (default)

Here are the default values that are overriden when using dark mode:

```css
[zr-dark-theme="true"] {
    --zr-accent-1-hsl: 202, 100%, 62%;
    --zr-accent-2-hsl: 30, 70%, 51%;
    --zr-negative-hsl: 0, 85%, 69%;
    --zr-positive-hsl: 120, 86%, 75%;
    --zr-accent-1: hsla(var(--zr-accent-1-hsl), 100%);
    --zr-accent-2: hsla(var(--zr-accent-2-hsl), 100%);
    --zr-negative-co: hsla(var(--zr-negative-hsl), 100%);
    --zr-positive-co: hsla(var(--zr-positive-hsl), 100%);
    --zr-auxiliary: #95a8b7;
    --zr-border-co: #2f3133;
    --zr-box-bg: #191919;
    --zr-box-shadow-co: #0b0b0c4d;
    --zr-dialog-bg: #1f1f1f;
    --zr-negative-bg: #332828;
    --zr-positive-bg: #5863582e;
    --zr-secondary-co: #8ba4bd;
    --zr-secondary-fw: 400;
    --zr-shortcut-co: #9b9b9b;
    --zr-text-co: #76a0cb;
}
```

## Extra

If you'd like to add some visual elements to the extension's interface, you can use CSS to show emojis for certain types of items:

```css
[data-item-type="journalArticle"]::before {
  content: '📄 ';
}

[data-item-type="book"]::before {
  content: '📙 ';
}

[data-item-type="thesis"]::before {
  content: '🎓 ';
}

[data-item-type="conferencePaper"]::before {
  content: '🎙️ ';
}

/* And so on! */
```

This will take effect in the Search Panel, the Autocomplete feature, and other places.