system theme support #26

New issue

Closed

opened 2026-03-02 05:16:38 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 05:16:38 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hiaaryan/sileo/pull/24
Author: @lubauss
Created: 2/21/2026
Status: ✅ Merged
Merged: 2/22/2026
Merged by: @hiaaryan

Base: main ← Head: feat/theme-support

📝 Commits (1)

1bd0076 feat: add dark/light/system theme support

📊 Changes

2 files changed (+44 additions, -2 deletions)

View changed files

📝 src/styles.css (+10 -0)
📝 src/toast.tsx (+34 -2)

📄 Description

Summary

Add a theme prop to <Toaster> that automatically sets the toast fill color and description text color based on the active theme. Supports 'light', 'dark', and 'system' (auto-detects via prefers-color-scheme).

Problem

Sileo defaults to a white fill (#FFFFFF), making toasts invisible or unreadable in dark mode apps. There's no built-in way to adapt to the user's color scheme.

Solution

New `theme` prop on `SileoToasterProps`

<Toaster theme="dark" />   // dark fill + light text
<Toaster theme="light" />  // white fill + dark text
<Toaster theme="system" /> // auto-detects from OS preference

Theme	Fill Color	Description Text
`light`	`#FFFFFF`	`rgba(0, 0, 0, 0.7)`
`dark`	`#1a1a1a`	`rgba(255, 255, 255, 0.8)`
`system`	Auto-detects via `prefers-color-scheme`	Matches theme

Implementation details

useResolvedTheme hook — listens to matchMedia('(prefers-color-scheme: dark)') changes when theme='system'
THEME_FILLS map — maps resolved theme to fill color, applied as default in store.options
data-theme attribute — set on [data-sileo-viewport] for CSS-based theme targeting
CSS rules — [data-theme="dark"] / [data-theme="light"] for description text color

Files Changed

File	Changes
`src/toast.tsx`	`theme` prop, `useResolvedTheme` hook, `THEME_FILLS`, `data-theme` attr
`src/styles.css`	`[data-theme]` CSS rules for description text color

Backward Compatibility

theme prop is optional — omitting it preserves existing behavior (white fill, no data-theme attr)
Individual fill overrides on toast calls still take precedence

Testing

Set theme="system" and toggle OS dark/light mode — fill and text color should switch automatically
Set theme="dark" — verify description text is readable (light text on dark background)
Omit theme prop — verify behavior is unchanged from current release

Closes #20

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hiaaryan/sileo/pull/24 **Author:** [@lubauss](https://github.com/lubauss) **Created:** 2/21/2026 **Status:** ✅ Merged **Merged:** 2/22/2026 **Merged by:** [@hiaaryan](https://github.com/hiaaryan) **Base:** `main` ← **Head:** `feat/theme-support` --- ### 📝 Commits (1) - [`1bd0076`](https://github.com/hiaaryan/sileo/commit/1bd0076f79152bb6c8cb71218bb47ab404b26abd) feat: add dark/light/system theme support ### 📊 Changes **2 files changed** (+44 additions, -2 deletions) <details> <summary>View changed files</summary> 📝 `src/styles.css` (+10 -0) 📝 `src/toast.tsx` (+34 -2) </details> ### 📄 Description ## Summary Add a `theme` prop to `<Toaster>` that automatically sets the toast fill color and description text color based on the active theme. Supports `'light'`, `'dark'`, and `'system'` (auto-detects via `prefers-color-scheme`). ## Problem Sileo defaults to a white fill (`#FFFFFF`), making toasts invisible or unreadable in dark mode apps. There's no built-in way to adapt to the user's color scheme. ## Solution ### New `theme` prop on `SileoToasterProps` ```tsx <Toaster theme="dark" /> // dark fill + light text <Toaster theme="light" /> // white fill + dark text <Toaster theme="system" /> // auto-detects from OS preference ``` | Theme | Fill Color | Description Text | |-------|-----------|-----------------| | `light` | `#FFFFFF` | `rgba(0, 0, 0, 0.7)` | | `dark` | `#1a1a1a` | `rgba(255, 255, 255, 0.8)` | | `system` | Auto-detects via `prefers-color-scheme` | Matches theme | ### Implementation details - **`useResolvedTheme` hook** — listens to `matchMedia('(prefers-color-scheme: dark)')` changes when `theme='system'` - **`THEME_FILLS` map** — maps resolved theme to fill color, applied as default in `store.options` - **`data-theme` attribute** — set on `[data-sileo-viewport]` for CSS-based theme targeting - **CSS rules** — `[data-theme="dark"]` / `[data-theme="light"]` for description text color ### Files Changed | File | Changes | |------|---------| | `src/toast.tsx` | `theme` prop, `useResolvedTheme` hook, `THEME_FILLS`, `data-theme` attr | | `src/styles.css` | `[data-theme]` CSS rules for description text color | ## Backward Compatibility - `theme` prop is optional — omitting it preserves existing behavior (white fill, no `data-theme` attr) - Individual `fill` overrides on toast calls still take precedence ## Testing 1. Set `theme="system"` and toggle OS dark/light mode — fill and text color should switch automatically 2. Set `theme="dark"` — verify description text is readable (light text on dark background) 3. Omit `theme` prop — verify behavior is unchanged from current release Closes #20 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>