Custom Theme Example
Configure light and dark themes.
Live Demo
🎨 Custom Theme Demo
Demonstrates custom style effects of light and dark themes
☀️ Light Theme Preview
Header
Content Area
🌙 Dark Theme Preview
Header
Content Area
Light Theme
import DsMarkdown from 'ds-markdown';
<DsMarkdown theme="light" interval={20}>
# Light Theme
This is an example of light theme.
</DsMarkdown>Dark Theme
<DsMarkdown theme="dark" interval={20}>
# Dark Theme
This is an example of dark theme.
</DsMarkdown>Dynamic Theme Switching
import { useState } from 'react';
import DsMarkdown from 'ds-markdown';
function App() {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
return (
<>
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Toggle Theme
</button>
<DsMarkdown theme={theme} interval={20}>
# Dynamic Theme
Click the button to toggle the theme.
</DsMarkdown>
</>
);
}