Plutonium

So I know a little bit of css and I did not like the dark theme provided by the developers so I've made my own

I'm sharing it here for people that actually browse the forum and like ui

here is a preview of the theme:

if you are going to use the theme make sure you have dark mode enabled on the website

also here is the code for it

:root {
    --c-black: #0b0d10;
    --c-black-soft: #111418;
    --c-surface-1: #161a20;
    --c-surface-2: #1d222a;
    --c-border-soft: #242a33;
    --c-border-strong: #313845;
    --c-text-main: #e6e9ef;
    --c-text-muted: #aab0bb;
    --c-primary-muted: #4a4f58;
    --c-pink: #ff8df7;
    --c-pink-soft: rgba(255, 141, 247, 0.45);
    --c-magenta: #ffb3ff;
    --c-magenta-soft: rgba(255, 65, 255, 0.45);
    --c-red: #ff5c5c;
    --c-red-soft: rgba(120, 0, 0, 0.45);
    --c-yellow: #f0e94a;
    --c-yellow-soft: rgba(140, 140, 0, 0.45);
    --scrollbar-bg: #0000;
    --scrollbar-thumb: #888;
    --scrollbar-thumb-hover: #555;
}

[data-theme="dark"] {
    --bs-body-bg: var(--c-black) !important;
    --bs-body-bg-rgb: 11, 13, 16 !important;
    --bs-body-color: var(--c-text-main) !important;
    --bs-body-color-rgb: 230, 233, 239 !important;
    --bs-nav-link-color: var(--c-text-main) !important;
    --bs-border-color: var(--c-border-soft) !important;
    --bs-light-rgb: 22, 26, 32 !important;
}

[data-theme="dark"] .skin-noskin nav.sidebar {
    background-color: var(--c-black) !important;
}

[data-theme="dark"] .card {
    background-color: var(--c-surface-2) !important;
    border: 1px solid var(--c-border-strong) !important;
}

div[component="account/cover"] {
    background-image: none !important;
    background-color: var(--c-black) !important;
}

a[component="account/follow"] {
    background-color: var(--c-surface-2) !important;
    border: 1px solid var(--c-border-strong) !important;
    color: var(--c-text-main) !important;
}

.bg-primary {
    background-color: var(--c-primary-muted) !important;
}

.avatar.avatar-rounded {
    border-radius: 10% !important;
}

.rounded-circle {
    border: none !important;
}

a.badge[href^="/groups/"] {
    max-width: 150px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    border: 1px solid currentColor !important;
}

a[href="/groups/contributor"].badge {
    background: var(--c-magenta-soft) !important;
    color: var(--c-magenta) !important;
}

a[href="/groups/vip"].badge {
    background: var(--c-pink-soft) !important;
    color: var(--c-pink) !important;
}

a[href="/groups/administrators"].badge {
    background: var(--c-red-soft) !important;
    color: var(--c-red) !important;
}

a[href="/groups/global-moderators"].badge {
    background: var(--c-yellow-soft) !important;
    color: var(--c-yellow) !important;
}

::-webkit-scrollbar {
    width: 2px !important;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-bg) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover) !important;
}

I don't know if its against the rules or not to show you how to actually use it but just look up a custom css browser extension