Nord CSS Theme

[daveb (David Burke)]

I’ve got a Nord theme if anyone is interested. Just add the CSS between ‘’‘space-style ‘’’ on any non template page and refresh your browser.

/* based on Nord https://github.com/arcticicestudio/nord */
:root {
  --base00: #2E3440; /* Polar Night - Default Background */
  --base01: #3B4252; /* Darker Background (status bars, panels) */
  --base02: #434C5E; /* Selection Background */
  --base03: #4C566A; /* Comments, Invisibles, Line Highlighting */
  --base04: #D8DEE9; /* Dark Foreground (status bars) */
  --base05: #E5E9F0; /* Default Foreground, Caret, Operators */
  --base06: #ECEFF4; /* Light Foreground */
  --base07: #8FBCBB; /* Lightest Accent / Highlight */
  --base08: #BF616A; /* Red – Errors, Variables, Diff Deleted */
  --base09: #D08770; /* Orange – Numbers, Constants */
  --base0A: #EBCB8B; /* Yellow – Classes, Search Highlights */
  --base0B: #A3BE8C; /* Green – Strings, Diff Inserted */
  --base0C: #88C0D0; /* Cyan – Regex, Escape Characters */
  --base0D: #81A1C1; /* Blue – Functions, Links, Headings */
  --base0E: #B48EAD; /* Purple – Keywords, Storage */
  --base0F: #5E81AC; /* Deep Blue – Deprecated / Special */
}

