Closed Bad3r closed 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.
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);
}
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
@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
Here is the previous version for comparassion
Maybe if you would unify the background colors down here?
@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.
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.
I don't know, VS Code looks alright
Maybe if you would unify the background colors down here?
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.
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.
Logseq Discord-nordic VSCode