Slate theme fails to load in newest release.

DagothUrTheFalse commented 1 year ago

Aknowledgements

[X] I have checked that there is no other issue describing the same or similar problem that I currently have, regardless if it has been closed or open.
[ ] This bug affects Discord website.
[ ] This issue is confirmed to be reproduceable when WebCord is packaged on at least all three latest supported Electron major releases.
[ ] This issue is reproduceable in Chrome, Chromium or any Chromium-based browser, e.g Brave or Edge (please write in Additional Context which browser you have used if it is neither Chrome nor unmodified Chromium).
[ ] There are no fixes done to master which resolves this issue.
[X] My issue describes one of the unstable and/or not fully implemented features.
[x] 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

24.0.0

Application version

v4.2.0

Bug description

I started webcord and it was not themed, so I proceeded to reinstall my theme by manually deleting it and then reinstalling it via command line. There was no change in appearance of the app after restarting it.

Additional context

[103420:0410/155118.763771:ERROR:gl_factory.cc(128)] Requested GL implementation (gl=desktop-gl,angle=none) not found in allowed implementations: [(gl=egl-angle,angle=default),(gl=egl-gles2,angle=none)].
[103420:0410/155118.764288:ERROR:viz_main_impl.cc(186)] Exiting GPU process due to errors during initialization
Cannot use import statement outside a module
[103445:0410/155118.808461:ERROR:gl_factory.cc(128)] Requested GL implementation (gl=desktop-gl,angle=none) not found in allowed implementations: [(gl=egl-angle,angle=default),(gl=egl-gles2,angle=none)].
[103445:0410/155118.809051:ERROR:viz_main_impl.cc(186)] Exiting GPU process due to errors during initialization
[UPDATE] Application is up-to-date!
Couldn't resolve CSS theme imports, retrying again...
Couldn't resolve CSS theme imports, retrying again...
Couldn't resolve CSS theme imports, retrying again...
Couldn't resolve CSS theme imports, retrying again...
Couldn't resolve CSS theme imports, retrying again...
(node:103390) UnhandledPromiseRejectionWarning: TypeError: fetch failed                                                             
    at Object.fetch (node:internal/deps/undici/undici:14152:11)   
    at processTicksAndRejections (node:internal/process/task_queues:95:5)                                                           
    at async Promise.all (index 0)                                
    at parseImports (/usr/lib/webcord/resources/app.asar/sources/code/main/modules/extensions.ts:49:5)                              
(Use `webcord --trace-warnings ...` to show where the warning was created)                                                          
(node:103390) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 4)

SpacingBat3 commented 1 year ago

Couldn't resolve CSS theme imports, retrying again...
Couldn't resolve CSS theme imports, retrying again...
Couldn't resolve CSS theme imports, retrying again...
Couldn't resolve CSS theme imports, retrying again...
Couldn't resolve CSS theme imports, retrying again...

Looks like WebCord is failing to resolve stuff with fetch, make sure links in import of CSS theme is correct, otherwise it will fail. It might also be an issue caused by Electron update – since Electron v23 WebCord should be using native fetch API over polyfill (same is done with util.parseArgs) so there's a chance this will cause some incompatibilities (especially with node-fetch not really aiming for compatibility with native fetch).

Could you send here the exact CSS file you were trying to inject to WebCord?

SpacingBat3 commented 1 year ago

Looks like this is an issue specific to your theme, I wasn't able to reproduce it with https://github.com/CapnKitten/Material-Discord. I won't fix it until you give me the link to the CSS you were using.

DagothUrTheFalse commented 1 year ago

/**
 * @name Slate
 * @author Gibbu#1211 & Tropical#8908
 * @version 1.1
 * @invite TeRQEPb
 * @description An optimized, consistent, and functional theme for Discord based on GitHub's design language.
 * @source https://github.com/DiscordStyles/Slate/
 * @website https://discordstyles.github.io/slate-theme/
*/

/*
  Import Source Code 
*/
@import url("https://discordstyles.github.io/AdjustableServerWidth/base.css");
@import url("https://discordstyles.github.io/Slate/dist/Slate.css");

/*
  Basic Variables
  See available vars here: https://github.com/DiscordStyles/Slate/wiki
*/
:root {
  /* Primary Colors */
  --accent: 3, 102, 214;
  --link-colour: 48, 144, 255;

  /* Server List */
  --server-icon-size: 35px;
  --server-icon-spacing: 8px;
  --server-container-padding: 10px;
}

/*
  Place any Theme-specific Custom CSS Below here
*/
/*Gruvbox Palette*/
html:root {
    --slate-palette: "Gruvbox";
    --toolbar-background-alt:#3c3836;
    --toolbar-background:#32302f;
    --toolbar-background-hover:#3c3836;
    --toolbar-background-active:#504945;
    --toolbar-search-background:#282828;
    --toolbar-search-border:var(--toolbar-border);
    --toolbar-border:#1d2021;
    --toolbar-text-muted:#a89984;
    --toolbar-text-normal:#bdae93;
    --toolbar-text-focus:#ebdbb2;
    --accent:215, 153, 33;
    --status-green:104, 157, 106;
    --status-yellow:213, 153, 33;
    --status-red:204, 36, 29;
    --status-grey:168, 153, 132;
}

html.theme-dark,
html.theme-dark body #app-mount .theme-light .root-1gCeng,
html.theme-dark body .force-theme.theme-light {
    --background-modifier-hover:#232127;
    --background-modifier-active:#2d2a32;
    --text-normal:#ebdbb2;
    --text-muted:#a89984;
    --text-focus:#ebdbb2;
    --background-alt:#282828;
    --background-light:#504945;
    --background-dark:#282828;
    --background:#3c3836;
    --guilds-background:var(--background-light);
    --base-border:#1d2021;
    --background-modifier-hover:#504945;
    --background-modifier-active:#665c54;
}

DagothUrTheFalse commented 1 year ago

Slate with the gruvbox pallete

DagothUrTheFalse commented 1 year ago

@SpacingBat3

SpacingBat3 commented 1 year ago

@DagothUrTheFalse still, I'm unable to reproduce this issue. The CSS you've provided here seemed to load fine for me (there's no fetch errors). Maybe that's an issue with connection? Looks like fetch failed is a generic error that might mean a connection timeout or other HTTP responses.

That being said, this is definitely not an issue on the WebCord side.

DagothUrTheFalse commented 1 year ago

@DagothUrTheFalse still, I'm unable to reproduce this issue. The CSS you've provided here seemed to load fine for me (there's no fetch errors). Maybe that's an issue with connection? Looks like fetch failed is a generic error that might mean a connection timeout or other HTTP responses.

That being side, this is definitely not an issue on the WebCord side.

I have managed to get it working by just copy pasting the imported css into the place the import lines.

SpacingBat3 / WebCord