This module provides tools to manage theme preferences (dark or light mode) in a Fresh v2 app. It includes:
- A default script for setting dark mode as the default theme.
- A default script for setting light mode as the default theme.
- A function to toggle between light and dark themes and persist the choice
using
localStorage.
- Default Theme Initialization: Choose between dark or light as the default theme based on user or system preferences.
- Persistent Theme Setting: Saves the selected theme in
localStoragefor consistent experience across sessions. - Simple API: Minimal API with
setThemefor theme management and initial setup scripts.
Import the desired script (dark or light mode) in your app’s main entry point to set the initial theme.
import {
defaultDarkModeScript,
defaultLightModeScript,
setTheme,
} from 'jsr:@elsoul/fresh-theme'Insert the desired theme script in the <head> section of your app to
automatically apply the initial theme based on user settings or system
preferences.
import { asset } from 'fresh/runtime'
import { define } from '@/utils/state.ts'
import { defaultDarkModeScript } from 'jsr:@elsoul/fresh-theme'
export default define.page(function App({ Component, state, url }) {
return (
<html lang={state.locale || 'en'}>
<head>
<script dangerouslySetInnerHTML={{ __html: defaultDarkModeScript }} />
<link rel='stylesheet' href={asset('/styles.css')} />
</head>
<body>
<Component />
</body>
</html>
)
})import { asset } from 'fresh/runtime'
import { define } from '@/utils/state.ts'
import { defaultLightModeScript } from 'jsr:@elsoul/fresh-theme'
export default define.page(function App({ Component, state, url }) {
return (
<html lang={state.locale || 'en'}>
<head>
<script dangerouslySetInnerHTML={{ __html: defaultLightModeScript }} />
<link rel='stylesheet' href={asset('/styles.css')} />
</head>
<body>
<Component />
</body>
</html>
)
})Use the setTheme function to programmatically change the theme between light
and dark modes. This function updates the theme preference in localStorage and
adjusts the <html> element class.
// Example: Setting the theme to dark mode
setTheme('dark')
// Example: Setting the theme to light mode
setTheme('light')JavaScript code to initialize the theme with dark mode as the default. This
script applies the theme based on localStorage or system preference if no
theme is set.
JavaScript code to initialize the theme with light mode as the default. This
script applies the theme based on localStorage or system preference if no
theme is set.
Sets the theme to 'dark' or 'light' and stores the choice in localStorage.
Adjusts the <html> element to reflect the new theme.
- Parameters:
newTheme- The desired theme, either'dark'or'light'.
import { useTheme } from 'jsr:@elsoul/fresh-theme'
function ThemeToggleButton() {
const { theme, setTheme } = useTheme()
const toggleTheme = () => {
const newTheme = theme === 'dark' ? 'light' : 'dark'
setTheme(newTheme)
}
return (
<button onClick={toggleTheme}>
Switch to {theme === 'dark' ? 'Light' : 'Dark'} Mode
</button>
)
}Bug reports and pull requests are welcome on GitHub at https://github.com/elsoul/fresh-theme This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.
The package is available as open source under the terms of the Apache-2.0 License.
Everyone interacting in the SKEET project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.