custom website theme

messiah

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

G0LD3N 4RM

So like what Discord recently did with the darker dark. Very cool, I'll try it out.

G0LD3N 4RM

I just applied it, definitely easier on the eyes🥳. But a question; Is it possible if the inline box background could be charcoal black, like this layout, with the text being white? That'll improve the site's dark mode even more

Honestly I do still like this view either way:

Draft btw is this post.

messiah

G0LD3N 4RM I've edited the code there you go

messiah

nevermind i have to wait an hour here

: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;
    --hljs-bg: #242a33;
    --hljs-text: #e6e9ef;
    --hljs-comment: #6c7080;
    --hljs-punctuation: #e6e9ef80;
    --hljs-tag: #e6e9ef80;
    --hljs-keyword: #ff8df7;
    --hljs-attr: #e6e9ef;
    --hljs-name: #ffb3ff;
    --hljs-number: #f0e94a;
    --hljs-string: #97f5ff;
    --hljs-literal: #4af0f0;
    --hljs-built_in: #ff8df7;
    --hljs-link: #ff5c5c;
    --hljs-meta: #aab0bb;
    --hljs-section: #ffb3ff;
    --hljs-title: #ffb3ff;
}

[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;
}

.scroller-content{
    background-color: #0b0d10 !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;
}


pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em;
    background: var(--hljs-bg);
    color: var(--hljs-text);
}

code.hljs {
    padding: 3px 5px;
    background: var(--hljs-bg);
    color: var(--hljs-text);
}

.hljs-comment { color: var(--hljs-comment); }
.hljs-punctuation, .hljs-tag { color: var(--hljs-punctuation); }
.hljs-tag .hljs-attr, .hljs-tag .hljs-name { color: var(--hljs-attr); }
.hljs-attribute, .hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-name, .hljs-selector-tag { font-weight: 700; color: var(--hljs-keyword); }
.hljs-deletion, .hljs-number, .hljs-quote, .hljs-selector-class, .hljs-selector-id, .hljs-string, .hljs-template-tag, .hljs-type { color: var(--hljs-string); }
.hljs-section, .hljs-title { color: var(--hljs-title); font-weight: 700; }
.hljs-link, .hljs-operator, .hljs-regexp, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-symbol, .hljs-template-variable, .hljs-variable { color: var(--hljs-link); }
.hljs-literal { color: var(--hljs-literal); }
.hljs-addition, .hljs-built_in, .hljs-bullet, .hljs-code { color: var(--hljs-built_in); }
.hljs-meta { color: var(--hljs-meta); }
.hljs-meta .hljs-string { color: var(--hljs-string); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

G0LD3N 4RM

messiah

No prob

Plutonium

custom website theme