The new Theme isn't worth the upgrade

[SpaceIgniter]

Describe the solution you'd like

As per the title,

The new Theme(s) of Memos isn't worth the upgrade.
Aesthetically it looks awful. The text is faded, the dark mode colour looks off.
v0.24.0 Theme was great.

I'm not upgrading due to this.

Type of feature

User Interface (UI)

Additional context

If it isn't broken, don't fix it.

[SpaceIgniter]

Awful compared to:

[boojack]

@SpaceIgniter It seems like the issue is that it's not dark enough in dark mode, is that correct? We indeed haven't tested dark mode thoroughly.

However, since Memos is self-hosted, you can always stay on the old version without upgrading. The choice is always in your hands, and no one will force you to upgrade.

[boojack]

And GitHub Issue is for tracking issues and figure out solutions, not for expressing your discomfort. I will convert this to a discussion.

[SpaceIgniter]

Hi @boojack

Please accept my apologies for the tone I used in this discussion.
I was too forward without acknowledging your effort and work on the project.

So yes, it's just the dark theme that seems out of place.

Have a good day ahead.

[boojack]

We have recently adjusted the dark mode style, you can check out the effect in the demo site. And we are ready to release a new version. If you have any suggestions, please let us know.

[Daivy03]

We have recently adjusted the dark mode style, you can check out the effect in the demo site. And we are ready to release a new version. If you have any suggestions, please let us know.

Hi, could you consider adding the same dark theme that is using the docs at usememos.com/docs ?

[nkhi]

@SpaceIgniter I like how DarkReader (chrome extension) increases the contrast
https://darkreader.org/
might be a nice workaround for the time being.

[Daivy03]

I just upgraded to v0.25.0 but didn’t really love the new dark themes, so I went ahead and copied the color palette from the usememos.com/docs site. I really hope the devs consider adding the same theme they use in the docs because it feels way better than the default dark theme

Anyway, here’s the CSS:

.dark, :root, body {
  background-color: #121212;
  --background:#121212;
  --foreground:#ebebeb;
  --muted:#212121;
  --muted-foreground:#b3b3b3cc;
  --popover:#1e1e1e;
  --popover-foreground:#dedede;
  --card:#191919;
  --card-foreground:#fafafa;
  --border:#6663;
  --primary:#fafafa;
  --primary-foreground:#171717;
  --secondary:#212121;
  --secondary-foreground:#ebebeb;
  --accent:#6868684d;
  --accent-foreground:#e6e6e6;
  --ring:#8c8c8c;
  --sidebar: #191919;
 
}

css preview:

edit:
I noticed that some of the colored borders looks a bit off.
its probably my firefox screenshot's fault

feel free to tweak and improve it as it might have some duplicates or messy parts.

Thanks a lot for the awesome work on memos ❤️

[amamoh]

Thx

[Novapixel1010]

Thanks for this

[bsdayo]

Since the frontend uses shadcn-ui, you can always copy-paste the theme code from https://ui.shadcn.com/themes

Choose the theme you want, click "Copy Code", paste the CSS to Settings - System - Additional style.

And change:

- :root {
+ html[data-theme="default"] {

- .dark {
+ html[data-theme="default-dark"] {

Dark mode with "Default" theme from shadcn after tweaking:

Looks much better.

[Daivy03]

Thank you. Now is better
Edit: I noticed in 0.25.0 it forces light theme (even with always dark option) when edit the css like you're suggesting:

- :root {
+ html[data-theme="default"] {

- .dark {
+ html[data-theme="default-dark"] {

Meanwhile its fine to only copy paste the code from https://ui.shadcn.com/themes (tailwind v4)

[Novapixel1010]

This should be the new default, Happy that it was really easy to change the theme.

[Novapixel1010]

For those that want a quick copy and paste. For dark theme with green buttons. Go to --> Settings --> System --> Now select Default Dark --> Paste code below in Additional style

html[data-theme="default"] {
  --radius: 0.65rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.723 0.219 149.579);
  --primary-foreground: oklch(0.982 0.018 155.826);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.723 0.219 149.579);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.723 0.219 149.579);
  --sidebar-primary-foreground: oklch(0.982 0.018 155.826);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.723 0.219 149.579);
}

html[data-theme="default-dark"] {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.696 0.17 162.48);
  --primary-foreground: oklch(0.393 0.095 152.535);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.527 0.154 150.069);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.696 0.17 162.48);
  --sidebar-primary-foreground: oklch(0.393 0.095 152.535);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.527 0.154 150.069);
}

[rewhex]

I've made a material3 like colors palette that fixes this tinted dark theme, looks very nice for me.

:root {
  --background: #1b1b1b;
  --foreground: #e2e2e6;
  --card: #1b1b1b;
  --card-foreground: #e2e2e6;
  --popover: #1b1b1b;
  --popover-foreground: #e2e2e6;
  --primary: #9ccaff;
  --primary-foreground: #00325a;
  --secondary: #3c4858;
  --secondary-foreground: #bbc8db;
  --muted: #42474e;
  --muted-foreground: #c3c7d0;
  --accent: #151515;
  --accent-foreground: #e2e2e6;
  --destructive: #ffb4a9;
  --destructive-foreground: #680003;
  --border: rgba(141, 145, 153, 0.3);
  --input: #42474e;
  --ring: #9ccaff;
  --chart-1: #ffb4a9;
  --chart-2: #9ccaff;
  --chart-3: #bbc8db;
  --chart-4: #d6bee4;
  --chart-5: #f3daff;
  --sidebar: #1b1b1b;
  --sidebar-foreground: #e2e2e6;
  --sidebar-primary: #9ccaff;
  --sidebar-primary-foreground: #00325a;
  --sidebar-accent: #151515;
  --sidebar-accent-foreground: #e2e2e6;
  --sidebar-border: rgba(141, 145, 153, 0.3);
  --sidebar-ring: #9ccaff;
}

[lotsokluze]

Thanks for this!

[CDubs00]

I made one to match my Glance Teal theme. Now just need to be able to edit fonts...

.dark, :root, body {
  background-color: #0F1014;
  --background: #0F1014;
  --foreground: #D0D0D0;
  --muted: #1A1A1F;
  --muted-foreground: #8A8A8A;
  --popover: #16161B;
  --popover-foreground: #E0E0E0;
  --card: #18181F;
  --card-foreground: #F5F5F5;
  --border: #444455;
  --primary: #61AF85;
  --primary-foreground: #B2E0C6;
  --secondary: #1F1F25;
  --secondary-foreground: #EDEDED;
  --accent: #55556666;
  --accent-foreground: #EAEAEA;
  --ring: #7F7F8F;
  --sidebar: #1C1C22;
}