Skip to main content

ThemedText

A themed text component that automatically adapts to your app's theme configuration, providing consistent styling across light and dark modes.

Installation​

import { ThemedText } from "@/core/components/ThemedText";

Basic Usage​

import React from "react";
import { ThemedText } from "@/core/components/ThemedText";

export default function ThemedTextExample() {
  return <ThemedText type="title">Welcome to our themed app</ThemedText>;
}

Props​

PropTypeDefaultDescription
type"default" | "title" | "defaultSemiBold" | "subtitle" | "link""default"Text type variant
lightColorstring-Color to use in light theme
darkColorstring-Color to use in dark theme
childrenReactNode-Required. Text content
styleStyleProp<TextStyle>-Additional text styles

Text Types​

Default​

<ThemedText type="default">
  This is default themed text that adapts to light/dark mode.
</ThemedText>

Title​

<ThemedText type="title">Large title text</ThemedText>

Subtitle​

<ThemedText type="subtitle">Subtitle text with medium emphasis</ThemedText>
<ThemedText type="link">Clickable link text</ThemedText>

Semi Bold​

<ThemedText type="defaultSemiBold">Semi-bold emphasized text</ThemedText>

Custom Colors​

<ThemedText lightColor="#333333" darkColor="#ffffff">
  Custom colored themed text
</ThemedText>

Accessibility​

  • Automatically maintains proper contrast ratios between light and dark themes
  • Uses semantic text colors that adapt to the current theme
  • Supports screen readers with appropriate text styling