html[data-theme="dark"] {
  color-scheme: dark;

  --ui-accent-color: var(--base0D);
  --ui-accent-text-color: color-mix(in srgb, var(--ui-accent-color), white 50%);
  --highlight-color: color-mix(in srgb, var(--base0A), transparent 50%);
  --link-color: var(--base0D);
  --link-missing-color: var(--base09);
  --meta-color: var(--base08);
  --meta-subtle-color: var(--base03);
  --subtle-color: var(--base03);
  --subtle-background-color: color-mix(in srgb, var(--base03), transparent 90%);

  --root-background-color: var(--base00);
  --root-color: var(--base05);

  --top-color: var(--base06);
  --top-background-color: var(--base01);
  --top-border-color: var(--base03);
  --top-sync-error-color: var(--top-color);
  --top-sync-error-background-color: color-mix(in srgb, var(--base08), black 50%);
  --top-saved-color: var(--base06);
  --top-unsaved-color: var(--base04);
  --top-loading-color: var(--base04);

  --panel-background-color: var(--base00);
  --panel-border-color: var(--base03);

  --bhs-background-color: var(--base00);
  --bhs-border-color: var(--base03);

  --modal-color: var(--base05);
  --modal-background-color: var(--base01);
  --modal-border-color: var(--base03);
  --modal-header-label-color: var(--ui-accent-text-color);
  --modal-help-background-color: var(--base02);
  --modal-help-color: var(--base05);
  --modal-selected-option-background-color: var(--ui-accent-color);
  --modal-selected-option-color: var(--base06);
  --modal-hint-background-color: color-mix(in srgb, var(--base0D), black 50%);
  --modal-hint-color: var(--base06);
  --modal-hint-inactive-background-color: var(--base02);
  --modal-hint-inactive-color: var(--base04);
  --modal-description-color: var(--base04);
  --modal-selected-option-description-color: var(--base06);

  --notifications-background-color: var(--base02);
  --notifications-border-color: var(--base04);
  --notification-info-background-color: var(--base0D);
  --notification-error-background-color: var(--base08);

  --button-background-color: var(--base03);
  --button-hover-background-color: color-mix(in srgb, var(--base03), var(--base04) 40%);
  --button-color: var(--base06);
  --button-border-color: var(--base03);
  --primary-button-background-color: var(--ui-accent-color);
  --primary-button-hover-background-color: color-mix(
    in srgb,
    var(--ui-accent-color),
    black 35%
  );
  --primary-button-color: var(--base06);
  --primary-button-border-color: transparent;

  --progress-background-color: var(--base03);
  --progress-sync-color: var(--base06);
  --progress-index-color: var(--base0A);

  --text-field-background-color: var(--button-background-color);

  --action-button-background-color: transparent;
  --action-button-color: var(--base04);
  --action-button-hover-color: var(--base0D);
  --action-button-active-color: var(--base0D);

  --editor-caret-color: var(--base06);
  --editor-selection-background-color: color-mix(in srgb, var(--base02), transparent 30%);
  --editor-panels-bottom-color: var(--base06);
  --editor-panels-bottom-background-color: var(--base01);
  --editor-panels-bottom-border-color: var(--base03);
  --editor-completion-detail-color: var(--base04);
  --editor-completion-detail-selected-color: var(--base06);
  --editor-list-bullet-color: var(--base04);
  --editor-heading-color: var(--base06);
  --editor-heading-meta-color: var(--meta-subtle-color);
  --editor-hashtag-background-color: color-mix(in srgb, var(--base0D), transparent 50%);
  --editor-hashtag-color: var(--base06);
  --editor-hashtag-border-color: color-mix(in srgb, var(--base0D), transparent 60%);
  --editor-ruler-color: var(--base03);
  --editor-naked-url-color: var(--link-color);
  --editor-link-color: var(--link-color);
  --editor-link-url-color: var(--link-color);
  --editor-link-meta-color: var(--meta-subtle-color);
  --editor-wiki-link-page-background-color: color-mix(in srgb, var(--base0D), transparent 92%);
  --editor-wiki-link-page-color: var(--link-color);
  --editor-wiki-link-page-missing-color: var(--link-missing-color);
  --editor-wiki-link-color: color-mix(in srgb, var(--base0D), var(--base05) 30%);
  --editor-command-button-color: var(--base06);
  --editor-command-button-background-color: var(--base03);
  --editor-command-button-hover-background-color: color-mix(in srgb, var(--base03), var(--base04) 40%);
  --editor-command-button-meta-color: var(--meta-subtle-color);
  --editor-command-button-border-color: var(--base03);
  --editor-line-meta-color: var(--meta-subtle-color);
  --editor-meta-color: var(--meta-color);
  --editor-table-head-background-color: color-mix(in srgb, var(--base03), transparent 60%);
  --editor-table-head-color: var(--base06);
  --editor-table-even-background-color: color-mix(in srgb, var(--base03), transparent 70%);
  --editor-blockquote-background-color: var(--subtle-background-color);
  --editor-blockquote-color: var(--subtle-color);
  --editor-blockquote-border-color: var(--base03);
  --editor-code-background-color: var(--subtle-background-color);
  --editor-struct-color: var(--base08);
  --editor-highlight-background-color: var(--highlight-color);
  --editor-code-comment-color: var(--meta-subtle-color);
  --editor-code-variable-color: var(--base0D);
  --editor-code-typename-color: var(--base0B);
  --editor-code-string-color: var(--base0A);
  --editor-code-number-color: var(--base0E);
  --editor-code-info-color: var(--subtle-color);
  --editor-code-atom-color: var(--base08);
  --editor-frontmatter-background-color: color-mix(in srgb, var(--base02), transparent 50%);
  --editor-frontmatter-color: var(--subtle-color);
  --editor-frontmatter-marker-color: var(--base06);
  --editor-widget-background-color: color-mix(in srgb, var(--base03), transparent 50%);
  --editor-task-marker-color: var(--subtle-color);
  --editor-task-state-color: var(--subtle-color);

  --editor-directive-mark-color: var(--base08);
  --editor-directive-color: var(--base04);
  --editor-directive-background-color: color-mix(in srgb, var(--base03), transparent 50%);
}

[thepaperpilot]

I’m a big fan of Nord, but this is a bit too low contrast for me. I might take a look at modifying what you’ve done. “Adjusting to taste”, you might say.

[daveb (David Burke)]

I’d be interested to see your alternative

[thepaperpilot]

This is what I came up with:

Screenshots

Specifically curating situations I found the previous theme to be too low-contrast

Implementation

