Minor issues with CSS themes

[Anomalocaridid]

Aknowledgements

• I have checked that there's no other issue describing the same or
  similar problem that I currently have, regardless if it has been
  closed or open.

• I can confirm that this is not an issue with the Discord website,
  but it is a problem specific to the WebCord itself. I have tested
  if this bug occurs on Chromium/Chrome or any other Chromium-based
  browser that uses unpatched/upstream Chromium engine.

• I have tried running the build from the master branch and it does
  not have any fixes implemented according to my issue.

• My issue describes one of the unstable and/or not fully implemented
  features.

• I have found a workaround to mitigate or temporarily fix this issue
  in affected releases (please write it in Additional context section
  below).

Operating System / Platform

🐧️ Linux

Operating system architecture

x64 (64-bit Intel/AMD)

Electron version

20.0.3

Application version

v3.9.1

Bug description

When I try to use a certain CSS theme, a few elements are not styled properly. These include:

• "Direct Messages" button (especially when it is moused over)
• "Add a Server" button
• "Explore Public Servers" button

To reproduce:

1. Download the non-transparent Discord CSS theme from https://github.com/Roboron3042/Cyberpunk-Neon/tree/master/CSS/discord
2. Use webcord --add-css-theme to add the theme
3. Open Webcord normally and some elements will not be styled properly.
4. You can see how it should look by using the theme with BetterDiscord or with Stylus on the Discord website. There is also an image on the linked Github repo showing how it should look.

Additional context

I use the Sway version of EndeavourOS and I installed Webcord using the webcord-bin AUR package, which uses Webcord's Github release binaries. This issues also affects the webcord AUR package. I was unable to install the webcord-git AUR package because there appears to be some issue with dependency resolution.

Screenshot of Webcord using the theme:

Screenshot of BetterDiscord using the same theme:

[SpacingBat3]

The problem is, WebCord's injection method is quite uncommon and the way injected CSS is prioritized makes it far from being loaded ideally as in case of BD or Stylus. As WebCord does not mess up with HTML structure (i.e. no <style> nor <link> tags are injected), styles are differently rendered. While WebCord does some effort to fix it (with !important keyword and by resolving @import), there's no guarantees this will make all themes compatible with it.

I might take a look at this theme, but please take a note I'm aware messing around my code could potentially break another themes, as !important might overwrite the behavior of some properties which would have worked just fine without it (so using that to all propreties is somewhat risky – at best, it's theme maintainer who's responsible for the theme compatibility with WebCord as not all is so easy to be fixed automatically). This is why I might not fix the current theme. It should be also said CSP also gives a huge role in blocking some stuff from being loaded, which is why I plan to male the themes to be able to patch it if they need to do so.

[SpacingBat3]

@Anomalocaridid Actually I think something's wrong with the theme itself. Take a look at this part of the code at base.css:

base.css (line 19-34)

/* 0. Colorscheme */
html {
    --background: #000b1e;
    --background-text: #091833;
    --button: #133e7c;
    --button-alt: #0b2956;
    --button-alt-svg: invert(15%) sepia(81%) saturate(952%) hue-rotate(186deg) brightness(88%) contrast(102%);
    --text: #0abdc6;
    --text-svg: invert(50%) sepia(85%) saturate(1552%) hue-rotate(144deg) brightness(101%) contrast(92%); 
    --text-alt: rgba(10, 189, 198, .6);
    --accent: #ea00d9;
    --accent-svg: invert(17%) sepia(98%) saturate(7408%) hue-rotate(299deg) brightness(106%) contrast(108%);
    --select: #711c91;
    --select-alt: #321959;
    --green: #00ff00;
}

I believe :root is the right selector in which CSS vars should be set. This is [I suppose] why Chromium itself will just remove these properties once they're injected (I guess it finds them non-standard; not sure why they aren't injected, but I guess Chromium has a reason to do so). Changing html selector to :root is what fixed the issue for me.

If you need a working theme, here's a patched CSS theme you could load into WebCord until the actual maintainer will fix that on their end:

discord-cyberpunk-neon-transparent.theme.css

//META{"name":"Discord Cyberpunk Neon Transparent","description":"An outrun/cyberpunk theme, based on Cyberpunk Neon color scheme","author":"Roboron","version":"1.1"}*//

