Add black theme

[Elec3137]

Description

Adds a black theme (high contrast dark theme)

I used 7w1/sable@6f2d630 as a reference of how to do this.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

[dozro]

code: lgtm

but you have to run prettier, noticed some ghost changes (new lines, and spacing) that might have caused this

[Elec3137]

but you have to run prettier, noticed some ghost changes (new lines, and spacing) that might have caused this

Sorry about that, should've looked closer. vscode-css-languagerserver seems to automatically remove the trailing newline for some reason. As well as a lot of other random stuff. oops...

[dozro]

Is this still a WIP or ready for review?

[Elec3137]

Is this still a WIP or ready for review?

Still WIP because I've not been able to properly test it. I keep running into OOMs now on nixos, trying to make sense of things.

on pnpm run build:

[6534:0x56219437a000]    18341 ms: Mark-Compact 2028.1 (2056.7) -> 2022.7 (2060.4) MB, pooled: 0 MB, 469.08 / 0.00 ms  (average mu = 0.273, current mu = 0.190) allocation failure; scavenge might not succeed
[6534:0x56219437a000]    18883 ms: Mark-Compact 2031.3 (2061.0) -> 2027.8 (2081.5) MB, pooled: 0 MB, 509.94 / 0.00 ms  (average mu = 0.172, current mu = 0.059) allocation failure; scavenge might not succeed

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
----- Native stack trace -----

 1: 0x56215c521040 node::OOMErrorHandler(char const*, v8::OOMDetails const&) [node]
 2: 0x56215c9f8170  [node]
 3: 0x56215c9f8276  [node]
 4: 0x56215cceef97  [node]
 5: 0x56215cd03f9d  [node]
 6: 0x56215ccd109b  [node]
 7: 0x56215cca2bca  [node]
 8: 0x56215d24b8af  [node]
 9: 0x7fb7c7e76636 

[dozro]

happens to me if i build sable with cloudflare too, idk why building takes that much memory, might be worth looking into at some point

[Elec3137]

happens to me if i build sable with cloudflare too, idk why building takes that much memory, might be worth looking into at some point

In case this helps anyone, I fixed my problem by invoking vite build like so:

node --max-old-space-size=8192 node_modules/vite/bin/vite.js build

source: vitejs/vite#2433

[Elec3137]

Unfortunately, due to this theme's reliance on borders rather than different container colors to maximize contrast, certain elements (specifically the $USER is following the conversation. indicator below the message bar) end up removing part of the border when hovered and it looks noticeably off.

This isn't a major problem IMO, just something to note.

[Rosy-iso]

Is this still a WIP? If so you should probably mark it as a draft
I'll review it once I get confirmation that it's ready

[Elec3137]

Is this still a WIP? If so you should probably mark it as a draft I'll review it once I get confirmation that it's ready

I believe it's ready; I intentionally marked it as ready for review, it used to be a draft.
(sorry if the outdated description confused you)

[Rosy-iso]

A nice theme! I really like amoled (??) themes and this one does it well.
But there's a few things that I noticed...

First of all, all background colors are now pitch black of course, which causes space's room lists and the various settings (and probably other things) to lose their darker border that kept everything in its own little box...this is no deal breaker and it might be fine but maybe experimenting with a solution could be a good idea (maybe an outline?)

Second thing, which is more minor, I noticed the toggles and generic buttons kept their default purple...this can work but maybe they should also get the amoled treatment? Very much open to discussing all this ofc

Overall, it's a solid theme which I think works, but I'd like to discuss the above beforehand first

not current anymore

[Elec3137]

First of all, all background colors are now pitch black of course, which causes space's room lists and the various settings (and probably other things) to lose their darker border that kept everything in its own little box...this is no deal breaker and it might be fine but maybe experimenting with a solution could be a good idea (maybe an outline?)

From what I understand, this can be solved one of two ways:

1. through changing code beyond adding a theme, to add actual borders to the elements.
2. making this theme not quite pitch black there

Neither of those options appeal to me very much, and I think it looks good as it is.

Second thing, which is more minor, I noticed the toggles and generic buttons kept their default purple...this can work but maybe they should also get the amoled treatment? Very much open to discussing all this ofc

I think that also looks decent, and it's nice to be consistent with the normal dark theme; are you suggesting we make them brighter? That could make sense

[Rosy-iso]

Neither of those options appeal to me very much, and I think it looks good as it is.

I suppose it makes sense for what is essentially the amoled theme to remove a detail like this, I can be okay with this I think?

I think that also looks decent, and it's nice to be consistent with the normal dark theme; are you suggesting we make them brighter? That could make sense

I meant moreso making them...like the rest of the theme...so black with white outline maybe? Idk it just looks a bit jarring to me seeing the normal toggles and stuff alongside a near completely black theme