New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
mode-watcher
Advanced tools
mode-watcher - npm Package Compare versions
Comparing version 0.0.7 to 0.1.0
@@ -1,3 +0,3 @@ | ||
| import { setMode, toggleMode, resetMode, mode } from './mode.js'; | ||
| import { localStorageKey, userPrefersMode, systemPrefersMode, mode, setMode, toggleMode, resetMode } from './mode'; | ||
| export { setMode, toggleMode, resetMode, localStorageKey, userPrefersMode, systemPrefersMode, mode }; | ||
| export { default as ModeWatcher } from './mode-watcher.svelte'; | ||
| export { setMode, toggleMode, resetMode, mode }; |
@@ -1,3 +0,3 @@ | ||
| import { setMode, toggleMode, resetMode, mode } from './mode.js'; | ||
| import { localStorageKey, userPrefersMode, systemPrefersMode, mode, setMode, toggleMode, resetMode } from './mode'; | ||
| export { setMode, toggleMode, resetMode, localStorageKey, userPrefersMode, systemPrefersMode, mode }; | ||
| export { default as ModeWatcher } from './mode-watcher.svelte'; | ||
| export { setMode, toggleMode, resetMode, mode }; |
@@ -1,29 +0,8 @@ | ||
| /// <reference types="svelte" /> | ||
| /** Readonly store with either `"light"` or `"dark"` depending on the active mode */ | ||
| export declare const mode: import("svelte/store").Readable<"dark" | "light">; | ||
| /** | ||
| * Getters | ||
| */ | ||
| /** Get the operating system preference */ | ||
| export declare function getSystemPrefersMode(): 'dark' | 'light'; | ||
| /** Get the user preference */ | ||
| export declare function getUserPrefersMode(): 'dark' | 'light' | 'system'; | ||
| /** Set the active mode */ | ||
| export declare function setActiveMode(value: 'dark' | 'light'): void; | ||
| /** | ||
| * Lightswitch Utility | ||
| */ | ||
| /** | ||
| * Set light/dark class based on user/system preference | ||
| * | ||
| * Should be added to <head> to prevent FOUC | ||
| * | ||
| * This function needs to be able to be stringified and thus it cannot use other functions | ||
| */ | ||
| export declare function setInitialClassState(): void; | ||
| import { localStorageKey, userPrefersMode, systemPrefersMode, derivedMode } from './stores'; | ||
| /** Toggle between light and dark mode */ | ||
| export declare function toggleMode(): void; | ||
| /** Set the mode to light or dark */ | ||
| export declare function setMode(mode: 'dark' | 'light'): void; | ||
| export declare function setMode(mode: 'dark' | 'light' | 'system'): void; | ||
| /** Reset the mode to operating system preference */ | ||
| export declare function resetMode(): void; | ||
| export { localStorageKey, userPrefersMode, systemPrefersMode, derivedMode as mode }; |
102
dist/mode.js
@@ -1,105 +0,15 @@ | ||
| // Modified version of the light switch by: https://skeleton.dev | ||
| import { persisted } from 'svelte-persisted-store'; | ||
| import { get, readonly } from 'svelte/store'; | ||
| import { withoutTransition } from './without-transition'; | ||
| /** | ||
| * Stores | ||
| */ | ||
| const systemPrefersMode = persisted('systemPrefersMode', 'dark'); | ||
| const userPrefersMode = persisted('userPrefersMode', 'system'); | ||
| const activeMode = persisted('mode', 'dark'); | ||
| /** Readonly store with either `"light"` or `"dark"` depending on the active mode */ | ||
| export const mode = readonly(activeMode); | ||
| /** | ||
| * Getters | ||
| */ | ||
| /** Get the operating system preference */ | ||
| export function getSystemPrefersMode() { | ||
| const prefersLightMode = window.matchMedia('(prefers-color-scheme: light)').matches | ||
| ? 'light' | ||
| : 'dark'; | ||
| systemPrefersMode.set(prefersLightMode); | ||
| return prefersLightMode; | ||
| } | ||
| /** Get the user preference */ | ||
| export function getUserPrefersMode() { | ||
| return get(userPrefersMode); | ||
| } | ||
| /** | ||
| * Setters | ||
| */ | ||
| /** Set the user preference */ | ||
| function setUserPrefersMode(value) { | ||
| userPrefersMode.set(value); | ||
| } | ||
| /** Set the active mode */ | ||
| export function setActiveMode(value) { | ||
| withoutTransition(() => { | ||
| const htmlEl = document.documentElement; | ||
| if (value === 'light') { | ||
| htmlEl.classList.remove('dark'); | ||
| htmlEl.style.colorScheme = 'light'; | ||
| } | ||
| else { | ||
| htmlEl.classList.add('dark'); | ||
| htmlEl.style.colorScheme = 'dark'; | ||
| } | ||
| activeMode.set(value); | ||
| }); | ||
| } | ||
| /** | ||
| * Lightswitch Utility | ||
| */ | ||
| /** | ||
| * Set light/dark class based on user/system preference | ||
| * | ||
| * Should be added to <head> to prevent FOUC | ||
| * | ||
| * This function needs to be able to be stringified and thus it cannot use other functions | ||
| */ | ||
| export function setInitialClassState() { | ||
| const htmlEl = document.documentElement; | ||
| let userPref = null; | ||
| try { | ||
| userPref = JSON.parse(localStorage.getItem('userPrefersMode') || 'system'); | ||
| } | ||
| catch { | ||
| // ignore JSON parsing errors | ||
| } | ||
| const systemPref = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'; | ||
| if (userPref === 'light' || | ||
| ((userPref === 'system' || userPref === null) && systemPref === 'light')) { | ||
| htmlEl.classList.remove('dark'); | ||
| htmlEl.style.colorScheme = 'light'; | ||
| } | ||
| else { | ||
| htmlEl.classList.add('dark'); | ||
| htmlEl.style.colorScheme = 'dark'; | ||
| } | ||
| } | ||
| import { get } from 'svelte/store'; | ||
| import { localStorageKey, userPrefersMode, systemPrefersMode, derivedMode } from './stores'; | ||
| /** Toggle between light and dark mode */ | ||
| export function toggleMode() { | ||
| activeMode.update((curr) => { | ||
| const next = curr === 'dark' ? 'light' : 'dark'; | ||
| setUserPrefersMode(next); | ||
| setActiveMode(next); | ||
| return next; | ||
| }); | ||
| userPrefersMode.set(get(derivedMode) === 'dark' ? 'light' : 'dark'); | ||
| } | ||
| /** Set the mode to light or dark */ | ||
| export function setMode(mode) { | ||
| activeMode.update(() => { | ||
| setUserPrefersMode(mode); | ||
| setActiveMode(mode); | ||
| return mode; | ||
| }); | ||
| userPrefersMode.set(mode); | ||
| } | ||
| /** Reset the mode to operating system preference */ | ||
| export function resetMode() { | ||
| activeMode.update(() => { | ||
| setUserPrefersMode('system'); | ||
| const next = getSystemPrefersMode(); | ||
| setActiveMode(next); | ||
| return next; | ||
| }); | ||
| userPrefersMode.set('system'); | ||
| } | ||
| export { localStorageKey, userPrefersMode, systemPrefersMode, derivedMode as mode }; |
| { | ||
| "name": "mode-watcher", | ||
| "version": "0.0.7", | ||
| "version": "0.1.0", | ||
| "exports": { | ||
@@ -51,5 +51,2 @@ ".": { | ||
| "type": "module", | ||
| "dependencies": { | ||
| "svelte-persisted-store": "^0.7.0" | ||
| }, | ||
| "scripts": { | ||
@@ -56,0 +53,0 @@ "dev": "vite dev", |
@@ -24,3 +24,3 @@ # Mode Watcher | ||
| The `ModeWatcher` component will automatically detect the user's preferences and apply/remove the `dark` class, along with the corresponding `color-scheme` style attribute to the `html` element. | ||
| The `ModeWatcher` component will automatically detect the user's preferences and apply/remove the `"dark"` class, along with the corresponding `color-scheme` style attribute to the `html` element. | ||
@@ -49,3 +49,3 @@ `ModeWatcher` will automatically track operating system preferences and apply these if no user preference is set. If you wish to disable this behavior, set the `track` prop to `false`: | ||
| A function that sets the current mode. It accepts a string with the value `light` or `dark`. | ||
| A function that sets the current mode. It accepts a string with the value `"light"`, `"dark"` or `"system"`. | ||
@@ -75,3 +75,3 @@ ```svelte | ||
| A readable store that contains the current mode. It can be `light` or `dark`. | ||
| A readable store that contains the current mode. It can be `"light"` or `"dark"` or `undefined` if evaluated on the server. | ||
@@ -93,1 +93,9 @@ ```svelte | ||
| ``` | ||
| ### userPrefersMode | ||
| A writeable store that represents the user's mode preference. It can be `"light"`, `"dark"` or `"system"`. | ||
| ### systemPrefersMode | ||
| A readable store that represents the operating system's mode preference. It can be `"light"`, `"dark"` or `undefined` if evaluated on the server. Will automatically track changes to the operating system's mode preference unless this is disabled with the `tracking()` method which takes a boolean. Normally this is disabled by setting the `track` prop to false in the `<ModeWatcher>` component. |
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by23.53%
14350
- Dependency count
- decreased by-50%
1
- Number of package files
- increased by20%
12
- Lines of code
- increased by12.32%
228
- Number of lines in readme file
- increased by8.89%
98
Worsened metrics
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
- Removedsvelte-persisted-store@^0.7.0
- Removedsvelte-persisted-store@0.7.0(transitive)