Midnight Slate — a dark theme with color tags

[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.

Updates:

• Apr 11 — cross-browser dark scrollbar
• Apr 14 — rainbow tag colors
• Apr 20 — Small fix for v0.27.1

Current state

Base theme

Paste the script into:
Settings → System → Additional style

: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;
  }
}

Color Tags

Paste the script into:
Settings → System → Additional script

You can change the colors here:

const START = [90, 110, 156];
const END = [175, 100, 111];
const DARKEN_FACTOR = 0.72;

START = first tag color, END = last tag color, DARKEN_FACTOR = hover darkness.

(() => {
  if (window.__memosTagIconPainterLoaded) return;
  window.__memosTagIconPainterLoaded = true;

  const START = [90, 110, 156];
  const END = [175, 100, 111];
  const DARKEN_FACTOR = 0.72;

  const lerp = (a, b, t) => Math.round(a + (b - a) * t);

  function colorAt(t) {
    return [
      lerp(START[0], END[0], t),
      lerp(START[1], END[1], t),
      lerp(START[2], END[2], t),
    ];
  }

  function rgbString([r, g, b]) {
    return `rgb(${r}, ${g}, ${b})`;
  }

  function darken([r, g, b], factor = DARKEN_FACTOR) {
    return [
      Math.max(0, Math.round(r * factor)),
      Math.max(0, Math.round(g * factor)),
      Math.max(0, Math.round(b * factor)),
    ];
  }

  function isTagRow(el) {
    if (!(el instanceof HTMLElement)) return false;

    const cls = typeof el.className === "string" ? el.className : "";
    if (!cls.includes("cursor-pointer") || !cls.includes("transition-colors")) return false;

    return !!el.querySelector("svg") && !!(el.textContent || "").trim();
  }

  function getTagRows() {
    return Array.from(document.querySelectorAll("div")).filter(isTagRow);
  }

  function isActiveRow(row) {
    return row.className.includes("text-primary") || !!row.querySelector(".text-primary");
  }

  function getLabel(row) {
    return Array.from(row.querySelectorAll("span")).find(
      (span) => (span.textContent || "").trim().length > 0
    ) || null;
  }

  function setIconColor(svg, color) {
    if (!svg) return;
    svg.style.color = color;
    svg.style.stroke = color;
    svg.style.fill = "none";
    svg.style.transition = "color 0.18s ease, stroke 0.18s ease";
  }

  function setTextColor(el, color) {
    if (!el) return;
    el.style.color = color;
    el.style.webkitTextFillColor = color;
    el.style.transition = "color 0.18s ease";
  }

  function clearTextColor(el) {
    if (!el) return;
    el.style.color = "";
    el.style.webkitTextFillColor = "";
    el.style.transition = "";
  }

  function applyRowColor(row, mode = "base") {
    const svg = row.querySelector("svg");
    const label = getLabel(row);
    if (!svg) return;

    const color =
      mode === "hover"
        ? row.dataset.rainbowHashHoverColor || ""
        : row.dataset.rainbowHashColor || "";

    setIconColor(svg, color);

    if (isActiveRow(row)) {
      setTextColor(label, color);
    } else {
      clearTextColor(label);
    }
  }

  function bindHover(row) {
    if (row.dataset.rainbowHoverBound) return;

    row.addEventListener("mouseenter", () => applyRowColor(row, "hover"));
    row.addEventListener("mouseleave", () => applyRowColor(row, "base"));

    row.dataset.rainbowHoverBound = "1";
  }

  function paintTagIcons() {
    const rows = getTagRows();
    const total = rows.length;

    rows.forEach((row, index) => {
      const t = total <= 1 ? 0 : index / (total - 1);
      row.dataset.rainbowHashColor = rgbString(colorAt(t));
      row.dataset.rainbowHashHoverColor = rgbString(darken(colorAt(t)));

      applyRowColor(row, "base");
      bindHover(row);
    });
  }

  let scheduled = false;
  let observer = null;

  function schedulePaint() {
    if (scheduled) return;
    scheduled = true;

    requestAnimationFrame(() => {
      scheduled = false;

      if (observer) observer.disconnect();
      try {
        paintTagIcons();
      } finally {
        if (observer) {
          observer.observe(document.body, {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ["class"],
          });
        }
      }
    });
  }

  function boot() {
    paintTagIcons();

    observer = new MutationObserver(schedulePaint);
    observer.observe(document.body, {
      childList: true,
      subtree: true,
      attributes: true,
      attributeFilter: ["class"],
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", boot, { once: true });
  } else {
    boot();
  }
})();

[buridanov]

Updated CSS style for v0.27.1

: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;
  }
}

.memo-tags .tag,
.memo-tag,
a[href*="/tags/"],
span[class*="tag"] {
  border: none !important;
  box-shadow: none !important;
  color: #7d8595 !important;
}