chiaroscuroflow/theme.css

/* @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 {
	--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;
}

.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(240, 240, 240));
	--math-background: var(--math-background, rgb(240, 240, 240));
}

.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));
}
/* Light Theme */
.theme-light {
	--background-primary: rgb(240, 128, 128); /* Light Coral */
}

.theme-light .workspace-leaf-content[data-type="markdown"],
.theme-light .markdown-preview-view,
.theme-light .view-content {
	background: none;
	background-image:
		radial-gradient(circle at 30% 30%, #FFDAB9, transparent 60%),    /* Soft Peach */
		radial-gradient(circle at 70% 70%, #FFFACD, transparent 60%),  /* Pale Gold */
		radial-gradient(circle at 50% 50%, #F08080, transparent 60%),  /* Light Coral */
		radial-gradient(circle at 50% 50%, #B0E0E6, transparent 60%), /* Powder Blue */
		radial-gradient(circle at 30% 70%, #98FF98, transparent 60%),   /* Mint Green */
		radial-gradient(circle at 70% 30%, #ADD8E6, transparent 60%), /* Pale Blue */
		radial-gradient(circle at 60% 40%, #E6E6FA, transparent 60%), /* Lavender */
		radial-gradient(circle at 40% 60%, #FFB6C1, transparent 60%);   /* Light Pink */
}

/* Dark Theme */
.theme-dark {
	--background-primary: rgb(25, 18, 63); /* Dark Slate Blue */
}

.theme-dark .workspace-leaf-content[data-type="markdown"],
.theme-dark .markdown-preview-view,
.theme-dark .view-content {
	background: none;
	background-image:
		radial-gradient(circle at 30% 30%, #19123FFF, transparent 60%),    /* Deep Purple */
		radial-gradient(circle at 70% 70%, #483D8B, transparent 60%),  /* Dark Slate Blue */
		radial-gradient(circle at 50% 50%, #191970, transparent 60%),  /* Midnight Blue */
		radial-gradient(circle at 50% 50%, #8B008B, transparent 60%), /* Dark Magenta */
		radial-gradient(circle at 30% 70%, #008B8B, transparent 60%),   /* Dark Cyan */
		radial-gradient(circle at 70% 30%, #2F4F4F, transparent 60%), /* Dark Slate Gray */
		radial-gradient(circle at 60% 40%, #556B2F, transparent 60%), /* Dark Olive Green */
		radial-gradient(circle at 40% 60%, #696969, transparent 60%);   /* Dim Gray */
}

/* Force gradient on all relevant elements */
.theme-light .workspace-split.mod-vertical,
.theme-light .workspace-split.mod-horizontal,
.theme-light .workspace-leaf-content,
.theme-dark .workspace-split.mod-vertical,
.theme-dark .workspace-split.mod-horizontal,
.theme-dark .workspace-leaf-content {
	background: none !important;
}

/* Adjust text colors for better readability */
.theme-light {
	--text-normal: #333333; /* Dark gray for light theme */
}

.theme-dark {
	--text-normal: #FFFFFF; /* White for dark theme */
}

/* Ensure proper contrast for UI elements */
.theme-light .workspace-tab-header-container,
.theme-light .workspace-tab-header.is-active {
	background-color: rgba(255, 255, 255, 0.7);
}

.theme-dark .workspace-tab-header-container,
.theme-dark .workspace-tab-header.is-active {
	background-color: rgba(0, 0, 0, 0.3);
}

.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);
}