/* based on Nord https://www.nordtheme.com/ */
:root {
  /* Polar Night */
  --nord0: #2E3440;   /* The origin color or the Polar Night palette. */
  --nord1: #3B4252;   /* A brighter shade color based on nord0. */
  --nord2: #434C5E;   /* An even more brighter shade color of nord0. */
  --nord3: #4C566A;   /* The brightest shade color based on nord0. */
  /* Snow Storm */
  --nord4: #D8DEE9;   /* The origin color of the Snow Storm palette. */
  --nord5: #E5E9F0;   /* A brighter shade color of nord4. */
  --nord6: #ECEFF4;   /* The brightest shade color based on nord4. */
  /* Frost */
  --nord7: #8FBCBB;   /* A calm and highly contrasted color reminiscent of frozen polar water. */
  --nord8: #88C0D0;   /* The bright and shiny primary accent color reminiscent of pure and clear ice. */
  --nord9: #81A1C1;   /* A more darkened and less saturated color reminiscent of arctic waters. */
  --nord10: #5E81AC;  /* A dark and intensive color reminiscent of the deep arctic ocean. */
  /* Aurora */
  --nord11: #BF616A;  /* Red */
  --nord12: #D08770;  /* Orange */
  --nord13: #EBCB8B;  /* Yellow */
  --nord14: #A3BE8C;  /* Green */
  --nord15: #B48EAD;  /* Purple */
}

