### Astro Layout Example
Source: https://github.com/saadeghi/theme-change/blob/master/README.md
Demonstrates how to import and use a custom layout component in an Astro project. This snippet shows basic page content wrapped within the MyCrazyLayout.
```astro
import MyCrazyLayout from '../layouts/MyCrazyLayout.astro';
---
My page content, wrapped in a layout!
```
--------------------------------
### Integrate Theme Change with NPM in SolidJS
Source: https://github.com/saadeghi/theme-change/blob/master/README.md
This example demonstrates integrating the theme-change library within a SolidJS project. The `onMount` function is used to initialize `themeChange()`. Note that the `false` parameter is not required for SolidJS projects.
```javascript
import { onMount } from 'solid-js'
import { themeChange } from 'theme-change'
onMount(async () => {
themeChange();
})
```
--------------------------------
### Integrate Theme Change with NPM in JavaScript
Source: https://github.com/saadeghi/theme-change/blob/master/README.md
This demonstrates how to install and import the theme-change library into a standard JavaScript project using NPM. It initializes the theme change functionality with default settings.
```javascript
import { themeChange } from 'theme-change'
themeChange()
```
--------------------------------
### Astro Layout Integration for Global Theme Change
Source: https://github.com/saadeghi/theme-change/blob/master/README.md
This example demonstrates integrating the theme-change library into an Astro layout file to apply theme changes across all pages in an MPA project. It includes two scripts within the `` section: one to prevent FART by setting the initial theme from local storage, and another to initialize the `themeChange` function.
```html
---
---
My Cool Astro Layout Wraping All My Pages
```
--------------------------------
### Integrate Theme Change with NPM in Vue 3 (Composition API)
Source: https://github.com/saadeghi/theme-change/blob/master/README.md
This example shows the integration of the theme-change library within a Vue 3 project using the Composition API. The `onMounted` hook is used to call `themeChange(false)`, which is necessary for Vue projects.
```javascript
import { onMounted } from 'vue'
import { themeChange } from 'theme-change'
export default {
setup() {
onMounted(() => {
themeChange(false)
})
},
}
```
--------------------------------
### CSS OS Color Scheme Detection
Source: https://github.com/saadeghi/theme-change/blob/master/README.md
Applies specific CSS variables based on the user's operating system color scheme preference. This example sets a dark background color when the OS is in dark mode.
```css
@media (prefers-color-scheme: dark){
:root{
--my-color: #252b30;
}
}
```
--------------------------------
### Include Theme Change via CDN
Source: https://github.com/saadeghi/theme-change/blob/master/README.md
This snippet shows how to include the theme-change library directly into your HTML using a CDN link. This is the simplest way to add the functionality without any installation steps.
```html
```
--------------------------------
### PurgeCSS Safelisting for Themes
Source: https://github.com/saadeghi/theme-change/blob/master/README.md
Configuration for PurgeCSS to prevent theme-specific CSS rules from being removed during the build process. It includes examples for both PostCSS configuration and inline CSS comments.
```javascript
module.exports = {
purge: {
options: {
safelist: [/data-theme$/],
},
},
}
```
--------------------------------
### Alternative Safelist Configuration Directly in CSS
Source: https://context7.com/saadeghi/theme-change/llms.txt
This CSS code provides an alternative method for safelisting theme-related styles directly within the CSS file, bypassing typical CSS purging. It uses special `/*! purgecss start ignore */` and `/*! purgecss end ignore */` comments to mark sections that should not be processed by PurgeCSS. Inside these blocks, styles for different themes (`dark`, `light`, `cyberpunk`) are defined using CSS custom properties. Regular CSS rules that follow this block might be purged if unused, demonstrating how to protect specific theme styles while allowing other unused styles to be removed.
```css
/* Alternative: Safelist directly in CSS */
/*! purgecss start ignore */
[data-theme='dark'] {
--primary-color: #1a1a2e;
--secondary-color: #16213e;
--accent-color: #0f3460;
}
[data-theme='light'] {
--primary-color: #f8f9fa;
--secondary-color: #e9ecef;
--accent-color: #dee2e6;
}
[data-theme='cyberpunk'] {
--primary-color: #ff00ff;
--secondary-color: #00ffff;
--accent-color: #ffff00;
}
/*! purgecss end ignore */
/* Regular CSS - will be purged if unused */
.container {
background: var(--primary-color);
color: var(--secondary-color);
}
```
--------------------------------
### Initialize Theme Switching with themeChange()
Source: https://context7.com/saadeghi/theme-change/llms.txt
Initializes theme switching functionality. It automatically detects and activates elements with theme-related data attributes. The function can be configured to attach event listeners on DOMContentLoaded or run immediately, making it suitable for both vanilla JavaScript and framework integrations.
```javascript
import { themeChange } from 'theme-change'
themeChange()
```
```javascript
import { useEffect } from 'react'
import { themeChange } from 'theme-change'
function App() {
useEffect(() => {
themeChange(false) // false prevents DOMContentLoaded waiting
}, [])
return (
)
}
```
```javascript
import { onMounted } from 'vue'
import { themeChange } from 'theme-change'
export default {
setup() {
onMounted(() => {
themeChange(false)
})
return { /* your reactive data */ }
}
}
```
--------------------------------
### Custom localStorage Key Configuration
Source: https://github.com/saadeghi/theme-change/blob/master/README.md
Shows how to specify a custom localStorage key for persisting theme preferences. This is achieved by adding a `data-key` attribute to the HTML elements responsible for theme control.
```html