obsidian.css

.theme-dark {
  --red-100: #f2b5b6;
  --red-200: #e98485;
  --red-300: #e05354;
  --red-400: #d72223;
  --red-500: #d3090b;
  --red-600: #be080a;
  --red-700: #940608;
  --red-800: #6a0506;
  --red-900: #3f0303;

  --yellow-100: #fce9b6;
  --yellow-200: #fada86;
  --yellow-300: #f8cb56;
  --yellow-400: #f6bc25;
  --yellow-500: #f5b40d;
  --yellow-500-R: 245;
  --yellow-500-G: 180;
  --yellow-500-B: 13;
  --yellow-600: #dda20c;
  --yellow-700: #ac7e09;
  --yellow-800: #7b5a07;
  --yellow-900: #4a3604;

  --primary-100: #f3e6ed;
  --primary-200: #e1bfd1;
  --primary-300: #cf99b6;
  --primary-400: #ab4d7f;
  --primary-450: #ab4d7f;
  --primary-500: #870048;
  --primary-500-R: 135;
  --primary-500-G: 0;
  --primary-500-B: 72;
  --primary-500-H: 328;
  --primary-500-S: 100;
  --primary-500-L: 26.5;
  --primary-600: #7a0041;
  --primary-700: #51002b;
  --primary-800: #3d0020;
  --primary-900: #290016;

  --gray-100: #f6f7f5;
  --gray-200: #eaeae7;
  --gray-300: #dcd5d4;
  --gray-400: #c2bdbd;
  --gray-500: #9f9697;
  --gray-600: #706a69;
  --gray-700: #534e4f;
  --gray-800: #3c383b;
  --gray-900: #2e2c2f;
  --gray-1000: #181517;
  --gray-1100: #0c0c0c;

  --background-modifier-border-focus: var(--primary-600);
  --table-header-background-hover: var(--primary-800);
  --table-header-color: var(--gray-200);
  --table-row-background-hover: var(--gray-900);
  --divider-color: var(--gray-900);
  --background-primary: var(--gray-1100);
  --background-primary-alt: var(--gray-1000);
  --background-secondary: var(--gray-1100);
  --background-secondary-alt: var(--gray-1000);
  --background-modifier-message: var(--gray-800);
  --background-modifier-border: var(--gray-800);
  --background-modifier-form-field: var(--gray-1100);
  --background-modifier-form-field-highlighted: var(--gray-1000);
  --background-modifier-cover: var(--gray-1000);
  --text-accent: var(--primary-400);
  --text-accent-hover: var(--primary-400);
  --text-normal: var(--gray-300);
  --text-muted: var(--gray-600);
  --text-muted-rgb: 112, 106, 105;
  --text-faint: var(--gray-500);
  --text-highlight-bg: var(--yellow-800);
  --text-selection: rgba(
    var(--yellow-500-R),
    var(--yellow-500-G),
    var(--yellow-500-B),
    0.5
  );
  --text-on-accent: var(--gray-100);
  --interactive-accent: var(--primary-500);
  --interactive-accent-rgb: var(--primary-500-R) var(--primary-500-G)
    var(--primary-500-B);
  --interactive-hover: var(--primary-800);
  --interactive-accent-hover: var(--primary-400);
  --scrollbar-active-thumb-bg: var(--primary-700);
  --text-error: var(--red-400);

  /* can't find examples below */

  /* --interactive-success: red;
  --background-modifier-success: #197300;
  --background-modifier-error: #3d0000;
  --background-modifier-error-rgb: 61, 0, 0;
  --background-modifier-error-hover: #470000;
  --text-error-hover: #990000;
  --text-highlight-bg-active: white;
  --interactive-normal: blue;
   */
}

.nav-file-title.is-active,
.nav-folder-title.is-active,
body:not(.is-grabbing) .nav-file-title:hover,
body:not(.is-grabbing) .nav-folder-title:hover {
  background: var(--primary-700);
}

.markdown-preview-view blockquote {
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
  background: var(--gray-1000);
  border-color: var(--primary-700);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
}

.cm-s-obsidian span.cm-inline-code {
  color: var(--primary-400);
}

.markdown-preview-view code {
  background: var(--gray-1000);
  color: var(--primary-400);
}

.markdown-preview-view a {
  color: var(--yellow-600);
}

.markdown-preview-view h1 {
  margin-bottom: 1.25rem;
}

.markdown-preview-view h2 {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gray-700);
}

.markdown-preview-view h3,
.markdown-preview-view h2 {
  margin-top: 1.5rem;
}

