An Obsidian theme

Igneous.css

/*

IMPORTANT: Change the fonts on lines 31-35 to make this work the way you want!

*/

:root {
  --dark0: #2e3440;
  --dark1: #3b4252;
  --dark2: #434c5e;
  --dark3: #4c566a;

  --light0: #d8dee9;
  --light1: #e5e9f0;
  --light2: #eceff4;
  --light3: #ffffff;

  --frost0: #8fbcbb;
  --frost1: #88c0d0;
  --frost2: #81a1c1;
  --frost3: #5e81ac;

  --color1: #da4453;
  --color2: #f6bb42;
  --color3: #8cc152;
  --color3b: #a0d468;
  --color4: #3bafda;
  --color5: #967adc;
  --color6: #ec87c0;

  --font-monospace: MonoLisa, 'Source Code Pro', monospace;
  --font-interface: 'Avenir', 'Avenir Next', sans-serif;
  --font-main: mr-eaves-modern, sans-serif;
  --font-primary-headers: freight-display-pro, serif;
  --font-secondary-headers: mr-eaves-modern, sans-serif;
}

.theme-dark {
  --background-primary: var(--dark0);
  --background-primary-alt: var(--dark0);
  --background-secondary: var(--dark1);
  --background-secondary-alt: var(--dark2);
  --text-normal: var(--light2);
  --text-faint: var(--light0);
  --text-muted: var(--light1);
  --text-title-h1: var(--color1);
  --text-title-h2: var(--color2);
  --text-title-h3: var(--color3);
  --text-title-h4: var(--color4);
  --text-title-h5: var(--color5);
  --text-title-h6: var(--color6);
  --text-link: var(--frost0);
  --text-a: var(--color3);
  --text-a-hover: var(--color3b);
  --text-mark: var(--frost3);
  --pre-code: var(--dark1);
  --text-highlight-bg: var(--dark3);
  --interactive-accent: var(--frost0);
  --interactive-before: var(--dark3);
  --background-modifier-border: var(--dark2);
  --text-accent: var(--color3);
  --interactive-accent-rgb: var(--color3);
  --inline-code: var(--color6);
  --code-block: var(--color6);
  --vim-cursor: var(--color3);
  --text-selection: var(--dark3);
  --checkbox-color: var(--color6);
}

.theme-light {
  --background-primary: var(--light3);
  --background-primary-alt: var(--light3);
  --background-secondary: var(--light2);
  --background-secondary-alt: var(--light1);
  --text-normal: var(--dark1);
  --text-faint: var(--dark3);
  --text-muted: var(--dark2);
  --text-title-h1: var(--color1);
  --text-title-h2: var(--color5);
  --text-title-h3: var(--color3);
  --text-title-h4: var(--color4);
  --text-title-h5: var(--color2);
  --text-title-h6: var(--color6);
  --text-link: var(--frost0);
  --text-a: var(--color3);
  --text-a-hover: var(--color3b);
  --text-mark: var(--frost3);
  --pre-code: var(--light2);
  --text-highlight-bg: var(--light0);
  --interactive-accent: var(--frost0);
  --interactive-before: var(--light0);
  --background-modifier-border: var(--light1);
  --text-accent: var(--color3);
  --interactive-accent-rgb: var(--color3);
  --inline-code: var(--color6);
  --code-block: var(--color6);
  --vim-cursor: var(--color3);
  --text-selection: var(--light0);
  --checkbox-color: var(--color6);
}

.theme-dark code[class*='language-'],
.theme-dark pre[class*='language-'],
.theme-light code[class*='language-'],
.theme-light pre[class*='language-'] {
  text-shadow: none !important;
  background-color: var(--pre-code) !important;
}

.graph-view.color-circle,
.graph-view.color-fill-highlight,
.graph-view.color-line-highlight {
  color: var(--interactive-accent-rgb) !important;
}
.graph-view.color-text {
  color: var(--text-a-hover) !important;
}
/*
.graph-view.color-fill
{
    color: var(--background-secondary);
}
.graph-view.color-line
{
  color: var(--background-modifier-border);
}
*/

