Usage
Retrieve the current theme value from the document element.
import { getTheme } from '@alex.radulescu/styled-static';
const current = getTheme(); // 'light', 'dark', 'pokemon', etc.
Signature
function getTheme(attribute?: string): string
Parameters
attribute
string
default:"'data-theme'"
The attribute to read from documentElement. Supports both data-* attributes (using dataset) and regular attributes
Returns
The current theme name, or 'light' if not set
Behavior
The function:
- Reads the specified attribute from
document.documentElement
- Handles both
data-* attributes (via dataset) and regular attributes
- Returns
'light' as the default if the attribute is not set
- Returns
'light' in server-side rendering environments where document is undefined
Examples
Basic usage
import { getTheme } from '@alex.radulescu/styled-static';
const theme = getTheme(); // 'light', 'dark', 'pokemon', etc.
Using with React state
import { useState, useEffect } from 'react';
import { getTheme, setTheme } from '@alex.radulescu/styled-static';
function ThemeSwitcher() {
const [currentTheme, setCurrentTheme] = useState(getTheme());
const handleThemeChange = (newTheme: string) => {
setTheme(newTheme);
setCurrentTheme(newTheme);
};
return (
<div>
<p>Current theme: {currentTheme}</p>
<button onClick={() => handleThemeChange('light')}>Light</button>
<button onClick={() => handleThemeChange('dark')}>Dark</button>
</div>
);
}
Custom attribute
const theme = getTheme('data-color-mode');
Checking theme on load
import { getTheme, initTheme } from '@alex.radulescu/styled-static';
// Initialize theme
initTheme({ defaultTheme: 'light', useSystemPreference: true });
// Get current theme after initialization
const current = getTheme();
console.log(`Active theme: ${current}`);