diff --git a/manifest.json b/manifest.json index a3ebe75..17779e9 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { - "name": "Sample Theme", + "name": "chiaroscuroflow", "version": "1.0.0", "minAppVersion": "1.0.0", "author": "Obsidian", "authorUrl": "https://obsidian.md" -} \ No newline at end of file +} diff --git a/theme.css b/theme.css index 2307fc8..986cb31 100644 --- a/theme.css +++ b/theme.css @@ -1,34 +1,209 @@ +/* @settings + +name: Chiaroscuro Flow +id: chiaroscuro-flow +settings: + - + id: body-font + title: Body Font + type: variable-text + default: Manrope + + - + id: header-font + title: Header Font + type: variable-text + default: 'Nunito Sans Bold' + + - + id: background-primary-light + title: Light Mode Primary Background + type: variable-color + opacity: true + format: rgb + default: '#FFFFFF' + + - + id: background-secondary-light + title: Light Mode Secondary Background + type: variable-color + opacity: true + format: rgb + default: '#F0F0F0' + + - + id: background-primary-dark + title: Dark Mode Primary Background + type: variable-color + opacity: true + format: rgb + default: '#1E1E1E' + + - + id: background-secondary-dark + title: Dark Mode Secondary Background + type: variable-color + opacity: true + format: rgb + default: '#2D2D2D' + + - + id: text-normal-light + title: Light Mode Text Color + type: variable-color + format: rgb + default: '#333333' + + - + id: text-normal-dark + title: Dark Mode Text Color + type: variable-color + format: rgb + default: '#DDDDDD' + + - + id: code-background + title: Code Block Background (Light Mode) + type: variable-color + opacity: true + format: rgb + default: '#F0F0F0' + + - + id: code-background-dark + title: Dark Mode Code Block Background + type: variable-color + opacity: true + format: rgb + default: '#2D2D2D' + + - + id: math-background + title: Math Block Background (Light Mode) + type: variable-color + opacity: true + format: rgb + default: '#F0F0F0' + + - + id: graph-background + title: Graph View Background + type: variable-color + opacity: true + format: rgb + default: '#FFFFFF' + + - + id: graph-dot-size + title: Graph View Dot Size + type: variable-number-slider + default: 1 + min: 0.5 + max: 3 + step: 0.1 + + - + id: graph-dot-spacing + title: Graph View Dot Spacing + type: variable-number-slider + default: 20 + min: 10 + max: 50 + step: 1 + +*/ + body { - --radius-s: 0px; - --radius-m: 0px; - --radius-l: 0px; - --input-radius: 0px; - --tab-radius-active: 0px; - --checkbox-radius: 0px; - --toggle-radius: 0px; - --toggle-thumb-radius: 0px; - --slider-thumb-radius: 0px; + --font-text: var(--body-font, Manrope), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + --font-header: var(--header-font, 'Nunito Sans Bold'), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } -.workspace-tab-header.is-active::before, .workspace-tab-header.is-active::after { - display: none; +.theme-light { + --background-primary: var(--background-primary-light, rgb(255, 255, 255)); + --background-secondary: var(--background-secondary-light, rgb(240, 240, 240)); + --text-normal: var(--text-normal-light, rgb(51, 51, 51)); + --code-background: var(--code-background, rgb(169, 152, 152)); + --math-background: var(--math-background, rgb(169, 152, 152)); } -svg * { - stroke-linecap: square; - stroke-linejoin: miter; - rx: 0; - ry: 0; +.theme-dark { + --background-primary: var(--background-primary-dark, rgb(30, 30, 30)); + --background-secondary: var(--background-secondary-dark, rgb(45, 45, 45)); + --text-normal: var(--text-normal-dark, rgb(221, 221, 221)); + --code-background: var(--code-background-dark, rgb(45, 45, 45)); + --math-background: var(--code-background-dark, rgb(45, 45, 45)); } -.menu { - padding: var(--size-2-1); +/* Mesh gradient backgrounds */ +.theme-light .workspace-leaf-content[data-type="markdown"], +.theme-light .markdown-preview-view, +.theme-light .view-content { + background: none; + background-image: + radial-gradient(at 40% 20%, rgba(var(--background-primary-light, 255 255 255) / 0.8) 0px, transparent 50%), + radial-gradient(at 80% 0%, rgba(var(--background-secondary-light, 240 240 240) / 0.8) 0px, transparent 50%), + radial-gradient(at 0% 50%, rgba(var(--background-primary-light, 255 255 255) / 0.8) 0px, transparent 50%), + radial-gradient(at 80% 50%, rgba(var(--background-secondary-light, 240 240 240) / 0.8) 0px, transparent 50%), + radial-gradient(at 0% 100%, rgba(var(--background-primary-light, 255 255 255) / 0.8) 0px, transparent 50%), + radial-gradient(at 80% 100%, rgba(var(--background-secondary-light, 240 240 240) / 0.8) 0px, transparent 50%), + radial-gradient(at 0% 0%, rgba(var(--background-primary-light, 255 255 255) / 0.8) 0px, transparent 50%); } -.menu-item { - padding: var(--size-4-1) var(--size-4-2); +.theme-dark .workspace-leaf-content[data-type="markdown"], +.theme-dark .markdown-preview-view, +.theme-dark .view-content { + background: none; + background-image: + radial-gradient(at 40% 20%, rgba(var(--background-primary-dark, 30 30 30) / 0.8) 0px, transparent 50%), + radial-gradient(at 80% 0%, rgba(var(--background-secondary-dark, 45 45 45) / 0.8) 0px, transparent 50%), + radial-gradient(at 0% 50%, rgba(var(--background-primary-dark, 30 30 30) / 0.8) 0px, transparent 50%), + radial-gradient(at 80% 50%, rgba(var(--background-secondary-dark, 45 45 45) / 0.8) 0px, transparent 50%), + radial-gradient(at 0% 100%, rgba(var(--background-primary-dark, 30 30 30) / 0.8) 0px, transparent 50%), + radial-gradient(at 80% 100%, rgba(var(--background-secondary-dark, 45 45 45) / 0.8) 0px, transparent 50%), + radial-gradient(at 0% 0%, rgba(var(--background-primary-dark, 30 30 30) / 0.8) 0px, transparent 50%); } -.menu-separator { - margin: var(--size-2-1) calc(var(--size-2-1) * -1); +/* Ensure content is visible over the gradient */ +.markdown-preview-view, +.markdown-source-view { + background-color: transparent !important; +} + +.cm-s-obsidian pre.HyperMD-codeblock, +.markdown-preview-view pre, +.math-block { + background-color: var(--code-background); +} + +.graph-view.color-fill { + background-color: var(--background-primary); + background-image: + radial-gradient(var(--text-muted) var(--graph-dot-size, 1px), transparent var(--graph-dot-size, 1px)), + radial-gradient(var(--text-muted) var(--graph-dot-size, 1px), transparent var(--graph-dot-size, 1px)); + background-size: var(--graph-dot-spacing, 20px) var(--graph-dot-spacing, 20px); + background-position: 0 0, calc(var(--graph-dot-spacing, 20px) / 2) calc(var(--graph-dot-spacing, 20px) / 2); +} + +/* Ensure proper text color in both modes */ +.theme-light .markdown-preview-view, +.theme-light .cm-s-obsidian { + color: var(--text-normal); +} + +.theme-dark .markdown-preview-view, +.theme-dark .cm-s-obsidian { + color: var(--text-normal); +} + +.graph-view { + color: var(--text-normal); +} + +/* Apply fonts */ +body, .cm-s-obsidian { + font-family: var(--font-text); +} + +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-header); }