Skip to main content
Home
Browse packagesDocsSign in

@elsoul/fresh-theme@1.3.0
Built and signed on GitHub Actions

latest
elsoul/fresh-theme

Theme Module for Fresh v2 App

This package works with Deno, BrowsersIt is unknown whether this package works with Cloudflare Workers, Node.js, Bun
It is unknown whether this package works with Cloudflare Workers
It is unknown whether this package works with Node.js
This package works with Deno
It is unknown whether this package works with Bun
This package works with Browsers
JSR Score
100%
Published
a month ago (1.3.0)

Theme Module for Fresh v2 App

This module provides tools to manage theme preferences (dark or light mode) in a Fresh v2 app. It includes:

  1. A default script for setting dark mode as the default theme.
  2. A default script for setting light mode as the default theme.
  3. A function to toggle between light and dark themes and persist the choice using localStorage.

Features

  • 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 localStorage for consistent experience across sessions.
  • Simple API: Minimal API with setTheme for theme management and initial setup scripts.

Installation and Usage

1. Import the Module

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'

2. Adding the Theme Script to Your App

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.

Example for Default Dark Mode

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>
  )
})

Example for Default Light Mode

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>
  )
})

3. Changing the Theme Programmatically

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')

API Reference

defaultDarkModeScript

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.

defaultLightModeScript

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.

setTheme(newTheme: 'dark' | 'light')

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'.

useTheme hook

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>
  )
}

Contributing

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.

License

The package is available as open source under the terms of the Apache-2.0 License.

Code of Conduct

Everyone interacting in the SKEET project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.

Built and signed on
GitHub Actions
View transparency log

Add Package

deno add jsr:@elsoul/fresh-theme

Import symbol

import * as fresh_theme from "@elsoul/fresh-theme";

---- OR ----

Import directly with a jsr specifier

import * as fresh_theme from "jsr:@elsoul/fresh-theme";

Add Package

npx jsr add @elsoul/fresh-theme

Import symbol

import * as fresh_theme from "@elsoul/fresh-theme";

Add Package

yarn dlx jsr add @elsoul/fresh-theme

Import symbol

import * as fresh_theme from "@elsoul/fresh-theme";

Add Package

pnpm dlx jsr add @elsoul/fresh-theme

Import symbol

import * as fresh_theme from "@elsoul/fresh-theme";

Add Package

bunx jsr add @elsoul/fresh-theme

Import symbol

import * as fresh_theme from "@elsoul/fresh-theme";