html[data-theme="dark"] {
  color-scheme: dark;

  --ui-accent-color: var(--nord9);
  --ui-accent-text-color: color-mix(in srgb, var(--ui-accent-color), white 50%);
  --highlight-color: color-mix(in srgb, var(--nord13), transparent 50%);
  --link-color: var(--nord9);
  --link-missing-color: var(--nord12);
  --meta-color: var(--nord11);
  --meta-subtle-color: var(--nord3);
  --subtle-color: var(--nord3);
  --subtle-background-color: var(--nord1);

  --root-background-color: var(--nord0);
  --root-color: var(--nord5);

  --top-color: var(--nord6);
  --top-background-color: var(--nord1);
  --top-border-color: var(--nord3);
  --top-sync-error-color: var(--top-color);
  --top-sync-error-background-color: color-mix(in srgb, var(--nord11), black 50%);
  --top-saved-color: var(--nord6);
  --top-unsaved-color: var(--nord4);
  --top-loading-color: var(--nord4);

  --panel-background-color: var(--nord0);
  --panel-border-color: var(--nord3);

  --bhs-background-color: var(--nord0);
  --bhs-border-color: var(--nord3);

  --modal-color: var(--nord5);
  --modal-background-color: var(--nord1);
  --modal-border-color: var(--nord3);
  --modal-header-label-color: var(--ui-accent-text-color);
  --modal-help-background-color: var(--nord2);
  --modal-help-color: var(--nord5);
  --modal-selected-option-background-color: var(--ui-accent-color);
  --modal-selected-option-color: var(--nord6);
  --modal-hint-background-color: color-mix(in srgb, var(--nord9), black 50%);
  --modal-hint-color: var(--nord6);
  --modal-hint-inactive-background-color: var(--nord2);
  --modal-hint-inactive-color: var(--nord4);
  --modal-description-color: var(--nord4);
  --modal-selected-option-description-color: var(--nord6);

  --notifications-background-color: var(--nord2);
  --notifications-border-color: var(--nord4);
  --notification-info-background-color: var(--nord9);
  --notification-error-background-color: var(--nord11);

  --button-background-color: var(--nord3);
  --button-hover-background-color: color-mix(in srgb, var(--nord3), var(--nord4) 40%);
  --button-color: var(--nord6);
  --button-border-color: var(--nord3);
  --primary-button-background-color: var(--ui-accent-color);
  --primary-button-hover-background-color: color-mix(
    in srgb,
    var(--ui-accent-color),
    black 35%
  );
  --primary-button-color: var(--nord6);
  --primary-button-border-color: transparent;

  --progress-background-color: var(--nord3);
  --progress-sync-color: var(--nord6);
  --progress-index-color: var(--nord13);

  --text-field-background-color: var(--button-background-color);

  --action-button-background-color: transparent;
  --action-button-color: var(--nord4);
  --action-button-hover-color: var(--nord9);
  --action-button-active-color: var(--nord9);

  --editor-caret-color: var(--nord6);
  --editor-selection-background-color: color-mix(in srgb, var(--nord4), transparent 70%);
  --editor-panels-bottom-color: var(--nord6);
  --editor-panels-bottom-background-color: var(--nord1);
  --editor-panels-bottom-border-color: var(--nord3);
  --editor-completion-detail-color: var(--nord4);
  --editor-completion-detail-selected-color: var(--nord6);
  --editor-list-bullet-color: var(--nord4);
  --editor-heading-color: var(--nord6);
  --editor-heading-meta-color: var(--meta-subtle-color);
  --editor-hashtag-background-color: color-mix(in srgb, var(--nord9), transparent 50%);
  --editor-hashtag-color: var(--nord6);
  --editor-hashtag-border-color: color-mix(in srgb, var(--nord9), transparent 60%);
  --editor-ruler-color: var(--nord3);
  --editor-naked-url-color: var(--link-color);
  --editor-link-color: var(--link-color);
  --editor-link-url-color: var(--link-color);
  --editor-link-meta-color: var(--meta-subtle-color);
  --editor-wiki-link-page-background-color: color-mix(in srgb, var(--nord9), transparent 92%);
  --editor-wiki-link-page-color: var(--link-color);
  --editor-wiki-link-page-missing-color: var(--link-missing-color);
  --editor-wiki-link-color: color-mix(in srgb, var(--nord9), var(--nord5) 30%);
  --editor-command-button-color: var(--nord6);
  --editor-command-button-background-color: var(--nord3);
  --editor-command-button-hover-background-color: color-mix(in srgb, var(--nord3), var(--nord4) 40%);
  --editor-command-button-meta-color: var(--meta-subtle-color);
  --editor-command-button-border-color: var(--nord3);
  --editor-line-meta-color: var(--meta-subtle-color);
  --editor-meta-color: var(--meta-color);
  --editor-table-head-background-color: color-mix(in srgb, var(--nord3), transparent 60%);
  --editor-table-head-color: var(--nord6);
  --editor-table-even-background-color: color-mix(in srgb, var(--nord3), transparent 70%);
  --editor-blockquote-background-color: var(--subtle-background-color);
  --editor-blockquote-color: var(--nord4);
  --editor-blockquote-border-color: var(--nord3);
  --editor-code-background-color: color-mix(in srgb, var(--nord3), transparent 70%);
  --editor-struct-color: var(--nord11);
  --editor-highlight-background-color: var(--highlight-color);
  --editor-code-color: var(--nord4);
  --editor-code-comment-color: color-mix(in srgb, var(--nord3), var(--nord4) 40%);
  --editor-code-variable-color: var(--nord9);
  --editor-code-typename-color: var(--nord14);
  --editor-code-string-color: var(--nord13);
  --editor-code-number-color: var(--nord15);
  --editor-code-info-color: var(--editor-frontmatter-marker-color);
  --editor-code-atom-color: var(--nord11);
  --editor-frontmatter-background-color: color-mix(in srgb, var(--nord2), transparent 50%);
  --editor-frontmatter-color: var(--nord4);
  --editor-frontmatter-marker-color: var(--nord6);
  --editor-widget-background-color: color-mix(in srgb, var(--nord1), transparent 50%);
  --editor-task-marker-color: var(--subtle-color);
  --editor-task-state-color: var(--subtle-color);

  --editor-directive-mark-color: var(--nord11);
  --editor-directive-color: var(--nord4);
  --editor-directive-background-color: color-mix(in srgb, var(--nord1), transparent 50%);
}

html[data-theme="dark"] #sb-main button {
  background: var(--nord3);
}

[daveb (David Burke)]

Thanks, I like your implementation more than mine!

[Platinum]

Nice theme! Took me a while to figure out it only works in dark mode. If only I’d read the CSS

html[data-theme="dark"] {
  color-scheme: dark;