A hacked together port of the Nord theme css for Logseq

logseq-nord.css

@import url("https://fonts.rcvd.io/iA Writer/stylesheet.css");
@import url("https://cdn.jsdelivr.net/gh/pengx17/logseq-dev-theme@main/bullet_threading.css");

/* Block threading */
:root {
  --ls-block-bullet-threading-width: 2px;
}

/* Nord Color Palette */

:root {
  --nord0: #2E3440;
  --nord1: #3B4252;
  --nord2: #434C5E;
  --nord3: #4C566A;
  --nord4: #D8DEE9;
  --nord5: #E5E9F0;
  --nord6: #ECEFF4;
  --nord7: #8FBCBB;
  --nord8: #88C0D0;
  --nord9: #81A1C1;
  --nord10: #5E81AC;
  --nord11: #BF616A;
  --nord12: #D08770;
  --nord13: #EBCB8B;
  --nord14: #A3BE8C;
  --nord15: #B48EAD;
}


/* Adding the iA  writer font */

html,
body,
div,
textarea {
  font-family: "iA Writer Quattro S", "Inter", sans-serif;
}

/* Fixing the div line */

hr {
  margin-top: 0.8rem;
  margin-bottom: 2rem;
}

/* block ref adjustments—making it easier to see them */

.block-ref {
  font-style: italic;
  background-color: var(--ls-secondary-background-color);
}

/* Adding header style info */

.ls-block :is(h1, h2, h3, h4, h5)::after {
  margin-left: 0.5rem;
  font-size: 0.6rem;
  border-radius: 2px;
  padding: 2px 5px !important;
  background: var(--ls-tertiary-background-color);
  vertical-align: middle;
  opacity: 0.3;
}

.ls-block :is(h1, h2, h3, h4, h5):hover::after {
  opacity: 1;
}

.ls-block h1::after {
  content: "h1";
}

.ls-block h2::after {
  content: "h2";
}

.ls-block h3::after {
  content: "h3";
}

.ls-block h4::after {
  content: "h4";
}

.ls-block h5::after {
  content: "h5";
}

/* Color theme (partially done) */

.dark-theme,
html[data-theme='dark'] {
  --ls-primary-background-color: var(--nord0);
  --ls-secondary-background-color: var(--nord1);
  --ls-tertiary-background-color: var(--nord2);
  --ls-quaternary-background-color: var(--nord3);
  --ls-table-tr-even-background-color: var(--nord1);
  --ls-active-primary-color: var(--nord7);
  --ls-active-secondary-color: var(--nord4);
  --ls-block-properties-background-color: var(--nord0);
  --ls-page-properties-background-color: var(--nord0);
  --ls-block-ref-link-text-color: var(--nord13);
  --ls-search-background-color: linear-gradient(
    to right,
    #021c23 0,
    #021b21 200px,
    var(--nord0) 100%
  );
  --ls-border-color: var(--nord3);
  --ls-secondary-border-color: var(--nord2);
  --ls-guideline-color: var(--nord2);
  --ls-menu-hover-color: var(--ls-secondary-background-color);
  --ls-primary-text-color: var(--nord6);
  --ls-secondary-text-color: var(--nord4);
  --ls-title-text-color: var(--nord14);
  --ls-link-text-color: var(--nord8);
  --ls-link-text-hover-color: var(--ls-active-secondary-color);
  --ls-link-ref-text-color: var(--ls-link-text-color);
  --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
  --ls-tag-text-color: var(--ls-link-text-color);
  --ls-tag-text-hover-color: var(--ls-link-text-hover-color);
  --ls-slide-background-color: var(--ls-primary-background-color);
  --ls-block-bullet-border-color: var(--nord3);
  --ls-block-bullet-color: var(--nord6);
  --ls-block-highlight-color: var(--nord2);
  --ls-selection-background-color: var(--nord15);
  --ls-page-checkbox-color: var(--nord8);
  --ls-page-checkbox-border-color: var(--ls-primary-background-color);
  --ls-page-blockquote-color: var(--ls-primary-text-color);
  --ls-page-blockquote-bg-color: var(--ls-secondary-background-color);
  --ls-page-blockquote-border-color: var(--ls-border-color);
  --ls-page-inline-code-color: var(--ls-primary-text-color);
  --ls-page-inline-code-bg-color: var(--nord3);
  --ls-scrollbar-foreground-color: var(--nord3);
  --ls-scrollbar-background-color: rgba(30, 60, 67, 0.1);
  --ls-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.2);
  --ls-head-text-color: var(--ls-link-text-color);
  --ls-cloze-text-color: var(--nord14);
  --ls-icon-color: var(--ls-link-text-color);
  --ls-search-icon-color: var(--ls-link-text-color);
  --ls-a-chosen-bg: var(--ls-secondary-background-color);
  --ls-right-sidebar-code-bg-color: #04303c;
  --color-level-1: var(--ls-secondary-background-color);
  --color-level-2: var(--ls-tertiary-background-color);
  --color-level-3: var(--ls-quaternary-background-color);
  --color-level-4: #195d6c;
  --color-level-5: #266c7d;
  --color-level-6: #3a7e8e;
  --ls-block-bullet-active-color: var(--nord6);
}

mark {
  background: var(--nord13);
}

.light-theme,
html[data-theme='light'] {
  --ls-block-bullet-active-color: #000;
}