diff --git a/src/components/BibleStyles.ts b/src/components/BibleStyles.ts index 3a8babf..2f41bc0 100644 --- a/src/components/BibleStyles.ts +++ b/src/components/BibleStyles.ts @@ -99,15 +99,29 @@ export class BibleStyles { /** * Apply styles based on theme and preset */ - public applyStyles(theme: 'light' | 'dark', presetName: string = 'default', fontSize: string = '100%'): void { + public applyStyles(theme: 'light' | 'dark', presetName: string = 'default', fontSize: string = '100%', settings?: { + wordsOfChristColor?: string; + verseNumberColor?: string; + headingColor?: string; + blockIndentation?: string; + }): void { this.createStyleElement(); // Get the preset, defaulting to 'default' if not found const preset = THEME_PRESETS[presetName] || THEME_PRESETS.default; - // Get the options for the current theme + // Get the options for the current theme with preset values const options = { ...preset[theme], fontSize: fontSize || this.currentFontSize }; + // Apply custom settings from DisciplesJournalSettings if provided + // These will override the preset values + if (settings) { + if (settings.wordsOfChristColor) options.wordsOfChristColor = settings.wordsOfChristColor; + if (settings.verseNumberColor) options.verseNumberColor = settings.verseNumberColor; + if (settings.headingColor) options.headingColor = settings.headingColor; + if (settings.blockIndentation) options.blockIndentation = settings.blockIndentation; + } + // Update the style element if (this.styleElement) { this.styleElement.textContent = this.getStylesText(options); @@ -305,6 +319,10 @@ export class BibleStyles { margin-bottom: 8px; color: ${options.headingColor}; } + + .bible-passage-text .woc { + color: ${options.wordsOfChristColor}; + } .bible-passage-text .chapter-num, .bible-passage-text .verse-num { diff --git a/src/core/DisciplesJournalPlugin.ts b/src/core/DisciplesJournalPlugin.ts index e8e03dd..e4e7c45 100644 --- a/src/core/DisciplesJournalPlugin.ts +++ b/src/core/DisciplesJournalPlugin.ts @@ -169,7 +169,19 @@ export default class DisciplesJournalPlugin extends Plugin { const isDarkMode = document.body.classList.contains('theme-dark'); const theme = isDarkMode ? 'dark' : 'light'; - this.bibleStyles.applyStyles(theme, this.settings.stylePreset, this.settings.bibleTextFontSize); + + // Pass custom settings from DisciplesJournalSettings + this.bibleStyles.applyStyles( + theme, + this.settings.stylePreset, + this.settings.bibleTextFontSize, + { + wordsOfChristColor: this.settings.wordsOfChristColor, + verseNumberColor: this.settings.verseNumberColor, + headingColor: this.settings.headingColor, + blockIndentation: this.settings.blockIndentation + } + ); } /** @@ -177,6 +189,24 @@ export default class DisciplesJournalPlugin extends Plugin { */ public updateFontSize(fontSize: string): void { this.bibleStyles.setFontSize(fontSize); + + // Refresh the styles with the new font size and current settings + const isDarkMode = document.body.classList.contains('theme-dark'); + const theme = isDarkMode ? 'dark' : 'light'; + + // Apply styles with the new font size and current settings + this.bibleStyles.applyStyles( + theme, + this.settings.stylePreset, + fontSize, + { + wordsOfChristColor: this.settings.wordsOfChristColor, + verseNumberColor: this.settings.verseNumberColor, + headingColor: this.settings.headingColor, + blockIndentation: this.settings.blockIndentation + } + ); + this.bibleReferenceRenderer.setFontSize(fontSize); }