Hello, I like this dark theme and applied it for my Seafile v12.0.7. However I noticed a tiny glitch i.e. the background highlight is white hence the text is barely visible. Can you advise how to fix this? I'm a noob in CSS ;)

Hello, I like this dark theme and applied it for my Seafile v12.0.7. However I noticed a tiny glitch i.e. the background highlight is white hence the text is barely visible. Can you advise how to fix this? I'm a noob in CSS ;)

I forgot to theme those buttons, it should be fixed now. Just paste this gist's css again

@000yesnt It's PERFECT now. Thank you so much!!

@000yesnt sorry have to bother you again lol. This time the selections in Trash is not themed correcly (refer screenshot below)

Trash selection
https://pic.tempshr.com/i/da59f13d-c8fe-4019-ac7b-3a4383c7151d.jpg

P.S.
Also I think you don't use Seafile Wiki (or SeaDoc) hence it's not themed as well. Anyway I don't use Wiki so I'm not bothered with this ;)
https://pic.tempshr.com/i/72b5a5c0-f78c-467b-8b86-d76386380dd0.jpg

Thank you once again.

This time the selections in Trash is not themed correcly (refer screenshot below)

Trash selection https://pic.tempshr.com/i/da59f13d-c8fe-4019-ac7b-3a4383c7151d.jpg

Didn't catch that. Fixed it. I wish Seafile used variables for their theme's colors so I wouldn't have to keep hunting for unthemed buttons :(

P.S. Also I think you don't use Seafile Wiki (or SeaDoc) hence it's not themed as well. Anyway I don't use Wiki so I'm not bothered with this ;) https://pic.tempshr.com/i/72b5a5c0-f78c-467b-8b86-d76386380dd0.jpg

Yes, I don't use SeaDoc/Seafile Wiki. If someone forks this gist and adds support for it I'll merge it here.

Here are a couple of additional CSS items to fix the default white background when the sidebar is collapsed.

.side-panel .side-nav-folded,
.side-panel .side-nav-folded .side-nav-con {
  background-color: var(--main-bg) !important;
}
.side-nav-folded #files-sub-nav {
  background-color: var(--border) !important;
}

I am running v12.0.14 and everything looks great here except the user list in the share screen. It needs the font changed to black or the background of the dropdown changed to black. I know nothing about CSS so I have no idea how to update this.

EDIT:
I worked with ChatGPT and my limited understanding of CSS and got some code to fix the pieces that weren't working. (I definitely understand it far better than before LOL)

Fixes / Improvements:
1.) Side Navigation – Dark background, readable text, subtle hover/active highlights.
2.) React-Select – Dark menus, options, multi-values, hover/focus styling, readable typed text.
3.) User Search Box – Fixed input text to be light (#f0f0f0) for readability.
4.) Group-Select Dropdown – Dark background, removed borders, consistent box-shadow on focus.
5.) Group Search (Dropdown) – Dark background, light placeholder, results styled with hover effects.
6.) Avatars – Dark background for consistency with theme.

Examples:
BEFORE:

Side Navgation Folded:

Share User Search:

Share Group Search:

Corner Avatar:

AFTER:

Side Navigation Folded:

Share User Search:

Share Group Search:

Corner Avatar:

/* ================================
   Dark Theme Overrides for Seafile 12.x
   Covers: Side Nav, React-Select, Group-Select dropdowns, Group Search, Avatars
   ================================ */

/* === Side Navigation === */
.side-nav-con,
.side-nav-con .nav.nav-pills {
    background-color: #101010 !important;
}

.side-nav-con .nav-link {
    background-color: #101010 !important;
    color: #f0f0f0;
}

.side-nav-con .nav-link:hover,
.side-nav-con .nav-link.active {
    background-color: #1a1a1a !important;
}

#files-sub-nav {
    background-color: #101010 !important;
    color: #f0f0f0;
    border-color: #333;
}

#files-sub-nav .nav-link:hover {
    background-color: #1a1a1a !important;
}

/* === React-Select === */
/* Menu and options */
div[class*="css-"][class*="-menu"],
div[class*="css-"][class*="-menu-list"] {
    background-color: #2b2b2b !important;
    color: #f0f0f0 !important;
    border: none !important;
}