html,
body {
  font-size: 20px !important;
  font-family: var(--font-interface);
}

strong {
  font-weight: 600 !important;
}

a,
.cm-hmd-internal-link {
  color: var(--text-a) !important;
  text-decoration: none !important;
}

a:hover,
.cm-hmd-internal-link:hover,
.cm-url {
  color: var(--text-a-hover) !important;
  text-decoration: none !important;
}

mark {
  background-color: var(--text-highlight-bg) !important;
}

.view-header {
  border-right: 2px solid var(--background-secondary) !important;
}

.view-actions a {
  color: var(--text-normal) !important;
}

.view-actions a:hover {
  color: var(--text-a) !important;
}

.HyperMD-codeblock-bg {
  background-color: var(--pre-code) !important;
}

.HyperMD-codeblock {
  line-height: 1.4em !important;
  color: var(--code-block) !important;
  font-size: 16px !important;
  /* TKTK */
}

.HyperMD-codeblock-begin {
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
}

.HyperMD-codeblock-end {
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

th {
  font-weight: 600 !important;
}

thead {
  border-bottom: 2px solid var(--background-modifier-border) !important;
}

.HyperMD-table-row {
  line-height: normal !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  /* background-color: var(--pre-code) !important; */
}

.HyperMD-table-row-0 {
  /* padding-top: 4px !important; */
}

.CodeMirror-foldgutter-folded,
.is-collapsed .nav-folder-collapse-indicator {
  color: var(--text-a) !important;
}

.markdown-preview-view .internal-link.is-unresolved {
  color: var(--color4) !important;
  opacity: 0.8;
}

.nav-file-tag {
  color: var(--text-a) !important;
}

.is-active .nav-file-title {
  color: var(--text-a) !important;
  background-color: var(--background-primary-alt) !important;
}

.nav-file-title {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.HyperMD-list-line {
  padding-top: 0 !important;
}

.CodeMirror-sizer {
  border-right: 0;
}

/* Markdown Characters */

.CodeMirror-linenumber,
.cm-formatting {
  font-family: var(--font-monospace) !important;
  font-size: 16px;
  color: var(--text-mark) !important;
}

.cm-hashtag,
.search-result-file-matched-text {
  color: var(--frost2) !important;
}

.markdown-preview-section,
.markdown-source-view {
  font-family: var(--font-main) !important;
  font-size: 22px;
  line-height: 1.3;
}

.markdown-preview-section pre code,
.markdown-preview-section code {
  font-size: 0.75em !important;
  background-color: var(--pre-code) !important;
}

.markdown-preview-section pre code {
  padding: 4px !important;
  line-height: 1.4em !important;
  display: block !important;
  color: var(--code-block) !important;
}

.markdown-preview-section code {
  color: var(--inline-code) !important;
}

.markdown-preview-view blockquote {
  border: none;
  border-left: 5px solid var(--background-modifier-border);
  padding: 10px 20px;
  margin: 0;
}

.cm-s-obsidian,
.cm-inline-code {
  -webkit-font-smoothing: auto !important;
}

.cm-inline-code {
  color: var(--inline-code) !important;
  background-color: var(--pre-code) !important;
  font-size: 16px !important;
  padding: 1px !important;
}

.workspace-leaf-header-title {
  font-weight: 600 !important;
}

.side-dock-title {
  padding-top: 15px !important;
  font-size: 20px !important;
}

.side-dock-ribbon-tab:hover,
.side-dock-ribbon-action:hover,
.side-dock-ribbon-action.is-active:hover,
.nav-action-button:hover,
.side-dock-collapse-btn:hover {
  color: var(--text-a);
}

.side-dock {
  border-right: 0 !important;
}

.cm-s-obsidian,
.markdown-preview-view {
  /* padding-left: 10px !important; */
  padding-right: 10px !important;
}

/* vertical resize-handle */
.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
.workspace-split.mod-left-split > .workspace-leaf-resize-handle,
.workspace-split.mod-right-split > .workspace-leaf-resize-handle {
  width: 1px !important;
  background-color: var(--background-secondary-alt);
}

/* horizontal resize-handle */
.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle {
  height: 1px !important;
  background-color: var(--background-secondary-alt);
}

/* Remove vertical split padding */
.workspace-split.mod-root .workspace-split.mod-vertical .workspace-leaf-content,
.workspace-split.mod-vertical > .workspace-split,
.workspace-split.mod-vertical > .workspace-leaf,
.workspace-tabs {
  padding-right: 0px;
}

.markdown-embed-title {
  font-weight: 600 !important;
}

.markdown-embed {
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
}

/* Preview Mode Headers */

.markdown-preview-section h1 {
  font-family: var(--font-primary-headers) !important;
  font-weight: 500 !important;
}

.markdown-preview-section h1,
.markdown-preview-section h2,
.markdown-preview-section h3,
.markdown-preview-section h4,
.markdown-preview-section h5,
.markdown-preview-section h6 {
  font-weight: 700;
  line-height: 1;
}

/* End Preview Mode Headers */

.cm-header-1,
.markdown-preview-section h1 {
  font-size: 70px;
  line-height: 1;
  margin: 30px 0;
  color: var(--text-title-h1) !important;
}

.cm-header-2,
.markdown-preview-section h2 {
  font-size: 40px;
  margin: 30px 0 20px;
  color: var(--text-title-h2) !important;
}

.cm-header-3,
.markdown-preview-section h3 {
  font-size: 34px;
  color: var(--text-title-h3) !important;
}

.cm-header-4,
.markdown-preview-section h4 {
  font-size: 30px;
  color: var(--text-title-h4) !important;
}

.cm-header-5,
.cm-header-6,
.markdown-preview-section h5,
.markdown-preview-section h6 {
  font-size: 24px;
  color: var(--text-title-h5) !important;
}

.cm-header-6,
.markdown-preview-section h6 {
  font-size: 20px;
  color: var(--text-title-h6) !important;
}

/* Editor Mode Headers */
.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6 {
  font-family: var(--font-secondary-headers);
  line-height: 1;
}

.markdown-source-view span.cm-formatting-header {
  font-weight: 300;
  color: var(--text-mark) !important;
}

.cm-header-1 {
  font-size: 52px;
}

.cm-header-2 {
  font-size: 46px;
}

.cm-header-3 {
  font-size: 40px;
}

.cm-header-4 {
  font-size: 34px;
}

.cm-header-5 {
  font-size: 28px;
}

.cm-header-6 {
  font-size: 22px;
}

/* End Editor Mode Headers */

.suggestion-item.is-selected {
  background-color: var(--background-secondary);
}

.empty-state-container:hover {
  background-color: var(--background-secondary-alt);
  border: 5px solid var(--interactive-accent) !important;
}

.checkbox-container {
  background-color: var(--interactive-before);
}

.checkbox-container:after {
  background-color: var(--background-secondary-alt);
}

.notice {
  background-color: var(--background-secondary-alt) !important;
  color: var(--text-normal) !important;
}

.mod-cta,
button.mod-cta {
  background-color: var(--background-secondary-alt);
  color: var(--text-normal) !important;
  font-weight: 600 !important;
}

.mod-cta:hover {
  background-color: var(--interactive-before) !important;
  font-weight: 600 !important;
}

.CodeMirror-cursor {
  background-color: var(--vim-cursor) !important;
  opacity: 60% !important;
}

.contains-task-list {
  padding: 0 1.3em;
}

ul,
ol {
  padding: 0 0.8em;
}

ul li,
ol li {
  margin-bottom: 8px;
}

input.task-list-item-checkbox {
  border: 1px solid var(--checkbox-color);
  appearance: none;
  -webkit-appearance: none;
  filter: none !important; /* This is needed for color correctness */
}

input.task-list-item-checkbox:checked {
  background-color: var(--checkbox-color) !important;
  box-shadow: inset 0 0 0 2px var(--background-primary);
}

.mermaid .note {
  fill: var(--checkbox-color) !important;
}