Theming
Customize the appearance of Open Ledger components.
Open Ledger components can be styled to match your application’s design system through the theme prop on the OpenLedgerProvider
.
Theme Structure
The theme object allows you to customize colors, typography, spacing, and other visual aspects of the Open Ledger components.
Applying a Theme
Pass your theme object to the OpenLedgerProvider
to apply it to all Open Ledger components:
Adaptive Styling
Open Ledger components use advanced color adaptation functions to automatically adjust to light and dark themes. These functions ensure optimal contrast, readability, and aesthetics regardless of your color palette.
Automatic Light/Dark Detection
Components intelligently detect whether your theme uses a light or dark background and adjust styling accordingly:
Adaptive Shading
Tables, cards, and input elements automatically adjust their background shade based on your theme colors:
Context-Aware Shadows
Shadow styles automatically adapt to your theme’s light or dark mode:
Theme Properties
Colors
The colors object defines the color palette for your Open Ledger components:
Color Properties
| Property | Description |
|-------------|------------------------------------------------------------| |
primary
| Main brand color used for primary buttons and actions | |
secondary
| Secondary brand color for alternative actions | | accent
|
Accent color for highlights and special elements | | error
| Color for error
states and negative feedback | | warning
| Color for warning states and
cautionary messages | | info
| Color for informational messages and states |
| background
| Default background color for the application | | surface
|
Background color for cards and elevated surfaces | | text
| Text color for
content |
The color format is an object with a hex
property:
Typography
The typography object controls the text styling throughout the components:
Typography Properties
Spacing
The spacing object defines consistent spacing throughout the UI:
Spacing Properties
| Property | Description |
|----------|-----------------------------------------------------------| |
unit
| Base unit for spacing calculations | | small
| Small spacing value
(typically used for tight spacing) | | medium
| Medium spacing value
(default spacing between elements) | | large
| Large spacing value (used for
more generous spacing) | | xlarge
| Extra large spacing (used for section
separation) |
Theme Examples
Light Theme
Dark Theme
Responsive Design
All Open Ledger components are designed to be fully responsive, automatically adapting to different screen sizes. Our components use:
- Flexible grid layouts
- Mobile-optimized table designs
- Collapsible panels for small screens
- Touch-friendly interaction targets
Accessibility Considerations
When customizing colors, keep these accessibility guidelines in mind:
-
Color contrast: Maintain sufficient contrast ratios between text and background colors (minimum 4.5:1 for regular text, 3:1 for large text)
-
Focus indicators: Ensure elements retain visible focus indicators when navigating with keyboard
-
Text sizing: Allow text to scale when user adjusts browser font size
-
Screen reader support: Our components include ARIA attributes for screen reader compatibility
Best Practices
-
Maintain consistency: Try to use the same color palette and typography as the rest of your application for a seamless integration.
-
Test all states: When customizing colors, ensure they work well for all component states (hover, active, disabled, etc.).
-
Accessibility: Make sure your color choices maintain sufficient contrast ratios for readability and accessibility compliance.
-
Responsive considerations: Test your theme across different screen sizes to ensure components look good on all devices.