@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
277 lines (242 loc) • 10 kB
HTML
<html lang="de" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theme Switcher - Dragonfly CSS</title>
<!-- Core CSS with base themes -->
<link rel="stylesheet" href="../core.css">
<!-- Theme Helper Script -->
<script src="./theme-helper.js"></script>
<style>
body {
font-family: var(--font-family-base);
color: var(--color-text);
background-color: var(--color-background);
padding: 2rem;
transition: background-color 0.3s, color 0.3s;
}
.container {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 2rem;
padding: 2rem;
border-radius: var(--radius-lg);
background-color: var(--color-surface-elevated);
box-shadow: var(--shadow-md);
}
.theme-section {
padding: 1.5rem;
border-radius: var(--radius-md);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
}
.control-group {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
button {
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
background-color: var(--color-primary);
color: var(--color-text-inverse);
border: 1px solid var(--color-primary);
cursor: pointer;
font-weight: var(--font-weight-medium);
transition: all 0.2s ease;
}
button:hover {
background-color: var(--color-primary-600);
}
button.secondary {
background-color: var(--color-secondary);
border-color: var(--color-secondary);
}
button.outline {
background-color: transparent;
color: var(--color-primary);
}
.current-theme {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-top: 1rem;
padding: var(--space-2);
background-color: var(--color-surface);
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
}
.demo-elements {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.demo-card {
padding: var(--space-6);
border-radius: var(--radius-md);
background-color: var(--color-surface-elevated);
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-border);
}
.color-palette {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 2px;
margin-top: 1rem;
}
.color-swatch {
height: 2rem;
border-radius: var(--radius-sm);
}
.variant-loader {
margin-top: 1rem;
padding: var(--space-4);
background-color: var(--color-surface);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
}
.loaded-variants {
margin-top: 1rem;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Dragonfly CSS Theme System</h1>
<p>Test the new theme system with data-theme attributes and dynamic variant loading</p>
</header>
<div class="theme-controls">
<!-- Base Theme Modes -->
<div class="theme-section">
<h2>Base Theme Modes</h2>
<p>Switch between light, dark, and auto modes (always loaded)</p>
<div class="control-group">
<button onclick="setTheme('light')">Light</button>
<button onclick="setTheme('dark')">Dark</button>
<button onclick="setTheme('auto')">Auto</button>
<button onclick="cycleTheme()">Cycle</button>
</div>
<div class="current-theme">
Current theme: <span id="current-theme">light</span><br>
Data attribute: <span id="current-data-theme">light</span>
</div>
</div>
<!-- Theme Variants -->
<div class="theme-section">
<h2>Theme Variants (Opt-in)</h2>
<p>Load theme variants dynamically - these are not included by default</p>
<div class="control-group">
<button onclick="loadVariant('brand')">Brand</button>
<button onclick="loadVariant('autumn')">Autumn</button>
<button onclick="loadVariant('ocean')">Ocean</button>
<button onclick="loadVariant('forest')">Forest</button>
<button onclick="loadVariant('sunset')">Sunset</button>
<button onclick="loadVariant('neon')">Neon</button>
</div>
<div class="variant-loader">
<h4>Variant Loader Test</h4>
<input type="text" id="variant-input" placeholder="Enter variant name (e.g., 'winter')" style="margin-right: 0.5rem; padding: 0.5rem;">
<button onclick="loadCustomVariant()">Load Variant</button>
</div>
<div class="loaded-variants">
Loaded variants: <span id="loaded-variants">none</span>
</div>
</div>
</div>
<!-- Demo Elements -->
<div class="demo-elements">
<div class="demo-card">
<h3>Color Tokens</h3>
<div class="color-palette">
<div class="color-swatch" style="background-color: var(--color-primary-50);"></div>
<div class="color-swatch" style="background-color: var(--color-primary-100);"></div>
<div class="color-swatch" style="background-color: var(--color-primary-200);"></div>
<div class="color-swatch" style="background-color: var(--color-primary-300);"></div>
<div class="color-swatch" style="background-color: var(--color-primary-400);"></div>
<div class="color-swatch" style="background-color: var(--color-primary-500);"></div>
<div class="color-swatch" style="background-color: var(--color-primary-600);"></div>
<div class="color-swatch" style="background-color: var(--color-primary-700);"></div>
<div class="color-swatch" style="background-color: var(--color-primary-800);"></div>
<div class="color-swatch" style="background-color: var(--color-primary-900);"></div>
</div>
</div>
<div class="demo-card">
<h3>Component Aliases</h3>
<div style="display: flex; flex-direction: column; gap: 1rem;">
<button style="background-color: var(--btn-bg); color: var(--btn-text);">Primary Button</button>
<button class="secondary" style="background-color: var(--btn-secondary-bg); color: var(--btn-secondary-text);">Secondary Button</button>
<div style="padding: var(--card-padding); background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius);">
Card with aliases
</div>
</div>
</div>
<div class="demo-card">
<h3>Form Elements</h3>
<div style="display: flex; flex-direction: column; gap: 1rem;">
<input type="text" placeholder="Input field" style="padding: var(--form-padding-y) var(--form-padding-x); border: 1px solid var(--form-border); border-radius: var(--form-radius); background-color: var(--form-bg);">
<textarea placeholder="Textarea" style="padding: var(--form-padding-y) var(--form-padding-x); border: 1px solid var(--form-border); border-radius: var(--form-radius); background-color: var(--form-bg);"></textarea>
</div>
</div>
<div class="demo-card">
<h3>Theme Information</h3>
<div style="font-size: var(--font-size-sm); color: var(--color-text-muted);">
<p><strong>Current data-theme:</strong> <span id="info-theme">light</span></p>
<p><strong>Color scheme:</strong> <span id="info-color-scheme">light</span></p>
<p><strong>Loaded variants:</strong> <span id="info-variants">none</span></p>
</div>
</div>
</div>
</div>
<script>
// Update UI when theme changes
function updateThemeInfo() {
const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
const savedTheme = themeHelper.getSavedTheme();
const loadedVariants = themeHelper.getLoadedVariants();
document.getElementById('current-theme').textContent = savedTheme;
document.getElementById('current-data-theme').textContent = currentTheme;
document.getElementById('loaded-variants').textContent = loadedVariants.length ? loadedVariants.join(', ') : 'none';
document.getElementById('info-theme').textContent = currentTheme;
document.getElementById('info-color-scheme').textContent = getComputedStyle(document.documentElement).colorScheme || 'light';
document.getElementById('info-variants').textContent = loadedVariants.length ? loadedVariants.join(', ') : 'none';
}
// Load a theme variant
async function loadVariant(variantName) {
try {
await loadThemeVariant(variantName);
console.log(`Loaded theme variant: ${variantName}`);
updateThemeInfo();
} catch (error) {
console.error(`Failed to load variant ${variantName}:`, error);
alert(`Failed to load theme variant: ${variantName}`);
}
}
// Load custom variant from input
async function loadCustomVariant() {
const variantName = document.getElementById('variant-input').value.trim();
if (variantName) {
await loadVariant(variantName);
document.getElementById('variant-input').value = '';
}
}
// Listen for theme changes
document.addEventListener('theme-change', (event) => {
console.log('Theme changed:', event.detail);
updateThemeInfo();
});
// Initialize
document.addEventListener('DOMContentLoaded', () => {
updateThemeInfo();
// Update every second to catch any changes
setInterval(updateThemeInfo, 1000);
});
</script>
</body>
</html>