Theming & Styling (SCSS)
Relevant source files
The following files were used as context for generating this wiki page:
Theming and Styling in Rocreate is managed through a combination of SCSS stylesheets, CSS Custom Properties (variables), and TypeScript-driven class toggling. The system supports multiple visual modes, primarily focusing on a high-performance "Procreate-style" dark interface while maintaining compatibility with standard light and dark themes. Styling logic is decoupled into layout-specific SCSS files and utility-based DOM manipulation scripts.
Sources: src/app/style/procreate.scss, src/index.html:15-20
Architecture and Design Patterns
The styling architecture follows a modular approach where core layout properties are defined via CSS variables, allowing for real-time theme switching. The application utilizes a "mode" system where specific classes (e.g., .procreate-mode, .kl-theme-dark) are applied to the root element to override default component styles.
Component-Based Styling Logic
The application uses a hybrid approach for styling components:
- Static SCSS: Definitions for fixed UI elements like the top bar, sidebars, and panels.
- Dynamic Style Injection: A utility function
c(compose) andcsshelper allow TypeScript logic to apply styles directly to elements at runtime for complex layouts or performance-critical positioning.
Sources: src/app/style/procreate.scss:1-35, src/app/script/bb/base/c.ts:133-145, src/app/script/bb/base/tests/base.test.ts:153-157
Theme Initialization Flow
Theme persistence is handled via localStorage. During the initial page load, a blocking script checks for the saved theme to prevent flickering before the main application logic executes.
Visual representation of the theme detection and application sequence.
Sources: src/index.html:15-21
Procreate Theme System
The "Procreate-mode" is a comprehensive visual override that transforms the standard "Klecks" interface into a minimalist, dark-themed creative environment. It relies heavily on CSS variables for a "Glass" effect and authentic dark surfaces.
Core Variables (CSS Custom Properties)
The system defines a set of variables under the :root or specific mode classes to ensure consistency across components.
| Variable Name | Value / Description | Purpose |
|---|---|---|
--procreate-bg | rgba(18, 18, 18, 0.96) | Primary background with slight transparency |
--procreate-glass | blur(40px) saturate(180%) | Backdrop filter for frosted glass effects |
--procreate-accent | #0a84ff | Primary interaction/highlight color |
--procreate-border | rgba(255, 255, 255, 0.08) | Subtle borders for dark mode depth |
--procreate-radius | 20px | Standard corner rounding for panels |
Sources: src/app/style/procreate.scss:9-25
UI Layout Components
The Procreate mode introduces specific layouts that override the default kl-toolspace.
- Top Bar: A fixed header (
.procreate-topbar) containing tool groups and color previews. It usesbackdrop-filterfor glass effects. - Side Bar: A floating vertical control center (
.procreate-sidebar) for brush size, opacity, and undo/redo operations. - Floating Panels: Large, draggable panels (
.procreate-floating) used for layers, settings, and brush libraries.
Sources: src/app/style/procreate.scss:30-45, src/app/style/procreate.scss:130-150, src/app/style/procreate.scss:280-310
Dynamic Styling Utilities
The codebase includes technical utilities to bridge the gap between TypeScript logic and SCSS styles, primarily located in the bb (Bitbof) utility library.
The c (Compose) Function
The c function provides a shorthand for creating elements with complex styles and classes. It parses strings to apply CSS properties such as flexbox layouts, padding, and positioning without writing verbose inline style assignments.
// Example of internal parsing logic for style names
// Sources: src/app/script/bb/base/c.ts:56-110
const operations = {
flex: (el) => { el.style.display = 'flex'; },
gap: (params) => { el.style.gap = params.join('px ') + 'px'; },
abs: (params) => {
el.style.position = 'absolute';
el.style.left = params[0] + 'px';
el.style.top = params[1] + 'px';
}
};
Sources: src/app/script/bb/base/c.ts:56-125
Layout Management logic
The KlApp class manages the transition between themes and layouts. It calculates the uiWidth and uiHeight to decide when to "collapse" the toolspace or shift the UI between left and right orientations.
Sequence of class application when toggling themes.
Sources: src/app/script/app/kl-app.ts:250-280, src/app/style/procreate.scss:2-4
Help and Document Styling
The application maintains a separate styling context for the Help page and documentation, defined using standard CSS variables to ensure consistency with the main app's themes.
| Feature | Implementation | Source |
|---|---|---|
| Media Queries | Adjusts font size and layout for max-widths 590px, 640px, and 750px | src/help.html:105-135 |
| Dark Mode | Uses @media (prefers-color-scheme: dark) to invert colors and logo filters | src/help.html:137-163 |
| Keyboard Keys | Styled as .key with shadows and monospace fonts to simulate physical keys | src/help.html:56-68 |
Sources: src/help.html:10-70
Conclusion
Theming in Rocreate is a multi-layered system that prioritizes performance and user experience through CSS variables and optimized SCSS overrides. By leveraging TypeScript to manage high-level "mode" states while offloading specific visual properties to the SCSS engine, the application achieves a highly responsive and visually consistent interface across classic and Procreate-style themes.