Skip to content

Commit d02d76c

Browse files
immohammadjavedimmohammadjaved
committed
docs(readme): Update SSR safe in readme
1 parent 286f26a commit d02d76c

File tree

3 files changed

+19
-5
lines changed

3 files changed

+19
-5
lines changed

‎README.md‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
[![Downloads](https://img.shields.io/npm/dm/@angularui/theme.svg)](https://www.npmjs.com/package/@angularui/theme)
55
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
66

7-
Modern Theme Management for Angular - A lightweight, feature-rich theme library with automatic dark mode detection, SSR support, and zero configuration required.
7+
Modern Theme Management for Angular - A lightweight, feature-rich theme library with automatic dark mode detection, SSR-safe, and zero configuration required.
88

99
**🌐 [Live Demo](https://angularcafe.github.io/angularui-theme/)**
1010

1111
## 🌟 Features
1212

1313
- **🎨 Automatic Theme Detection** - Supports light, dark, and system themes with OS preference detection
1414
- **⚡ Angular 20 Signals** - Built with modern Angular signals for optimal performance and reactivity
15-
- **🖥️ SSR Compatible** - Works perfectly with Angular SSR and server-side rendering
15+
- **🖥️ SSR-safe** - No hydration mismatch, works with Angular SSR out of the box
1616
- **🎯 Zero Configuration** - Works out of the box with sensible defaults
1717
- **🔧 Flexible Strategy** - Choose between class-based or attribute-based theming
1818
- **📦 Tiny Bundle** - Lightweight with no unnecessary dependencies
@@ -106,6 +106,13 @@ Add this **inline** script to your `index.html` `<head>`:
106106
```
107107
**Why inline?** Angular does not provide a way to inject scripts into the HTML `<head>` at build time. For true FOUC prevention, the script must run immediately as the HTML is parsed—before any content is rendered. External scripts or Angular providers/services run too late to prevent a flash. This is why the script must be copied directly into your `index.html` head.
108108

109+
**Note:** This approach is SSR-safe: the initial HTML uses the default theme, and the correct theme is applied instantly on page load.
110+
111+
#### FAQ: SSR, LocalStorage, and Theme Flash
112+
- The SSR HTML always uses the default theme, since user preferences are only available in the browser.
113+
- The inline script applies the correct theme instantly on page load, so users never see a flash of the wrong theme.
114+
- This is the standard, SSR-safe approach used by modern theme libraries (like next-themes).
115+
109116
## Why @angularui/theme?
110117

111118
- Native Angular integration: signals, DI, and standalone components

‎projects/theme/README.md‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
[![Downloads](https://img.shields.io/npm/dm/@angularui/theme.svg)](https://www.npmjs.com/package/@angularui/theme)
55
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
66

7-
Modern Theme Management for Angular - A lightweight, feature-rich theme library with automatic dark mode detection, SSR support, and zero configuration required.
7+
Modern Theme Management for Angular - A lightweight, feature-rich theme library with automatic dark mode detection, SSR-safe, and zero configuration required.
88

99
**🌐 [Live Demo](https://angularcafe.github.io/angularui-theme/)**
1010

1111
## 🌟 Features
1212

1313
- **🎨 Automatic Theme Detection** - Supports light, dark, and system themes with OS preference detection
1414
- **⚡ Angular 20 Signals** - Built with modern Angular signals for optimal performance and reactivity
15-
- **🖥️ SSR Compatible** - Works perfectly with Angular SSR and server-side rendering
15+
- **🖥️ SSR-safe** - No hydration mismatch, works with Angular SSR out of the box
1616
- **🎯 Zero Configuration** - Works out of the box with sensible defaults
1717
- **🔧 Flexible Strategy** - Choose between class-based or attribute-based theming
1818
- **📦 Tiny Bundle** - Lightweight with no unnecessary dependencies
@@ -106,6 +106,13 @@ Add this **inline** script to your `index.html` `<head>`:
106106
```
107107
**Why inline?** Angular does not provide a way to inject scripts into the HTML `<head>` at build time. For true FOUC prevention, the script must run immediately as the HTML is parsed—before any content is rendered. External scripts or Angular providers/services run too late to prevent a flash. This is why the script must be copied directly into your `index.html` head.
108108

109+
**Note:** This approach is SSR-safe: the initial HTML uses the default theme, and the correct theme is applied instantly on page load.
110+
111+
#### FAQ: SSR, LocalStorage, and Theme Flash
112+
- The SSR HTML always uses the default theme, since user preferences are only available in the browser.
113+
- The inline script applies the correct theme instantly on page load, so users never see a flash of the wrong theme.
114+
- This is the standard, SSR-safe approach used by modern theme libraries (like next-themes).
115+
109116
## Why @angularui/theme?
110117

111118
- Native Angular integration: signals, DI, and standalone components

‎projects/theme/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@angularui/theme",
3-
"version": "0.1.0",
3+
"version": "0.1.1",
44
"description": "Modern Theme Management for Angular - A lightweight, feature-rich theme library with automatic dark mode detection, SSR support, and zero configuration required.",
55
"keywords": [
66
"angular",

0 commit comments

Comments
 (0)