Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions docs/STYLES.md
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,56 @@ The library provides sensible default styles for all Markdown elements out of th
> }), []);
> ```

## Dark Mode

The library ships with light-mode color defaults. It does not include a `colorScheme` prop — just like React Native's `Text`, theming is left to the consumer.

To support dark mode, create `MarkdownStyle` objects for each color scheme and switch between them using `useColorScheme()`. Your values always win over the defaults — you only need to specify the colors you want to change:

```tsx
import { useColorScheme } from 'react-native';
import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
import type { MarkdownStyle } from 'react-native-enriched-markdown';

const lightMarkdownStyle: MarkdownStyle = {
blockquote: { backgroundColor: '#F9FAFB', borderColor: '#D1D5DB' },
code: { color: '#E01E5A', backgroundColor: '#FDF2F4' },
table: {
headerBackgroundColor: '#F3F4F6',
rowEvenBackgroundColor: '#FFFFFF',
rowOddBackgroundColor: '#F9FAFB',
},
// ... override any other colors for light mode
};

const darkMarkdownStyle: MarkdownStyle = {
paragraph: { color: '#E5E7EB' },
blockquote: { backgroundColor: '#1F2937', borderColor: '#4B5563' },
code: { color: '#F87171', backgroundColor: '#1F2937' },
table: {
headerBackgroundColor: '#1F2937',
rowEvenBackgroundColor: '#111827',
rowOddBackgroundColor: '#1A1A2E',
borderColor: '#374151',
},
// ... override any other colors for dark mode
};

function App() {
const colorScheme = useColorScheme();

return (
<EnrichedMarkdownText
markdown={content}
markdownStyle={colorScheme === 'dark' ? darkMarkdownStyle : lightMarkdownStyle}
/>
);
}
```

> [!NOTE]
> **Performance:** Define style objects outside the component (as shown above) or wrap them in `useMemo` so the same object reference is reused across renders.

## Style Properties Reference

### Block Styles (paragraph, h1-h6, blockquote, list, codeBlock)
Expand Down
4 changes: 4 additions & 0 deletions docs/TEXT.md
Original file line number Diff line number Diff line change
Expand Up @@ -104,3 +104,7 @@ When text is selected, `react-native-enriched-markdown` provides enhanced copy f
## Customizing Styles

`react-native-enriched-markdown` allows customizing styles of all Markdown elements using the `markdownStyle` prop. See the [Style Properties Reference](STYLES.md) for a detailed overview of all available style properties.

### Dark Mode

The library uses light-mode defaults. To support dark mode, pass a dark `markdownStyle` object — your values always take priority over the defaults. See the [Dark Mode](STYLES.md#dark-mode) section in the Style Properties Reference for a ready-to-use example with `useColorScheme()`.
Loading