border-inline-start: 1px solid #0f66bd !important;

   border-inline-start: var(--my-splitter-color);

First of all I want to apologize for my lack of knowledge. I know almost nothing about HTML and CSS, but I've decided to start using some desktop e-mail client and since Thunderbird looks quite boring and I was bored too, I've tried to customize it. Now I've got a few questions. :) In this guide https://developer.thunderbird.net/add-ons/web-extension-themes is stated that for each variable, not only for our custom variables (--my-variable-one etc.) we should declare such variable in the style.css, then assign a key to it and then declare a value for that key. I've started preparing my theme this way, especially that I've mainly used special keys provided by TB developers in the Theme API, but I've discovered that declaring style directly in the css file also works. So should we always put values in json file or can we jus load css via json? I ask because I want to change the color of the left panel in the calendar view. To be honest, I still haven't checked if declaring three separate longhand properties would work, but I wanted to pass an array to get the #calsidebar_splitter, #listSplitter { border-inline-start: 1px solid #0f66bd !important; } So initially I've wrote in css: #calsidebar_splitter, #listSplitter { border-inline-start: var(--my-splitter-color); } and unfortunately writing something like that: "splitter_color": "--my-splitter-color" and "splitter_color": "[1px, solid, rgb(15, 102, 189)] doesn't work. :/