mirror of
https://github.com/krios2146/obsidian-theme-github.git
synced 2026-07-22 03:20:23 +00:00
Merge pull request #8 from krios2146/develop
Add Light theme & variables
This commit is contained in:
Vladimir Kidyaev
GitHub
commit
4066703d64
2 changed files with 142 additions and 55 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "GitHub theme",
|
||||
"version": "1.0.1",
|
||||
"version": "1.1.0",
|
||||
"minAppVersion": "1.0.0",
|
||||
"author": "@krios2146",
|
||||
"authorUrl": "https://github.com/krios2146"
|
||||
|
|
|
|||
195
theme.css
195
theme.css
|
|
@ -124,12 +124,12 @@ body {
|
|||
--graph-node-attachment: var(--color-yellow);
|
||||
/* Headings */
|
||||
--heading-formatting: var(--text-faint);
|
||||
--h1-color: #7ee787;
|
||||
--h2-color: #7ee787;
|
||||
--h3-color: #7ee787;
|
||||
--h4-color: #7ee787;
|
||||
--h5-color: #7ee787;
|
||||
--h6-color: #7ee787;
|
||||
--h1-color: var(--h1-color-theme);
|
||||
--h2-color: var(--h2-color-theme);
|
||||
--h3-color: var(--h3-color-theme);
|
||||
--h4-color: var(--h4-color-theme);
|
||||
--h5-color: var(--h5-color-theme);
|
||||
--h6-color: var(--h6-color-theme);
|
||||
--h1-font: inherit;
|
||||
--h2-font: inherit;
|
||||
--h3-font: inherit;
|
||||
|
|
@ -192,8 +192,8 @@ body {
|
|||
--clickable-icon-radius: var(--radius-s);
|
||||
/* Indentation guide */
|
||||
--indentation-guide-width: 1px;
|
||||
--indentation-guide-color: rgba(var(--mono-rgb-100), 0.12);
|
||||
--indentation-guide-color-active: rgba(var(--mono-rgb-100), 0.3);
|
||||
--indentation-guide-color: rgba(var(--mono-rgb-0), 0.12);
|
||||
--indentation-guide-color-active: rgba(var(--mono-rgb-0), 0.3);
|
||||
/* Inline title */
|
||||
--inline-title-color: var(--h1-color);
|
||||
--inline-title-font: var(--h1-font);
|
||||
|
|
@ -242,7 +242,7 @@ body {
|
|||
/* Lists */
|
||||
--list-indent: 2em;
|
||||
--list-spacing: 0.075em;
|
||||
--list-marker-color: var(--text-faint);
|
||||
--list-marker-color: var(--text-normal);
|
||||
--list-marker-color-hover: var(--text-muted);
|
||||
--list-marker-color-collapsed: var(--text-accent);
|
||||
--list-bullet-border: none;
|
||||
|
|
@ -303,9 +303,9 @@ body {
|
|||
--ribbon-width: 44px;
|
||||
--ribbon-padding: var(--size-4-2) var(--size-4-1) var(--size-4-3);
|
||||
/* Scrollbars */
|
||||
--scrollbar-active-thumb-bg: rgba(var(--mono-rgb-100), 0.2);
|
||||
--scrollbar-bg: rgba(var(--mono-rgb-100), 0.05);
|
||||
--scrollbar-thumb-bg: rgba(var(--mono-rgb-100), 0.1);
|
||||
--scrollbar-active-thumb-bg: rgba(var(--mono-rgb-0), 0.2);
|
||||
--scrollbar-bg: rgba(var(--mono-rgb-0), 0.05);
|
||||
--scrollbar-thumb-bg: rgba(var(--mono-rgb-0), 0.1);
|
||||
/* Search */
|
||||
--search-clear-button-color: var(--text-muted);
|
||||
--search-clear-button-size: 13px;
|
||||
|
|
@ -389,9 +389,9 @@ body {
|
|||
--table-header-border-width: var(--table-border-width);
|
||||
--table-header-border-color: var(--table-border-color);
|
||||
--table-header-font: inherit;
|
||||
--table-header-size: var(--font-smaller);
|
||||
--table-header-weight: var(--font-normal);
|
||||
--table-header-color: var(--text-muted);
|
||||
--table-header-size: inherit;
|
||||
--table-header-weight: var(--font-semibold);
|
||||
--table-header-color: var(--text-normal);
|
||||
--table-text-size: inherit;
|
||||
--table-text-color: inherit;
|
||||
--table-column-max-width: none;
|
||||
|
|
@ -444,14 +444,14 @@ body {
|
|||
--workspace-background-translucent: rgba(var(--mono-rgb-0), 0.6);
|
||||
/* Color mappings ------------------------ */
|
||||
/* Accent HSL values */
|
||||
--accent-h: 212;
|
||||
--accent-s: 100%;
|
||||
--accent-l: 67%;
|
||||
--accent-h: var(--accent-h-theme);
|
||||
--accent-s: var(--accent-s-theme);
|
||||
--accent-l: var(--accent-l-theme);
|
||||
/* Backgrounds */
|
||||
--background-primary: var(--color-base-00);
|
||||
--background-primary-alt: var(--color-base-10);
|
||||
--background-secondary: var(--color-base-20);
|
||||
--background-modifier-hover: rgba(var(--mono-rgb-100), 0.12);
|
||||
--background-modifier-hover: rgba(var(--mono-rgb-100), var(--background-modifier-hover-alpha));
|
||||
--background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15);
|
||||
--background-modifier-border: var(--color-base-30);
|
||||
--background-modifier-border-hover: var(--color-base-30);
|
||||
|
|
@ -463,7 +463,7 @@ body {
|
|||
--background-modifier-success: var(--color-green);
|
||||
--background-modifier-message: rgba(0, 0, 0, 0.9);
|
||||
/* Inputs */
|
||||
--background-modifier-form-field: var(--color-base-00);
|
||||
--background-modifier-form-field: var(--color-base-25);
|
||||
/* Text */
|
||||
--text-normal: var(--color-base-100);
|
||||
--text-muted: var(--color-base-70);
|
||||
|
|
@ -484,7 +484,7 @@ body {
|
|||
.theme-dark {
|
||||
color-scheme: dark;
|
||||
--highlight-mix-blend-mode: lighten;
|
||||
--mono-rgb-0: 0, 0, 0;
|
||||
--mono-rgb-0: 177, 186, 196;
|
||||
--mono-rgb-100: 177, 186, 196;
|
||||
--color-red-rgb: 248, 81, 73;
|
||||
--color-red: #F47067;
|
||||
|
|
@ -496,6 +496,7 @@ body {
|
|||
--color-blue: #6CB6FF;
|
||||
--color-purple: #D2A8FF;
|
||||
--color-pink: #f778ba;
|
||||
|
||||
--color-base-00: #0d1117;
|
||||
--color-base-10: #161b22;
|
||||
--color-base-20: #161b22;
|
||||
|
|
@ -504,26 +505,49 @@ body {
|
|||
--color-base-35: #21262d;
|
||||
--color-base-40: #30363d;
|
||||
--color-base-50: #6e7681;
|
||||
--color-base-60: #999;
|
||||
--color-base-60: #999; /* Unused */
|
||||
--color-base-70: #8b949e;
|
||||
--color-base-100: #c9d1d9;
|
||||
|
||||
--accent-h-theme: 212;
|
||||
--accent-s-theme: 100%;
|
||||
--accent-l-theme: 67%;
|
||||
--color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
|
||||
--color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
|
||||
--color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 3.8%));
|
||||
--color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 3.8%));
|
||||
--background-modifier-form-field: var(--color-base-25);
|
||||
|
||||
--background-secondary-alt: var(--color-base-25);
|
||||
--interactive-normal: var(--color-base-35);
|
||||
--interactive-hover: var(--color-base-40);
|
||||
--interactive-normal: var(--color-base-35); /*???*/
|
||||
--interactive-hover: var(--color-base-40); /*???*/
|
||||
--background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
|
||||
--background-modifier-cover: rgba(10, 10, 10, 0.4);
|
||||
--text-highlight-bg: rgba(255, 208, 0, 0.4);
|
||||
--text-highlight-bg-active: rgba(255, 128, 0, 0.4);
|
||||
--text-selection: hsla(var(--interactive-accent-hsl), 0.4);
|
||||
--input-shadow: none;
|
||||
--input-shadow-hover: none;
|
||||
--input-shadow: inset 0 0 0 1px #f0f6fc1a;
|
||||
--input-shadow-hover: inset 0 0 0 1px var(--color-base-70);
|
||||
--shadow-s: none;
|
||||
--shadow-l: none;
|
||||
|
||||
--inline-code-background: #6e768166;
|
||||
--h1-color-theme: var(--color-green);
|
||||
--h2-color-theme: var(--color-green);
|
||||
--h3-color-theme: var(--color-green);
|
||||
--h4-color-theme: var(--color-green);
|
||||
--h5-color-theme: var(--color-green);
|
||||
--h6-color-theme: var(--color-green);
|
||||
--background-modifier-hover-alpha: 0.12;
|
||||
--color-btn-primary-bg: #238636;
|
||||
--color-btn-primary-hover-bg: #2ea043;
|
||||
|
||||
/* Kanban colors */
|
||||
--kanban-background: var(--background-primary);
|
||||
--kanban-lane-background: var(--background-secondary-alt);
|
||||
--kanban-item-background: var(--background-primary-alt);
|
||||
--kanban-lane-border: var(--color-base-35);
|
||||
--kanban-lane-count: var(--color-base-35);
|
||||
--kanban-options-btn: var(--color-base-30);
|
||||
}
|
||||
.is-mobile.theme-dark {
|
||||
--color-base-00: #0d1117;
|
||||
|
|
@ -538,14 +562,79 @@ body {
|
|||
--settings-home-background: var(--background-primary);
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.markdown-rendered th {
|
||||
color: var(--text-normal);
|
||||
font-weight: 600;
|
||||
.theme-light {
|
||||
color-scheme: light;
|
||||
--highlight-mix-blend-mode: darken;
|
||||
--mono-rgb-0: 0, 0, 0;
|
||||
--mono-rgb-100: 208, 215, 222;
|
||||
--color-red-rgb: 228, 55, 75;
|
||||
--color-red: #cf222e;
|
||||
--color-green-rgb: 12, 181, 79;
|
||||
--color-green: #0cb54f;
|
||||
--color-orange: #d96c00;
|
||||
--color-yellow: #BD8E37;
|
||||
--color-cyan: #2db7b5;
|
||||
--color-blue: #086DDD;
|
||||
--color-purple: #876be0;
|
||||
--color-pink: #C32B74;
|
||||
|
||||
--color-base-00: #ffffff;
|
||||
--color-base-05: #fcfcfc;
|
||||
--color-base-10: #f6f8fa;
|
||||
--color-base-20: #f6f8fa;
|
||||
--color-base-25: #f6f8fa;
|
||||
--color-base-30: #d0d7de;
|
||||
--color-base-35: #d4d4d4;
|
||||
--color-base-40: #bdbdbd;
|
||||
--color-base-50: #6e7781;
|
||||
--color-base-60: #707070; /* Unused */
|
||||
--color-base-70: #57606a;
|
||||
--color-base-100: #24292f;
|
||||
|
||||
--accent-h-theme: 212;
|
||||
--accent-s-theme: 92%;
|
||||
--accent-l-theme: 45%;
|
||||
--color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
|
||||
--color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
|
||||
--color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 2.5%));
|
||||
--color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 5%));
|
||||
--background-secondary-alt: var(--color-base-05);
|
||||
--background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
|
||||
--background-modifier-cover: rgba(220, 220, 220, 0.4);
|
||||
--text-highlight-bg: rgba(255, 208, 0, 0.4);
|
||||
--text-highlight-bg-active: rgba(255, 128, 0, 0.4);
|
||||
--input-shadow: inset 0 0 0 1px #1b1f2426;
|
||||
--input-shadow-hover: inset 0 0 0 1px #1b1f2426;
|
||||
--shadow-s: none;
|
||||
--shadow-l: none;
|
||||
|
||||
--inline-code-background: #aeb8c133;
|
||||
--h1-color-theme: var(--text-normal);
|
||||
--h2-color-theme: var(--text-normal);
|
||||
--h3-color-theme: var(--text-normal);
|
||||
--h4-color-theme: var(--text-normal);
|
||||
--h5-color-theme: var(--text-normal);
|
||||
--h6-color-theme: var(--text-normal);
|
||||
--background-modifier-hover-alpha: 0.32;
|
||||
--color-btn-primary-bg: #2da44f;
|
||||
--color-btn-primary-hover-bg: #2c964a;
|
||||
|
||||
/* Kanban colors */
|
||||
--kanban-background: var(--background-primary);
|
||||
--kanban-lane-background: var(--background-primary-alt);
|
||||
--kanban-item-background: var(--background-primary);
|
||||
--kanban-lane-border: #d8dee4;
|
||||
--kanban-lane-count: #afb8c133;
|
||||
--kanban-options-btn: var(--background-primary-alt);
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.markdown-rendered td,
|
||||
.markdown-rendered th {
|
||||
padding: var(--size-2-3) var(--size-4-3);
|
||||
}
|
||||
.markdown-rendered th {
|
||||
text-align: center;
|
||||
}
|
||||
.markdown-rendered tbody tr:nth-child(2n) {
|
||||
background-color: var(--background-secondary);
|
||||
|
|
@ -553,44 +642,35 @@ body {
|
|||
|
||||
/* Buttons */
|
||||
button {
|
||||
border: 1px solid #f0f6fc1a;
|
||||
transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
|
||||
}
|
||||
.theme-dark .dropdown {
|
||||
border: 1px solid #f0f6fc1a;
|
||||
}
|
||||
.theme-dark .dropdown:hover {
|
||||
border: 1px solid var(--color-base-70);
|
||||
}
|
||||
button:hover {
|
||||
border: 1px solid var(--color-base-70);
|
||||
cursor: pointer;
|
||||
cursor: var(--cursor-link);
|
||||
}
|
||||
button.mod-cta {
|
||||
background-color: #238636;
|
||||
background-color: var(--color-btn-primary-bg);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
button.mod-cta:hover {
|
||||
border-color: #f0f6fc1a;
|
||||
background-color: #2ea043;
|
||||
background-color: var(--color-btn-primary-hover-bg);
|
||||
}
|
||||
|
||||
|
||||
/* Kanban */
|
||||
.kanban-plugin {
|
||||
background-color: var(--background-primary);
|
||||
background-color: var(--kanban-background);
|
||||
}
|
||||
.kanban-plugin__lane {
|
||||
background-color: var(--background-secondary-alt);
|
||||
border: 1px solid var(--color-base-35);
|
||||
background-color: var(--kanban-lane-background);
|
||||
border: 1px solid var(--kanban-lane-border);
|
||||
}
|
||||
.kanban-plugin__lane-title {
|
||||
flex-grow: 0;
|
||||
width: fit-content;
|
||||
}
|
||||
.kanban-plugin__item-content-wrapper,
|
||||
.kanban-plugin__item-title-wrapper {
|
||||
background: var(--background-primary-alt);
|
||||
.kanban-plugin__item-title-wrapper,
|
||||
.kanban-plugin__item-metadata-wrapper:not(:empty) {
|
||||
background: var(--kanban-item-background);
|
||||
}
|
||||
.kanban-plugin__icon>svg {
|
||||
transform: rotate(90deg);
|
||||
|
|
@ -599,7 +679,7 @@ button.mod-cta:hover {
|
|||
margin-left: auto;
|
||||
}
|
||||
div.kanban-plugin__lane-title-count {
|
||||
background-color: var(--color-base-35);
|
||||
background-color: var(--kanban-lane-count);
|
||||
border-radius: 1em;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
|
@ -608,11 +688,12 @@ div.kanban-plugin__lane-title-count {
|
|||
.kanban-plugin__lane button.kanban-plugin__lane-settings-button {
|
||||
padding: 0 5px;
|
||||
height: 24px;
|
||||
box-shadow: none;
|
||||
}
|
||||
.kanban-plugin__item button.kanban-plugin__item-prefix-button:hover,
|
||||
.kanban-plugin__item button.kanban-plugin__item-postfix-button:hover,
|
||||
.kanban-plugin__lane button.kanban-plugin__lane-settings-button:hover {
|
||||
background-color: var(--color-base-30);
|
||||
background-color: var(--kanban-options-btn);
|
||||
cursor: pointer;
|
||||
}
|
||||
button.kanban-plugin__new-item-button {
|
||||
|
|
@ -622,10 +703,14 @@ button.kanban-plugin__new-item-button {
|
|||
.kanban-plugin__new-item-button:hover {
|
||||
color: var(--text-normal);
|
||||
background-color: inherit;
|
||||
box-shadow: none;
|
||||
}
|
||||
.kanban-plugin__lane-items {
|
||||
padding: 8px 15px;
|
||||
}
|
||||
.kanban-plugin__item-prefix-button-wrapper input[type=checkbox] {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
/* fix: input borders */
|
||||
textarea:active,
|
||||
|
|
@ -645,14 +730,16 @@ input[type='text']:focus-visible,
|
|||
input[type='search']:focus-visible,
|
||||
input[type='email']:focus-visible,
|
||||
input[type='password']:focus-visible,
|
||||
input[type='number']:focus-visible,
|
||||
select:focus, .dropdown:focus {
|
||||
input[type='number']:focus-visible {
|
||||
box-shadow: 0 0 0 1px var(--background-modifier-border-focus);
|
||||
}
|
||||
select:focus, .dropdown:focus {
|
||||
box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
|
||||
}
|
||||
|
||||
/* inline code block */
|
||||
.markdown-rendered :not(pre) > code {
|
||||
background-color: #6e768166;
|
||||
background-color: var(--inline-code-background);
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 6px;
|
||||
color: var(--color-base-100);
|
||||
|
|
|
|||
Loading…
Reference in a new issue