mirror of
https://github.com/def-peter/obsidian-aera-theme.git
synced 2026-07-22 05:00:27 +00:00
253 lines
7.8 KiB
CSS
253 lines
7.8 KiB
CSS
/* Aera - A quiet interface for clear thinking. */
|
|
.theme-light {
|
|
--color-base-00: #f7f8f6;
|
|
--color-base-05: #f4f5f3;
|
|
--color-base-10: #eff1ef;
|
|
--color-base-20: #e8ebe8;
|
|
--color-base-25: #dde2de;
|
|
--color-base-30: #d1d7d2;
|
|
--color-base-35: #c4cbc5;
|
|
--color-base-40: #aeb7b0;
|
|
--color-base-50: #8b958e;
|
|
--color-base-60: #68756d;
|
|
--color-base-70: #4e5b53;
|
|
--color-base-100: #28302c;
|
|
--background-primary: var(--color-base-00);
|
|
--background-secondary: var(--color-base-10);
|
|
--text-normal: var(--color-base-100);
|
|
--text-muted: var(--color-base-60);
|
|
--text-faint: var(--color-base-50);
|
|
--text-highlight-bg: rgba(191, 168, 68, 0.26);
|
|
--accent-h: 152.9;
|
|
--accent-s: 28.8%;
|
|
--accent-l: 34.7%;
|
|
}
|
|
|
|
.theme-dark {
|
|
--color-base-00: #171c19;
|
|
--color-base-05: #1a201c;
|
|
--color-base-10: #202720;
|
|
--color-base-20: #262e29;
|
|
--color-base-25: #2d3630;
|
|
--color-base-30: #364139;
|
|
--color-base-35: #414d45;
|
|
--color-base-40: #526058;
|
|
--color-base-50: #6d7b72;
|
|
--color-base-60: #95a39b;
|
|
--color-base-70: #bbc7c0;
|
|
--color-base-100: #dce4df;
|
|
--background-primary: var(--color-base-00);
|
|
--background-secondary: var(--color-base-10);
|
|
--text-normal: var(--color-base-100);
|
|
--text-muted: var(--color-base-60);
|
|
--text-faint: var(--color-base-50);
|
|
--text-highlight-bg: rgba(191, 168, 68, 0.28);
|
|
--accent-h: 148.6;
|
|
--accent-s: 31.1%;
|
|
--accent-l: 59%;
|
|
}
|
|
|
|
body {
|
|
--font-text-theme: "Avenir Next", Avenir, system-ui, -apple-system,
|
|
BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei",
|
|
"Noto Sans CJK SC", sans-serif;
|
|
--font-monospace-theme: ui-monospace, SFMono-Regular, Consolas,
|
|
"Liberation Mono", monospace;
|
|
--line-height-normal: 1.8;
|
|
--p-spacing: var(--size-4-3);
|
|
--heading-spacing: var(--size-4-8);
|
|
--bold-modifier: 200;
|
|
}
|
|
|
|
body {
|
|
--callout-padding: var(--size-4-3) var(--size-4-4);
|
|
--callout-title-padding: 0;
|
|
--callout-content-padding: var(--size-4-2) 0 0;
|
|
--metadata-gap: var(--size-2-3);
|
|
--metadata-property-padding: var(--size-2-3) var(--size-4-2);
|
|
--embed-padding: 0 0 0 var(--size-4-4);
|
|
--tag-padding-x: var(--size-2-3);
|
|
--tag-padding-y: var(--size-2-1);
|
|
}
|
|
|
|
body {
|
|
--inline-title-color: var(--text-normal);
|
|
--inline-title-font: var(--font-text-theme);
|
|
--inline-title-line-height: 1.25;
|
|
--inline-title-size: 2em;
|
|
--inline-title-weight: 650;
|
|
--h1-color: var(--text-normal);
|
|
--h2-color: var(--text-normal);
|
|
--h3-color: var(--text-normal);
|
|
--h4-color: var(--text-normal);
|
|
--h5-color: var(--text-normal);
|
|
--h6-color: var(--text-muted);
|
|
--h1-line-height: 1.28;
|
|
--h2-line-height: 1.35;
|
|
--h3-line-height: 1.4;
|
|
--h4-line-height: 1.45;
|
|
--h5-line-height: 1.5;
|
|
--h6-line-height: 1.5;
|
|
--h1-size: 1.85em;
|
|
--h2-size: 1.42em;
|
|
--h3-size: 1.16em;
|
|
--h4-size: 1.05em;
|
|
--h5-size: 1em;
|
|
--h6-size: 0.9em;
|
|
--h1-weight: 650;
|
|
--h2-weight: 650;
|
|
--h3-weight: 600;
|
|
--h4-weight: 600;
|
|
--h5-weight: 600;
|
|
--h6-weight: 600;
|
|
}
|
|
|
|
body {
|
|
--bold-color: var(--text-normal);
|
|
--italic-color: var(--text-normal);
|
|
--link-color: var(--text-accent);
|
|
--link-color-hover: var(--text-accent-hover);
|
|
--link-decoration: none;
|
|
--link-decoration-hover: underline;
|
|
--link-decoration-thickness: 1px;
|
|
--link-weight: 500;
|
|
--link-unresolved-color: var(--text-muted);
|
|
--link-unresolved-opacity: 1;
|
|
--link-unresolved-decoration-style: dotted;
|
|
--link-unresolved-decoration-color: var(--text-faint);
|
|
--link-external-color: var(--text-accent);
|
|
--link-external-color-hover: var(--text-accent-hover);
|
|
--link-external-decoration: none;
|
|
--link-external-decoration-hover: underline;
|
|
}
|
|
|
|
body {
|
|
--list-indent: 2em;
|
|
--list-indent-editing: 0.75em;
|
|
--list-spacing: var(--size-2-1);
|
|
--list-marker-color: var(--text-muted);
|
|
--list-marker-color-hover: var(--text-accent);
|
|
--list-marker-color-collapsed: var(--text-accent);
|
|
--list-bullet-border: 1px solid var(--text-muted);
|
|
--list-bullet-radius: 50%;
|
|
--list-bullet-size: 5px;
|
|
--checkbox-radius: 4px;
|
|
--checkbox-size: 16px;
|
|
--checkbox-marker-color: var(--text-on-accent);
|
|
--checkbox-color: var(--interactive-accent);
|
|
--checkbox-color-hover: var(--interactive-accent-hover);
|
|
--checkbox-border-color: var(--text-faint);
|
|
--checkbox-border-color-hover: var(--text-muted);
|
|
--checklist-done-decoration: line-through;
|
|
--checklist-done-color: var(--text-faint);
|
|
}
|
|
|
|
body {
|
|
--blockquote-background-color: transparent;
|
|
--blockquote-border-thickness: 2px;
|
|
--blockquote-border-color: var(--text-accent);
|
|
--blockquote-font-style: normal;
|
|
--blockquote-color: var(--text-muted);
|
|
--hr-color: var(--background-modifier-border);
|
|
--hr-thickness: 1px;
|
|
}
|
|
|
|
body {
|
|
--code-background: var(--background-secondary);
|
|
--code-white-space: pre;
|
|
--code-size: 0.88em;
|
|
--code-normal: var(--text-normal);
|
|
--code-comment: var(--text-faint);
|
|
--code-function: var(--color-blue);
|
|
--code-important: var(--color-orange);
|
|
--code-keyword: var(--text-accent);
|
|
--code-operator: var(--text-muted);
|
|
--code-property: var(--color-cyan);
|
|
--code-punctuation: var(--text-muted);
|
|
--code-string: var(--color-orange);
|
|
--code-tag: var(--color-red);
|
|
--code-value: var(--color-purple);
|
|
}
|
|
|
|
/* Obsidian has no code-block border or radius variable. */
|
|
.markdown-rendered pre {
|
|
border: var(--border-width) solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
body {
|
|
--callout-border-width: 1px;
|
|
--callout-border-opacity: 0.25;
|
|
--callout-radius: 6px;
|
|
--callout-blend-mode: normal;
|
|
--callout-title-size: var(--font-small);
|
|
--callout-title-weight: 600;
|
|
--callout-content-background: transparent;
|
|
}
|
|
|
|
body {
|
|
--table-background: transparent;
|
|
--table-border-width: 1px;
|
|
--table-border-color: var(--background-modifier-border);
|
|
--table-cell-vertical-alignment: top;
|
|
--table-white-space: normal;
|
|
--table-header-background: var(--background-secondary);
|
|
--table-header-background-hover: var(--background-modifier-hover);
|
|
--table-header-border-width: 1px;
|
|
--table-header-border-color: var(--background-modifier-border);
|
|
--table-header-size: var(--font-small);
|
|
--table-header-weight: 600;
|
|
--table-header-color: var(--text-muted);
|
|
--table-line-height: 1.5;
|
|
--table-text-size: var(--font-small);
|
|
--table-text-color: var(--text-normal);
|
|
--table-row-background-hover: var(--background-modifier-hover);
|
|
--table-selection-border-color: var(--interactive-accent);
|
|
--table-selection-border-width: 1px;
|
|
--table-selection-border-radius: 4px;
|
|
}
|
|
|
|
body {
|
|
--metadata-background: transparent;
|
|
--metadata-border-color: transparent;
|
|
--metadata-border-radius: 0;
|
|
--metadata-border-width: 0px;
|
|
--metadata-divider-color: var(--background-modifier-border);
|
|
--metadata-divider-color-hover: var(--background-modifier-border-hover);
|
|
--metadata-divider-color-focus: var(--interactive-accent);
|
|
--metadata-divider-width: 1px;
|
|
--metadata-property-radius: 4px;
|
|
--metadata-property-radius-hover: 4px;
|
|
--metadata-property-radius-focus: 4px;
|
|
--metadata-label-font-size: var(--font-smallest);
|
|
--metadata-label-font-weight: 500;
|
|
--metadata-label-text-color: var(--text-faint);
|
|
--metadata-input-font-size: var(--font-small);
|
|
--metadata-input-text-color: var(--text-normal);
|
|
--metadata-input-background: transparent;
|
|
}
|
|
|
|
body {
|
|
--embed-background: transparent;
|
|
--embed-border-start: 2px solid var(--background-modifier-border);
|
|
--embed-border-end: 0;
|
|
--embed-border-top: 0;
|
|
--embed-border-bottom: 0;
|
|
--embed-font-style: normal;
|
|
--footnote-size: var(--font-smallest);
|
|
}
|
|
|
|
body {
|
|
--tag-size: var(--font-smallest);
|
|
--tag-color: var(--text-accent);
|
|
--tag-color-hover: var(--text-accent-hover);
|
|
--tag-decoration: none;
|
|
--tag-decoration-hover: none;
|
|
--tag-background: var(--background-secondary);
|
|
--tag-background-hover: var(--background-modifier-hover);
|
|
--tag-border-color: var(--background-modifier-border);
|
|
--tag-border-color-hover: var(--background-modifier-border-hover);
|
|
--tag-border-width: 1px;
|
|
--tag-radius: 4px;
|
|
--tag-weight: 500;
|
|
}
|