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

[Elec3137]

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?

It wouldn't be so bad to make it slightly grayish, if you'd prefer that? I'll try that locally

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

I could instead make the borders purple too? (those that are #404040 gray currently)
That could make it all more cohesive; I don't think it's necessary that everything be black in white, at least that wasn't the intent; It's just the (important) text and the background which have to be that way.

[Elec3137]

I've changed both aspects, try it out :)

[Rosy-iso]

I'll test these soon!

[Rosy-iso]

Okay, I quite like the purple outline, makes the theme feel more unique while adding more cohesiveness with the toggles, so that's an approval from me

But for the dark gray background...it's effectively never noticeable, at least for me.
I suggest at least experimenting with brighter grays, but if you think they don't look good I am willing to discuss leaving it as is.

[Elec3137]

Okay, I quite like the purple outline, makes the theme feel more unique while adding more cohesiveness with the toggles, so that's an approval from me

Okay, nice! :)

But for the dark gray background...it's effectively not ever noticeable, at least from me. I suggest at least experimenting with brighter grays, but if you think they don't look I am willing to discuss leaving it as is.

I have experimented with brighter grays before pushing that, and I feel like it takes away from the black theme quite a bit. I'm for either leaving it as-is or even reverting the change which gives it a bit of gray.

…

Message ID: ***@***.***>

[Rosy-iso]

I have experimented with brighter grays before pushing that, and I feel like it takes away from the black theme quite a bit. I'm for either leaving it as-is or even reverting the change which gives it a bit of gray.

Understandable, I am okay with leaving it as-is then.

[Rosy-iso]

(This approval is purely UI wise, the code should still be audited and reviewed separately by someone else!)