Add dim Color Mode

[ronilaukkarinen]

I prefer "dim" color schemes for many dark themes, in my opinion #111 or 17, 17, 17 rgb is a bit too dark.

Here's a quick proof of concept "Dim" Color Mode which uses the default Mastodon web UI background rgb(25, 27, 34). This could be a setting "Dim" like on Twitter.

Before:

After:

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

[Nive9]

I agree, and maybe the Catppuccin colour scheme would be an option?

[ronilaukkarinen]

I agree, and maybe the Catppuccin colour scheme would be an option?

That looks really nice! Didn't know there's already a dim-ish themes out there for Elk.

[theotherlinh]

definitely agree with a dim mode. I'd go a notch lighter still, but anything works :)

[ronilaukkarinen]

Here are the CSS variables, this uses the official colors from the default Mastodon UI , I kinda like them.

:root {
  --c-bg-base: #191b22;
  --rgb-bg-base: 25, 27, 34;
  --c-border: rgba(45, 53, 56, .44);
  --c-bg-active: rgba(85, 93, 100, .18);
}

You can test them out for instance by using Live editor (for both Chrome and Firefox) and pinning the styles with the pin icon.

I'm not exactly sure how to create a selection for this, but if anyone is not already attempting this, I could try and send a PR later.

[ronilaukkarinen]

I have not yet figured out a way to fix "Show more" button as it desaturates the background. So I'm just forcing the styles without the filter.

Current process to add these to a canary build:

1. Get latest build
2. nano $HOME/elk/styles/global.css
3. Add to first line:

:root {
  --c-bg-base: #191b22;
  --rgb-bg-base: 25, 27, 34;
  --c-border: rgba(45, 53, 56, .44);
  --c-bg-active: rgba(85, 93, 100, .18);
}

/* Fix "Show more" button background color */
button.filter-saturate-0:not(:hover) {
  color: #858585;
  filter: unset;
}

4. Replace #111111 with #191b22 to get mobile PWA header and status bar to the right color:

nano $HOME/elk/modules/pwa/i18n.ts
nano $HOME/elk/plugins/color-mode.ts

5. Rebuild

[Dricc123]

Yes, we need dim colors. dark is too dark and bright is too bright. Many thanks

[Dricc123]

This feature request is so old! Has it been abandoned? It's the only reason I don't use Elk.

[Dricc123]

How come nobody cares? It's the one thing that would transform the app from unusable to great