orblazer / discord-nordic

An full themed discord with Nord palette (https://www.nordtheme.com/)
https://betterdiscord.app/theme/Nordic
Other
75 stars 17 forks source link

Unify the sidebar & main panel background colors #21

Closed Bad3r closed 1 year ago

Bad3r commented 1 year ago

Thank you for bringing Nord to Discord.
I personally prefer when both the main panel and sidebar use the same dark Nord background color. This matches other ports of Nord to other tools.

Discord-nordicVSCode Nord theme

Logseq image Discord-nordic VSCode

orblazer commented 1 year ago

Hello, Thanks for the issue. I'm not sure if that look great to have discord in this style.

If you want i have make an Proof Of Concept (and not finished) of that variant of theme. Screenshot_20230213_175057

You can put bellow code inside custom CSS or in theme file.

:root {
    --background-primary: var(--nord-dark1);
    --background-secondary-alt: var(--nord-dark2);
    --background-tertiary: var(--nord-dark1);
    --background-message-hover: hsl(var(--primary-dark-500-hsl)/0.3);
    --channeltextarea-background: var(--background-secondary-alt);

    --scrollbar-thin-thumb: var(--primary-dark-500);
    --scrollbar-auto-thumb: var(--primary-dark-500);
    --scrollbar-auto-track: var(--primary-dark-700);
}

.scroller-3X7KbA,
.sidebar-1tnWFu,
.chatContent-3KubbW,
.sidebarRegion-1VBisG,
.sidebarRegionScroller-FXiQOh {
    border-right: 1px solid var(--background-secondary-alt);
}

.childWrapper-1j_1ub,
.circleIconButton-1VxDrg,
.accountProfileCard-lbN7n-,
.cardWrapper-1bSePP,
.cameraWrapper-nG8dpo,
.container-3EtAkD:not(:hover) .icon-2DGsye,
.backgroundContainer-gUNEZU,
.clickableContainer-3YtEIY,
.editCard-K9Q9mb,
.featureCard-3XHbjy,
.checklistHeader-3liG7E,
.header-Wl8ec-,
.enableContainer-H2cRts,
.welcomeChannel-_Q4qAA,
.descriptionInput-2-jF56,
.expandedFolderBackground-1kSAf6,
.wrapper-2SplAX,
.reaction-3vwAF2 {
    background-color: var(--background-secondary-alt);
}

.connection-YOVI9j,
.itemFilled-2Fo7lr,
.bd-addon-list .bd-addon-card,
.container-3EtAkD,
.tierBody-1d3UiS,
.container-AxP_J8,
.upsellContainer-2a5eMP,
.checklistContainer-12xGp5,
.container-13pE3E,
.previewContainer-29oeA6 {
    border: 1px solid var(--background-secondary-alt);
}

.embedFull-1HGV2S {
    background-color: var(--background-secondary-alt);
    border-left-color: var(--nord-dark4);
}

.notches-2w7UZJ.gray-3wP137 {
    color: var(--background-secondary) !important;   
}
.progress-1S-TDF {
    background-color: var(--primary-dark-500) !important;
}

.container-30qY7E {
    background-color: hsl(var(--primary-dark-500-hsl)/0.1) !important;
    border-color: var(--background-secondary-alt) !important;
}

.tierBody-1d3UiS,
.container-AxP_J8,
.previewContainer-29oeA6 {
    border-top: none;
}

.category-2OvQ93:hover,
.clickable-O5xo4T.container-2NdZr9:hover,
.folder-241Joy {
    background-color: var(--nord-dark3);
}

.fieldBackground-2TpuOY,
.container-AxP_J8 {
    background-color: var(--background-secondary);
}
Bad3r commented 1 year ago

Thank you. I appreciate you considering it! It comes to personal taste; I love how it looks in your screenshot. The way I describe it is that it looks 'cleaner' :sweat_smile: thank you for sharing the CSS.

-- Good to close

SolsticeSpectrum commented 1 year ago

@orblazer I don't know how I feel about this. Can you provide both versions? In my rice the previous version looks much better.

As you can see something just doesn't feel right in my eyes image

Here is the previous version for comparassion image

SolsticeSpectrum commented 1 year ago

Maybe if you would unify the background colors down here? image

Bad3r commented 1 year ago

@DarkReaper231 as @orblazer mentioned; this was just a quick test. Its incomplete; it should look off to you. 

here is the before and after:
Before
After

If you use vscodium/vscode or doom Emacs; or any other tool that has an official port of nord; you will notice that menus follow the same default background color.

Bad3r commented 1 year ago

nord is a theme that is meant to have the least amount of distractions. Having a bright two-tunes IMO goes against the ethos of Nord theme. But of course people have different tastes.

SolsticeSpectrum commented 1 year ago

I don't know, VS Code looks alright

orblazer commented 1 year ago

Maybe if you would unify the background colors down here? image

Hello @DarkReaper231, that look strange to have same background of the rest. And if you want the old version of the theme i recommend you to up vote the other issue (#22), i think i can make somethings to have both variants.