[Feature Request]: Custom CSS Usage

[mugenyume]

Feature Description

I am trying to use the Custom CSS feature to modify the background color but am encountering difficulties.
Despite trying multiple approaches, none have succeeded.
Clearer guidance or examples on implementing custom CSS changes would be helpful.

Use Case

As a user, I want to utilize the custom CSS feature to change the background color.

Alternatives Considered

Steps Taken

• I attempted to change the background color by adding the following CSS in the custom CSS editor:

  background-color: #000000 !important;
  background: #000000 !important;

• I also tried specifying classes directly, like this:

  .example-class {
      background-color: #000000 !important;
      background: #000000 !important;
  }

Observed Behavior

Neither of the above approaches resulted in the background color change I was expecting. It appears the custom CSS might not be applying correctly or is being overridden by existing styles.

Expected Behavior

I would like to understand how to effectively use the custom CSS feature, especially for changes like setting the background color, and if there are limitations or specific classes that should be used.

Feature Request

Could you provide more documentation, examples, or a guide on how to use the custom CSS option?
A list of elements or classes available for customization would also be beneficial.

[sickn33]

hey, with the help of sonnet i was able to change some aspects of the UI, but unfortunately it works only in light mode.
This css code changes some aspects of the UI, you can change the color of them just changing the # code.

/* Sfondo principale e testo */
body, .tw-bg-background, [class*="background"] {
    background-color: #F5F5E8 !important;
    color: #202020 !important;
    font-family: var(--ui-font) !important;
}

/* Header e barra di navigazione */
nav, header, .tw-bg-card, [class*="navbar"] {
    background-color: #CECEB0 !important;
    color: #202020 !important;
}

/* Box di input e textarea */
input, textarea, .tw-bg-secondary, [class*="input-box"], [contenteditable="true"] {
    background-color: #DDDDC0 !important;
    color: #202020 !important;
    border-color: #B1B09D !important;
}

/* Bottoni e elementi interattivi */
button, .button, [class*="btn"] {
    background-color: #B1B096 !important;
    color: #202020 !important;
    border-color: #B1B09D !important;
    border-radius: 8px !important;
}

/* Hover states */
button:hover, .button:hover, [class*="btn"]:hover {
    background-color: #BBBBA5 !important;
    opacity: 0.9 !important;
}

/* Links */
a, [class*="link"] {
    color: #202020 !important;
}

a:hover, [class*="link"]:hover {
    color: #B1B096 !important;
}

/* Elementi di codice */
pre, code {
    font-family: var(--mono-font) !important;
    background-color: #E3E2CE !important;
    color: #202020 !important;
}

/* Scrollbar personalizzata - solo per WebKit */
::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}

::-webkit-scrollbar-track {
    background: #F5F5E8 !important;
    border-radius: 10px !important;
}

::-webkit-scrollbar-thumb {
    background: #B1B096 !important;
    border-radius: 10px !important;
    border: 2px solid #F5F5E8 !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #BBBBA5 !important;
}

::-webkit-scrollbar-corner {
    background: #F5F5E8 !important;
}

/* Supporto Firefox */
* {
    scrollbar-width: thin !important;
    scrollbar-color: #B1B096 #F5F5E8 !important;
}

/* Input specifici senza padding */
input[type="text"],
input[type="search"],
textarea {
    background-color: var(--tw-background) !important;
    color: var(--tw-foreground) !important;
}