feat: add smart font colors for wood paneling backgrounds
- Add data-wood attribute to collections container for CSS targeting - Update woodPaneling.ts and woodPanelingInit.ts to set/remove attribute - Add CSS variables for wood-specific text colors (dark text on light wood, light text on dark wood) - Add !important rules to override theme colors when wood is active - Replace wood-dark and wood-mahogany textures with darker variants - Add subtle borders to book cards on wood backgrounds
This commit is contained in:
@@ -11,10 +11,12 @@ const applyWoodPaneling = (paneling: WoodPanelingType): void => {
|
||||
|
||||
// Remove all wood background classes
|
||||
container.classList.remove('bg-wood-light', 'bg-wood-dark', 'bg-wood-mahogany');
|
||||
container.removeAttribute('data-wood');
|
||||
|
||||
if (paneling !== 'none') {
|
||||
// Add selected wood background class
|
||||
container.classList.add(`bg-${paneling}`);
|
||||
container.setAttribute('data-wood', paneling);
|
||||
}
|
||||
|
||||
// Save to localStorage
|
||||
|
||||
@@ -11,6 +11,7 @@ const WOOD_INIT_STORAGE_KEY = 'wood-paneling';
|
||||
const container = document.getElementById('collections-container');
|
||||
if (container) {
|
||||
container.classList.add(`bg-${woodPaneling}`);
|
||||
container.setAttribute('data-wood', woodPaneling);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user