{"id":17096208,"url":"https://github.com/josefaidt/svelte-themer","last_synced_at":"2025-04-09T18:16:33.054Z","repository":{"id":40635824,"uuid":"244203822","full_name":"josefaidt/svelte-themer","owner":"josefaidt","description":"A theming engine for your Svelte apps using CSS Variables, persisted.","archived":false,"fork":false,"pushed_at":"2022-02-01T23:34:06.000Z","size":1646,"stargazers_count":141,"open_issues_count":2,"forks_count":14,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-07T23:05:09.280Z","etag":null,"topics":["css-variables","svelte","theme","theming"],"latest_commit_sha":null,"homepage":"https://svelte-themer.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/josefaidt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-01T18:41:55.000Z","updated_at":"2025-04-07T19:04:28.000Z","dependencies_parsed_at":"2022-09-14T10:10:40.609Z","dependency_job_id":null,"html_url":"https://github.com/josefaidt/svelte-themer","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josefaidt%2Fsvelte-themer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josefaidt%2Fsvelte-themer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josefaidt%2Fsvelte-themer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josefaidt%2Fsvelte-themer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/josefaidt","download_url":"https://codeload.github.com/josefaidt/svelte-themer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247744297,"owners_count":20988782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-variables","svelte","theme","theming"],"created_at":"2024-10-14T14:44:51.122Z","updated_at":"2025-04-09T18:16:33.033Z","avatar_url":"https://github.com/josefaidt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-themer\n\nA theming engine for your Svelte apps using CSS Variables, persisted.\n\n```html\n\u003cscript\u003e\n  import { ThemeWrapper, ThemeToggle } from 'svelte-themer'\n\u003c/script\u003e\n\n\u003cThemeWrapper\u003e\n  \u003cmain\u003e\n    \u003ch1\u003esvelte themer\u003c/h1\u003e\n    \u003cThemeToggle /\u003e\n  \u003c/main\u003e\n\u003c/ThemeWrapper\u003e\n\n\u003cstyle\u003e\n  :global(html) {\n    background-color: var(--theme-colors-background, initial);\n    color: var(--theme-colors-text, initial);\n  }\n\u003c/style\u003e\n```\n\n## CSS Variables\n\nCSS variables are created for app-wide consumption using the nomenclature `--[prefix]-[property!]`\n\nFor example:\n\n- `--theme-text` by default where `property = 'text'`\n- `--base-text` where `prefix = 'base'` and `property = 'text'`\n- `--text` where `prefix = null || undefined` and `property = 'text'`\n\nNow supports adding _all_ theme colors as theme-specific CSS variables:\n\n```js\nconst lightTheme = {\n  light: {\n    colors: {\n      text: '#282230',\n      background: {\n        _: '#f1f1f1',\n        contrast: '#b1b1b1',\n      },\n      primary: '#01796f',\n      primary_dark: '#016159',\n      secondary: '#562931',\n    },\n  },\n}\n```\n\nTurns into\n\n```css\n:root {\n  --theme-light-colors-text: #282230;\n  --theme-light-colors-background: #f1f1f1;\n  --theme-light-colors-background-contrast: #b1b1b1;\n  --theme-light-colors-primary: #01796f;\n  --theme-light-colors-primary_dark: #016159;\n  --theme-light-colors-secondary: #562931;\n}\n\n[theme='light'],\n.theme--light {\n  --theme-colors-text: var(--theme-light-colors-text);\n  --theme-colors-background: var(--theme-light-colors-background);\n  --theme-colors-background-contrast: --var(\n    theme-light-colors-background-contrast\n  );\n  --theme-colors-primary: var(--theme-light-colors-primary);\n  --theme-colors-primary_dark: var(--theme-light-colors-primary_dark);\n  --theme-colors-secondary: var(--theme-light-colors-secondary);\n}\n```\n\n## Getting Started\n\nUse the preset themes supplied by svelte-themer or create your own! Theme names are specified by the key, and all properties are transformed into CSS Variables.\n\n**NOTE**: svelte-themer is preset with 3 themes to showcase the flexible functionality of `toggle()`\n\n```js\n// src/themes.js\nexport const themes = {\n  light: {\n    colors: {\n      text: '#282230',\n      background: {\n        _: '#f1f1f1',\n        contrast: '#b1b1b1',\n      },\n      primary: '#01796f',\n      primary_dark: '#016159',\n      secondary: '#562931',\n    },\n  },\n  dark: {\n    colors: {\n      text: '#f1f1f1',\n      background: {\n        _: '#27323a',\n        contrast: '#0d1215',\n      },\n      primary: '#01978b',\n      primary_dark: '#00887c',\n      secondary: '#fe8690',\n    },\n  },\n}\n```\n\n## Components\n\nWith svelte-themer there are two components: a wrapper component, and a button for toggling themes. The provided button is more for convenience as the function used to toggle themes is exposed to the theme context.\n\n### ThemeWrapper\n\n```html\n\u003c!-- src/App.svelte --\u003e\n\u003cscript\u003e\n  import { ThemeWrapper } from 'svelte-themer'\n  import themes from './themes.js'\n\u003c/script\u003e\n\n\u003cThemeWrapper themes=\"{themes}\"\u003e\n  \u003cmain\u003e\n    \u003ch1\u003eMy Svelte App\u003c/h1\u003e\n  \u003c/main\u003e\n\u003c/ThemeWrapper\u003e\n```\n\nThis allows any components nested to access the theme [Context](https://svelte.dev/tutorial/context-api) which wraps a writeable `theme` [store](https://svelte.dev/tutorial/writable-stores)\n\n#### Theme Persistence\n\nBy default svelte-themer persists the chosen theme with `localStorage`, and can be modified via the `key` prop. To disabled persistence, provide `key={null}`.\n\n```html\n\u003cThemeWrapper key=\"my-svelte-app__theme\"\u003e\n  \u003c!--  --\u003e\n\u003c/ThemeWrapper\u003e\n```\n\n#### Theme Loading Order\n\n`ThemeWrapper` will load a theme on first visit based on the following order:\n\n1. User-provided - The value specified in the `theme` prop.\n2. Saved - User's stored choice (from `localStorage`)\n3. Prefers - User's Operating System settings (via `prefers-color-scheme`)\n4. Fallback - First theme in `themes` specified (from presets, `light`)\n\nBy default, the \"prefers\" step will choose a theme based on OS settings, however this can be modified to directly choose \"light\" or \"dark\" by leveraging the `mode` prop:\n\n```html\n\u003cThemeWrapper mode=\"auto|light|dark\"\u003e\n  \u003c!--  --\u003e\n\u003c/ThemeWrapper\u003e\n```\n\n### Accessing Theme Context\n\nDescribed below is the pattern used for accessing `theme` context to create your own toggle button.\n\n```html\n\u003c!-- src/MyToggleButton.svelte --\u003e\n\u003cscript\u003e\n  import { getContext } from 'svelte'\n  let { toggle, current, theme } = getContext('theme')\n\u003c/script\u003e\n\n\u003cbutton on:click=\"{toggle}\"\u003e\n  \u003cslot\u003e{$current}\u003c/slot\u003e\n\u003c/button\u003e\n```\n\n### Provided Theme Toggle\n\n```html\n\u003c!-- src/App.svelte --\u003e\n\u003cscript\u003e\n  import { ThemeWrapper, ThemeToggle } from 'svelte-themer'\n  import themes from './themes.js'\n\u003c/script\u003e\n\n\u003cThemeWrapper themes=\"{themes}\"\u003e\n  \u003cmain\u003e\n    \u003ch1\u003eMy Svelte App\u003c/h1\u003e\n    \u003cThemeToggle /\u003e\n  \u003c/main\u003e\n\u003c/ThemeWrapper\u003e\n```\n\n## Actions\n\n### use:theme\n\n```svelte\n\u003cscript\u003e\n  import { theme } from 'svelte-themer/use'\n  export let myTheme = {\n    text: 'red',\n  }\n\u003c/script\u003e\n\n\u003cdiv use:theme=\"{myTheme}\"\u003e\n  \u003cp\u003eHello, World!\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cstyle\u003e\n  p {\n    color: var(--text);\n  }\n\u003c/style\u003e\n```\n\n### use:stylesheet\n\n```svelte\n\u003cscript\u003e\n  import { stylesheet } from 'svelte-themer/use'\n  export let myTheme = {\n    text: 'red',\n  }\n\u003c/script\u003e\n\n\u003cdiv use:stylesheet=\"{myTheme}\"\u003e\n  \u003cp\u003eHello, World!\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cstyle\u003e\n  p {\n    color: var(--text);\n  }\n\u003c/style\u003e\n```\n\n## Contributing\n\nRefer to the [contributing guidelines](CONTRIBUTING.md).\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosefaidt%2Fsvelte-themer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosefaidt%2Fsvelte-themer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosefaidt%2Fsvelte-themer/lists"}