[SYSTEM_APPEARANCE]
Customize your Fraqtal interface locally. Select a data-pattern below to reconfigure the visual matrix.
[THEME_CREATOR_GUIDE]
Creating a Custom Theme
Fraqtal's theming engine is built on standard CSS Custom Variables (Design Tokens). Themes are activated by the data-theme attribute on the root element.
1. Understanding the Token System
A theme is simply a collection of variable overrides. You must define these variables within a :root[data-theme='your-theme-name'] selector.
Essential Color Tokens:
--color-bg: Main background color.--color-text: Primary text color.--color-accent: Accent/Highlight color (used for dates, active states).--color-secondary: Secondary accent (used for IDs, links).--color-grid: Grid lines and borders.--color-dim: Muted text or inactive elements.
Layout & Typography:
--font-main: Primary sans-serif font.--font-mono: Monospace font for data/code.--header-height: Height of the top navigation bar.
2. Implementation Template
Create a new CSS file in src/styles/themes/ (e.g., my-theme.css) and use this template:
/* src/styles/themes/my-theme.css */
:root[data-theme='my-theme'] {
/* Base Colors */
--color-bg: #1a1a1a;
--color-text: #ffffff;
--color-accent: #00ff00;
--color-secondary: #ff00ff;
--color-grid: #333333;
--color-dim: #888888;
/* Typography */
--font-main: 'Inter', sans-serif;
--font-mono: 'Fira Code', monospace;
/* Layout Customization */
--header-height: 60px;
--grid-gap: 4px;
}
/* Optional: Advanced Overrides */
:root[data-theme='my-theme'] .app-header {
border-bottom: 2px dashed var(--color-accent);
}3. Registration
Import your new CSS file in the main layout (`src/layouts/Layout.astro`) and add a button to this page calling setTheme('my-theme').