@import url("https://roboron3042.github.io/Cyberpunk-Neon/CSS/discord/base.css");

/* 
	Cyberpunk Neon color scheme is a cyberpunk/outrun color scheme based on the Cyberpunk Neon Color Palette.
	Autor: Roberto Michán Sánchez (Roboron)
	Upstream URL / Report issues: https://github.com/Roboron3042/Cyberpunk-Neon
	License: CC-BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0/
*/

/* CUSTOM BACKGROUND
    To change the background replace the URL in background-image in .appMount-3lHmkl with your prefered one 
    
	IMPORTANT: Some hosting sites may not work, so we recommend imgur to upload your desired image.
*/

.appMount-2yBXZl {
    background-image: url(https://media.discordapp.net/attachments/860621068250775582/949396525203722320/jshwEyA.png) !important;
    background-color: rgba(9, 24, 51, 0) !important;
    background-repeat: no-repeat;
    background-position: center; 
    background-size: cover;
}

/* PATCH: Declare vars in `:root` instead of `html` */
:root {
    --background: #000b1e;
    --background-text: #091833;
    --button: #133e7c;
    --button-alt: #0b2956;
    --button-alt-svg: invert(15%) sepia(81%) saturate(952%) hue-rotate(186deg) brightness(88%) contrast(102%);
    --text: #0abdc6;
    --text-svg: invert(50%) sepia(85%) saturate(1552%) hue-rotate(144deg) brightness(101%) contrast(92%); 
    --text-alt: rgba(10, 189, 198, .6);
    --accent: #ea00d9;
    --accent-svg: invert(17%) sepia(98%) saturate(7408%) hue-rotate(299deg) brightness(106%) contrast(108%);
    --select: #711c91;
    --select-alt: #321959;
    --green: #00ff00;
}

/* 13. TRANSPARENCY
	You can modify the transparency changing the values of the following parameters */
.theme-dark {
    --background-primary: rgba(9, 24, 51, .4) !important;
    --background-secondary: rgba(0, 11, 30, .4)  !important;
    --background-tertiary: rgba(0, 11, 30, .4) !important;
    --deprecated-panel-background: rgba(9, 24, 51, .4) !important;
    --channeltextarea-background: rgba(19, 62, 124, .7) !important;
    --background-secondary-alt: rgba(9, 24, 51, .7) !important;

}
.theme-dark .inset-3sAvek {
    background-color: var(--channeltextarea-background) !important;
}
.theme-dark .container-2cd8Mz {
    background-color: transparent;
}

/* Web scrollbars 
    This section is only necessary if you are going to use Discord in a web browser (with Stylus)   */

.theme-dark .scrollerThemed-2oenus.themeGhostHairline-DBD-2d .scrollbar-2rkZSL .thumb-2JwNFC {
    background-color: #0abdc6;
}
.scrollerThemed-2oenus.themeDark-2cjlUp .scrollbar-2rkZSL, .scrollerThemed-2oenus.themeDark-2cjlUp .scrollbar-2rkZSL .pad-29zQak, .theme-dark .scrollerWrap-2lJEkd .scrollbar-2rkZSL, .theme-dark .scrollerWrap-2lJEkd .scrollbar-2rkZSL .pad-29zQak, .theme-light .scrollerThemed-2oenus.themeDark-2cjlUp .scrollbar-2rkZSL, .theme-light .scrollerThemed-2oenus.themeDark-2cjlUp .scrollbar-2rkZSL .pad-29zQak {
    background-color: #000b1e !important;
}
.scrollerThemed-2oenus.themeGhostHairlineChannels-3G0x9_ .scrollbar-2rkZSL .thumb-2JwNFC {
    background-color: #0abdc6;
}
.theme-dark .scrollerThemed-2oenus.themedWithTrack-q8E3vB .scrollbar-2rkZSL .track-1JN30G {
    background-color: #000b1e;
    border: none;
}
.theme-dark .scrollerThemed-2oenus.themedWithTrack-q8E3vB .scrollbar-2rkZSL .thumb-2JwNFC {
    background-color: #0abdc6;
    border: 3px solid #000b1e;
}

As of WebCord, I'm not sure whenever I should patch every theme putting variables somewhere else than in :root. I'll close this for now…

[Anomalocaridid]

Thanks a lot! I will make sure to pass on your fix to the theme maintainer.