mirror of
https://github.com/double-tilde/old-world-obsidian.git
synced 2026-07-22 04:00:24 +00:00
159 lines
4.2 KiB
CSS
159 lines
4.2 KiB
CSS
body,
|
|
.theme-dark {
|
|
/* hex colors variables */
|
|
--color-red: #ea83a5;
|
|
--color-orange: #f5a191;
|
|
--color-yellow: #e6b99d;
|
|
--color-green: #90b99f;
|
|
--color-cyan: #85b5ba;
|
|
--color-blue: #92a2d5;
|
|
--color-purple: #aca1cf;
|
|
--color-pink: #e29eca;
|
|
|
|
/* rgb colors variables */
|
|
--color-red-rgb: 234, 131, 165;
|
|
--color-orange-rgb: 245, 161, 145;
|
|
--color-yellow-rgb: 230, 185, 157;
|
|
--color-green-rgb: 144, 185, 159;
|
|
--color-cyan-rgb: 133, 181, 186;
|
|
--color-blue-rgb: 146, 162, 213;
|
|
--color-purple-rgb: 172, 161, 207;
|
|
--color-pink-rgb: 226, 158, 202;
|
|
|
|
/* primary */
|
|
--primary: #161617;
|
|
--primary-alt: #27272a;
|
|
--secondary: #131314;
|
|
--secondary-alt: #27272a;
|
|
--modifier-hover: #313134;
|
|
--modifier-active-hover: #313134;
|
|
/* --background-modifier-border */
|
|
/* --background-modifier-border-hover */
|
|
/* --background-modifier-border-focus */
|
|
/* --background-modifier-error-rgb */
|
|
/* --background-modifier-error */
|
|
/* --background-modifier-error-hover */
|
|
/* --background-modifier-success-rgb */
|
|
/* --background-modifier-success */
|
|
/* --background-modifier-message */
|
|
/* --background-modifier-form-field */
|
|
|
|
/* primary rgb */
|
|
--primary-rgb: 22, 22, 23;
|
|
--primary-alt-rgb: 39, 39, 42;
|
|
--secondary-rgb: 19, 19, 20;
|
|
--secondary-alt-rgb: 39, 39, 42;
|
|
--modifier-hover-rgb: 39, 39, 42;
|
|
--modifier-active-hover-rgb: 39, 39, 42;
|
|
|
|
/* surface colors variables */
|
|
--background-primary: var(--primary);
|
|
--background-primary-alt: var(--primary-alt);
|
|
--background-secondary: var(--secondary);
|
|
--background-secondary-alt: var(--secondary-alt);
|
|
--background-modifier-hover: var(--modifier-hover);
|
|
--background-modifier-active-hover: var(--modifier-active-hover);
|
|
|
|
/* text colors variables */
|
|
--text-normal: #c9c7cd;
|
|
--text-muted: #9f9ca6;
|
|
--text-faint: #8b8693;
|
|
--text-success: var(--color-green);
|
|
--text-warning: var(--color-yellow);
|
|
--text-error: var(--color-red);
|
|
/* --text-on-accent */
|
|
/* --text-on-accent-inverted */
|
|
/* --text-accent */
|
|
/* --text-accent-hover */
|
|
--italic-color: var(--color-pink);
|
|
--bold-color: var(--color-pink);
|
|
|
|
/* nav text */
|
|
--nav-item-color-hover: var(--color-orange);
|
|
--nav-item-color-active: var(--color-orange);
|
|
--nav-item-color-selected: var(--color-orange);
|
|
|
|
/* nav icon color */
|
|
--icon-color-hover: var(--color-blue);
|
|
--icon-color-active: var(--color-blue);
|
|
--icon-color-focused: var(--color-blue);
|
|
|
|
/* heading colors variables */
|
|
--h1-color: var(--color-yellow);
|
|
--h2-color: var(--color-blue);
|
|
--h3-color: var(--color-pink);
|
|
--h4-color: var(--color-orange);
|
|
--h5-color: var(--color-green);
|
|
--h6-color: var(--color-red);
|
|
|
|
/* radius */
|
|
--radius-s: 4px;
|
|
--radius-m: 8px;
|
|
--radius-l: 12px;
|
|
--input-radius: 4px;
|
|
--tab-radius-active: 4px;
|
|
--checkbox-radius: 2px;
|
|
--toggle-radius: 16px;
|
|
--toggle-thumb-radius: 16px;
|
|
--slider-thumb-radius: 16px;
|
|
|
|
/* accent hsl variables */
|
|
--accent-h: 10;
|
|
--accent-s: 83%;
|
|
--accent-l: 77%;
|
|
|
|
/* accent color */
|
|
--color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
|
|
--interactive-accent: var(--color-accent);
|
|
|
|
/* link colors */
|
|
--link-accent-h: 226;
|
|
--link-accent-s: 44%;
|
|
--link-accent-l: 70%;
|
|
--link-accent: hsl(var(--link-accent-h), var(--link-accent-s), var(--link-accent-l));
|
|
--link-color: var(--link-accent);
|
|
|
|
/* code */
|
|
--code-background: rgba(var(--primary-alt-rgb), 0.3);
|
|
--code-normal: var(--text-normal);
|
|
--code-comment: var(--text-faint);
|
|
--code-function: var(--color-yellow);
|
|
--code-important: var(--color-orange);
|
|
--code-keyword: var(--color-pink);
|
|
--code-operator: var(--color-orange);
|
|
--code-property: var(--color-blue);
|
|
--code-punctuation: var(--text-muted);
|
|
--code-string: var(--color-green);
|
|
--code-tag: var(--color-red);
|
|
--code-value: var(--color-purple);
|
|
|
|
/* table colors */
|
|
--table-background: rgba(var(--primary-alt-rgb), 0.3);
|
|
--table-header-background: rgba(var(--primary-alt-rgb), 0.8);
|
|
|
|
/* extra */
|
|
--text-highlight-bg: rgba(var(--color-yellow-rgb), 0.5);
|
|
--caret-color: var(--color-yellow);
|
|
--hr-thickness: 3px;
|
|
}
|
|
|
|
/* :horizontal rules */
|
|
hr {
|
|
border-top: var(--hr-thickness) solid;
|
|
border-color: var(--hr-color);
|
|
}
|
|
|
|
/* images */
|
|
img {
|
|
border-radius: var(--radius-s)
|
|
}
|
|
|
|
/* maths */
|
|
.MathJax {
|
|
color: var(--color-orange);
|
|
}
|
|
|
|
/* table text */
|
|
table th div {
|
|
color: var(--color-yellow);
|
|
}
|