Midnight Slate — a muted dark theme inspired by Obsidian Minimal

[buridanov]

Hi everyone!

I wanted to share a custom CSS theme I made for Memos called Midnight Slate.

It’s a muted dark theme inspired by the Obsidian Minimal theme, with restrained blue accents and slightly more expressive heading colors.

Tested on Memos v0.26.2.

:root {
  --background: oklch(0.23 0.013 265);
  --foreground: oklch(0.85 0.013 265);

  --card: oklch(0.255 0.016 265);
  --card-foreground: oklch(0.85 0.013 265);

  /* Popovers */
  --popover: oklch(0.22 0.013 261);
  --popover-foreground: oklch(0.85 0.013 270);

  /* Primary */
  --primary: oklch(0.55 0.05 250);
  --primary-foreground: oklch(0.95 0.006 250);

  /* Secondary */
  --secondary: oklch(0.6 0.07 250);
  --secondary-foreground: oklch(0.65 0.017 266);

  /* Muted */
  --muted: oklch(0.42 0.018 258);
  --muted-foreground: oklch(0.65 0.017 266);

  /* Accent */
  --accent: oklch(0.23 0.013 261);
  --accent-foreground: oklch(0.95 0.013 270);

  /* Destructive */
  --destructive: oklch(0.52 0.14 25);
  --destructive-foreground: oklch(0.97 0.004 260);

  /* Borders */
  --border: oklch(0.31 0.018 260);
  --input: oklch(0.35 0.018 260);
  --ring: oklch(0.31 0.018 260);

  /* Sidebar */
  --sidebar: oklch(0.2 0.013 269);
  --sidebar-foreground: oklch(0.80 0.008 260);
  --sidebar-accent: oklch(0.28 0.022 260);
  --sidebar-accent-foreground: oklch(0.88 0.008 260);
}

/* Headers */
h1, .memo-content h1, .markdown-content h1, .prose h1 {
  color: oklch(0.81 0.12 75);
}

h2, .memo-content h2, .markdown-content h2, .prose h2 {
  color: oklch(0.78 0.12 65);
}

h3, .memo-content h3, .markdown-content h3, .prose h3 {
  color: oklch(0.7 0.05 247);
}

h4, .memo-content h4, .markdown-content h4, .prose h4 {
  color: oklch(0.76 0.05 220);
}

h5, .memo-content h5, .markdown-content h5, .prose h5 {
  color: oklch(0.70 0.08 280);
}

h6, .memo-content h6, .markdown-content h6, .prose h6 {
  color: oklch(0.72 0.14 43);
}

[buridanov]

Update — 11 April 2026:

• improved cross-browser scrollbar behavior

:root {
  --background: oklch(0.23 0.013 265);
  --foreground: oklch(0.85 0.013 265);

  --card: oklch(0.255 0.016 265);
  --card-foreground: oklch(0.85 0.013 265);

  /* Popovers */
  --popover: oklch(0.22 0.013 261);
  --popover-foreground: oklch(0.85 0.013 270);

  /* Primary */
  --primary: oklch(0.55 0.05 250);
  --primary-foreground: oklch(0.95 0.006 250);

  /* Secondary */
  --secondary: oklch(0.6 0.07 250);
  --secondary-foreground: oklch(0.65 0.017 266);

  /* Muted */
  --muted: oklch(0.42 0.018 258);
  --muted-foreground: oklch(0.65 0.017 266);

  /* Accent */
  --accent: oklch(0.23 0.013 261);
  --accent-foreground: oklch(0.95 0.013 270);

  /* Destructive */
  --destructive: oklch(0.52 0.14 25);
  --destructive-foreground: oklch(0.97 0.004 260);

  /* Borders */
  --border: oklch(0.31 0.018 260);
  --input: oklch(0.35 0.018 260);
  --ring: oklch(0.31 0.018 260);

  /* Sidebar */
  --sidebar: oklch(0.2 0.013 269);
  --sidebar-foreground: oklch(0.80 0.008 260);
  --sidebar-accent: oklch(0.28 0.022 260);
  --sidebar-accent-foreground: oklch(0.88 0.008 260);
}

/* Headers */
h1, .memo-content h1, .markdown-content h1, .prose h1 {
  color: oklch(0.81 0.12 75);
}

h2, .memo-content h2, .markdown-content h2, .prose h2 {
  color: oklch(0.78 0.12 65);
}

h3, .memo-content h3, .markdown-content h3, .prose h3 {
  color: oklch(0.7 0.05 247);
}

h4, .memo-content h4, .markdown-content h4, .prose h4 {
  color: oklch(0.76 0.05 220);
}

h5, .memo-content h5, .markdown-content h5, .prose h5 {
  color: oklch(0.70 0.08 280);
}

h6, .memo-content h6, .markdown-content h6, .prose h6 {
  color: oklch(0.72 0.14 43);
}

html,
body {
  color-scheme: dark;
}

.scroll-area {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgb(44, 48, 58) rgb(20, 22, 28);
}

@media (forced-colors: active) {
  .scroll-area {
    scrollbar-color: auto;
  }
}