div[class*="css-"][class*="-option"] {
    background-color: #2b2b2b !important;
    color: #f0f0f0 !important;
}
div[class*="css-"][class*="-option"]:hover,
div[class*="css-"][class*="-option"][aria-selected="true"],
div[class*="css-"][class*="-option"][class*="--is-focused"] {
    background-color: #444 !important;
    color: #fff !important;
}

/* Multi-value selected tags */
div[class*="css-"][class*="-multiValue"] {
    background-color: #3a3a3a !important;
    color: #f0f0f0 !important;
    border-radius: 4px;
    padding: 0 2px;
}
div[class*="css-"][class*="-multiValue__label"] { color: #f0f0f0 !important; }
div[class*="css-"][class*="-multiValue__remove"] { color: #ccc !important; }
div[class*="css-"][class*="-multiValue__remove"]:hover {
    background-color: #ff5555 !important;
    color: #fff !important;
}

/* Control box */
div[class*="css-"][class*="-control"] {
    background-color: #1e1e1e !important;
    color: #f0f0f0 !important;
    border: 1px solid #444 !important;
}

/* Placeholder and general input text */
div[class*="css-"][class*="-placeholder"],
div[class*="css-"][class*="-input"] input {
    color: #aaa !important;
    background-color: transparent !important;
}

/* True container overrides */
.true__value-container { background-color: #222; }
.true__multi-value__label .user-option-name { color: #eee; }
.true__multi-value__label .user-option-email { color: #ccc; }
.true__input-container input { color: #eee; background-color: transparent; } /* general input */
.true__control:focus-within { border-color: #666; }

/* === User search box typed text (lighter font) === */
.user-select.reviewer-select .true__input-container input {
    color: #f0f0f0 !important; /* ensures typed text is light */
    background-color: transparent !important;
}

/* === Group-Select Dropdown === */
.group-select.custom-select,
.group-select.custom-select .selected-option {
    background-color: #2b2b2b; /* darker consistent background */
    color: #f0f0f0;
    border: none; /* remove border */
    border-radius: 4px;
}

/* Open and focus states */
.group-select.custom-select.open,
.group-select.custom-select.focus,
.group-select.custom-select:focus {
    background-color: #2b2b2b;
    box-shadow: rgba(70, 127, 207, 0.25) 0px 0px 0px 2px; /* subtle focus glow */
}

/* Dropdown options */
.group-select.custom-select .option {
    background-color: #2b2b2b;
    color: #f0f0f0;
    padding: 6px 10px;
}
.group-select.custom-select .option:hover,
.group-select.custom-select .option.active {
    background-color: #444;
    color: #fff;
}

/* === Group Search inside Dropdown === */
.option-group,
.option-group-search {
    background-color: #101010;
    color: #f0f0f0;
    border: 1px solid #444; /* standard input border */
    border-radius: 4px;
    padding: 0 !important;
    box-shadow: none;
    transition: box-shadow 0.2s ease;
}

.option-group-search .option-search-control {
    background-color: #2a2a2a;
    color: #ddd;
    border: none;
}
.option-group-search .option-search-control::placeholder {
    color: #888; /* placeholder text for group search */
}

/* Dropdown content and results */
.option-group-content {
    background-color: #101010;
    color: #ddd;
    border: 1px solid #333;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
}
.option-group-content .none-search-result {
    color: #888;
    padding: 8px;
    font-style: italic;
}
.option-group-content .option-item,
.option-group .option-item {
    padding: 8px;
    cursor: pointer;
}
.option-group-content .option-item:hover,
.option-group .option-item:hover {
    background-color: #1a1a1a;
    color: #fff;
}

/* === Avatars === */
.avatar {
    background-color: #101010;
    border-radius: 50%;
}

/* Nav pills active state */
.lib-setting-nav .nav-pills .nav-item .nav-link.active {
  background: transparent !important;
  color: inherit !important;
  position: relative !important;
}

I am running v12.0.14 and everything looks great here except the user list in the share screen. It needs the font changed to black or the background of the dropdown changed to black. I know nothing about CSS so I have no idea how to update this

I forgot to comment about this earlier, but I won't maintain this CSS anymore as I've moved away from Seafile and am too occupied with other stuff to set it up again just for theming. Maybe someone could comment a fix or fork this gist like I did for the original base theme