.markdown-preview-view ul,
.markdown-preview-view ol {
  margin: 1.5rem 1rem;
  padding: 0;
  list-style-position: outside;
}

.cm-s-obsidian span.cm-url {
  color: var(--gray-500);
}

.modal {
  border-color: var(--gray-800);
  overflow: hidden;
}

.prompt {
  border: 1px solid var(--gray-800);
}

.modal-bg {
  background: rgba(0, 0, 0, 0.7);
}

.popover.hover-popover:hover {
  border-bottom: 1px solid var(--primary-600);
}

/* ====== Tag Pills ======== */
.tag:not(.token) {
  --lighten-by: 70;

  background-color: rgba(
    var(--primary-500-R),
    var(--primary-500-G),
    var(--primary-500-B),
    0.18
  );
  border: 2px solid
    hsla(
      var(--primary-500-H),
      calc(var(--primary-500-S) * 1%),
      calc((var(--primary-500-L) + 30) * 1%),
      0.3
    );
  color: hsl(
    var(--primary-500-H),
    calc(var(--primary-500-S) * 1%),
    calc((var(--primary-500-L) + 70) * 1%)
  );
  font-size: 11px;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  border-radius: 14px;
}

.tag:not(.token):hover {
  color: white;
  background-color: rgba(
    var(--primary-500-R),
    var(--primary-500-G),
    var(--primary-500-B),
    0.4
  );
}

.tag[href^="#obsidian"] {
  background-color: #4d3ca6;
}
.tag[href^="#important"] {
  background-color: red;
}
.tag[href^="#complete"] {
  background-color: green;
}
.tag[href^="#inprogress"] {
  background-color: orange;
}

.is-active .widget-icon {
  fill: currentColor;
}

/* Table */
:root {
  --table-border-radius: 8px;
}

.markdown-preview-view table {
  border-collapse: collapse; /* IE7 and lower */
  border-spacing: 0;
  margin: 2.5rem 0;
  font-size: 0.9em;
  border-collapse: separate;
  border-radius: var(--table-border-radius);
  width: 100%;
}

.markdown-preview-view table * {
  border-color: transparent;
}

.markdown-preview-view table thead * {
  border-color: transparent;
}

.markdown-preview-view th:first-child {
  border-radius: var(--table-border-radius) 0 0 0;
}

.markdown-preview-view th:last-child {
  border-radius: 0 var(--table-border-radius) 0 0;
}

.markdown-preview-view th:only-child {
  border-radius: var(--table-border-radius) var(--table-border-radius) 0 0;
}

.markdown-preview-view thead tr {
  --lighten-by: 70;

  background-color: var(--primary-700);
  color: hsl(
    var(--primary-500-H),
    calc(var(--primary-500-S) * 1%),
    calc((var(--primary-500-L) + 70) * 1%)
  );
}

.markdown-preview-view th,
.markdown-preview-view td {
  padding: 0.5rem 15px;
}

/* The transitions just make the app feel slower */
body * {
  transition: none !important;
}

.markdown-preview-view ol ol,
ul,
.markdown-preview-view ul ol,
ul {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.markdown-preview-view ol p,
.markdown-preview-view ul p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.suggestion-item.is-selected {
  background: var(--primary-600);
}

.suggestion-item.is-selected .suggestion-content {
  color: white;
}

.suggestion-item.is-selected .suggestion-note {
  color: var(--gray-500);
}

.modal button:not(.mod-cta):not(.mod-warning) {
  background-color: var(--gray-800);
}

.mod-root .workspace-tab-header.is-active,
.mod-root .workspace-tab-header.is-active + .workspace-leaf .view-header-title,
.mod-root .workspace-tab-header.is-active .workspace-tab-header-inner-icon {
  color: var(--gray-300) !important;
}

.mod-root .workspace-tab-header:not(.is-active) + .workspace-leaf {
  opacity: 0.7;
}

.markdown-rendered table,
.markdown-rendered td {
  border-collapse: collapse;
}

.markdown-rendered thead tr > th {
  border: none;
}

.markdown-preview-view tbody tr:nth-of-type(odd) {
  background-color: #231f21;
}
.markdown-preview-view tbody tr:nth-of-type(even) {
  background-color: var(--gray-1000);
}

.markdown-preview-view tbody tr:hover:nth-of-type(odd),
.markdown-preview-view tbody tr:hover:nth-of-type(even) {
  background-color: var(--gray-800);
}

.markdown-preview-view tbody td {
  border: none;
}

.tag {
  border-color: var(--primary-700) !important;
}