// ============================================================================= // THEMES INDEX // ============================================================================= // Import all available themes here. Each theme provides light and dark variants. // Add new themes by creating a new file and importing it below. // ============================================================================= // Base theming infrastructure (must be first) @import 'theme-base'; // Available Themes @import 'oceanic'; // Oceanic theme - navy blue professional @import 'amethyst'; // Amethyst theme - purple/indigo modern @import 'violet'; // Violet theme - violet/purple bordered @import 'matrix'; // Matrix theme - neon green futuristic @import 'noir'; // Noir theme - elegant black/gold cinematic // ============================================================================= // USAGE GUIDE // ============================================================================= // // To apply a theme skin to your application: // // 1. Add data-skin attribute to your HTML element: // // // 2. For dark mode, set data-theme="dark": // // // 3. You can switch themes dynamically with JavaScript: // document.documentElement.setAttribute('data-skin', 'oceanic'); // document.documentElement.setAttribute('data-theme', 'dark'); // // ============================================================================= // CREATING NEW THEMES // ============================================================================= // // 1. Create a new file: _mytheme.scss // 2. Import the theme-base: @import 'theme-base'; // 3. Define $mytheme-light and $mytheme-dark color maps // 4. Register theme: @include register-theme('mytheme', $theme-map); // 5. Add selector styles: [data-skin="mytheme"] { ... } // 6. Import in this index file // // =============================================================================