{"id":28435499,"url":"https://github.com/br3akzero/themeit","last_synced_at":"2026-05-04T00:31:05.290Z","repository":{"id":63387546,"uuid":"562243741","full_name":"br3akzero/themeit","owner":"br3akzero","description":"Modern Web implementation of a theme switcher","archived":false,"fork":false,"pushed_at":"2023-09-23T15:09:12.000Z","size":3777,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-22T03:58:52.580Z","etag":null,"topics":["blazing","browser-native","css","dark-theme","javascript","lightweight","modern-web","react","small","theme","theming","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/br3akzero.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-05T18:32:03.000Z","updated_at":"2023-01-12T14:33:26.000Z","dependencies_parsed_at":"2025-02-26T21:00:14.828Z","dependency_job_id":null,"html_url":"https://github.com/br3akzero/themeit","commit_stats":null,"previous_names":["br3akzero/themeit","rashadatjou/themeit"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/br3akzero/themeit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/br3akzero%2Fthemeit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/br3akzero%2Fthemeit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/br3akzero%2Fthemeit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/br3akzero%2Fthemeit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/br3akzero","download_url":"https://codeload.github.com/br3akzero/themeit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/br3akzero%2Fthemeit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32590079,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T22:12:39.696Z","status":"ssl_error","status_checked_at":"2026-05-03T22:09:10.534Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["blazing","browser-native","css","dark-theme","javascript","lightweight","modern-web","react","small","theme","theming","typescript"],"created_at":"2025-06-05T20:39:48.852Z","updated_at":"2026-05-04T00:31:05.196Z","avatar_url":"https://github.com/br3akzero.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ThemeIT! (Theme Switcher)\n\n![Monarch butterfly hatched from a cocoon](public/poster-image.jpg)\n\n\u003e Image: Monarch Butterfly hatched from a cocoon.\n\nA lightweight browser native way to switch color themes. `ThemeIT!` follows the [Modern Web](https://modern-web.dev/guides/going-buildless/css/) implementation for css theming and leverages the awesome power of `CSS` variables and `HTML` link element + with `Javascript` to allow theme customization inside of your web app, react app or website.\n\n## Package information\n\n**`@themeit/native`**\n\n| Detail             | Value                                      |\n| ------------------ | ------------------------------------------ |\n| Version            | `1.1.1`                                    |\n| Size               | `5.0 kB`                                   |\n| Size (gzip)        | `2.0 kB`                                   |\n| SHASUM             | `7aa83b7f67a48d3612dd535c1ec073a3c940223f` |\n| Dependency (count) | `0`                                        |\n\n**`@themeit/react`**\n\n| Detail             | Value                                      |\n| ------------------ | ------------------------------------------ |\n| Version            | `1.1.1`                                    |\n| Size               | `3.7 kB`                                   |\n| Size (gzip)        | `1.7 kB`                                   |\n| SHASUM             | `acc3e0e127a8437e13878960917a939482b67e46` |\n| Dependency (count) | `2`                                        |\n\n## Install\n\n### `npm`\n\n```bash\nnpm install @themeit/native\nnpm install @themeit/react # If you support React\n```\n\n### `yarn`\n\n```bash\nyarn add @themeit/native\nyarn add @themeit/react # If you support React\n```\n\n## Setup instructions\n\n### Step 1 (Prep work)\n\n1. Prepare your `CSS` by separating each theme into it's own `CSS` file.\n2. Use the `:root` pseudo-class for setting all variables.\n3. Make sure that all variables match.\n\n\u003e You can look at the `examples/` directory to get a visual representations of what\n\u003e needs to be done\n\n### Step 2 (Loading CSS)\n\n1. Add all CSS theme files inside of your HTML file.\n2. Set the `media(prefers-color-scheme: \u003cname\u003e)` attribute for each theme\n3. For the main theme please set the following `(prefers-color-scheme: light)` as the `media` attribute.\n\n\u003e Important when setting the `(prefers-color-scheme: \u003cname\u003e)` the `\u003cname\u003e` will be used by `ThemeIT!` internally and externally. This key/name will be used by you when you want to change the theme using `ThemeIT!`. Please name them accordingly.\n\n## How to use (Javascript/Typescript)\n\n### Initialize\n\nImport `ThemeIT!` and call `init` method in root file before using any other methods. (Do this after [Setup instructions](#setup-instructions)).\n\n1. Argument #1 `defaultTheme` what theme should be set\n   as the initial theme. (Default: auto)\n2. Argument #2 `autoLoad` whatever you should load the `defaultTheme` during initialization.\n\n```Javascript\nimport { init } from \"@themeit/native\";\n\ninit(\"my-theme\", true)\n```\n\n```Typescript\nimport type { DefaultTheme } from \"@themeit/native\";\nimport { init } from \"@themeit/native\";\n\n// DefaultTheme = \"auto\" | \"light\" | \"dark\";\ntype MyThemes = DefaultTheme | \"my-theme\";\n\ninit\u003cMyThemes\u003e(\"my-theme\", true)\n```\n\n### System theme\n\nThe default option of ThemeIT! is to use the system theme. This is the out-of-the-box behavior so no setup\nis needed. To toggle this feature programmatically you can use `useTheme(\"auto\")`.\n\n### Change theme\n\nTo change themes please use the `useTheme` method. Make that the name here matches the one you used when setting `media(prefers-color-scheme: \u003cname\u003e)` of CSS file.\n\n```Javascript\n// Javascript\nimport { useTheme } from \"@themeit/native\";\n\nconst myNewTheme = \"my-theme\";\nuseTheme(newTheme);\n```\n\n```Typescript\n// Typescript\nimport { useTheme } from \"@themeit/native\";\n\ntype MyThemes = \"auto\" | \"my-theme\";\n\nconst myNewTheme = \"my-theme\";\n\nuseTheme\u003cMyThemes\u003e(newTheme); // Nice autocomplete :D\n```\n\n### Get theme\n\nTo get the current theme use the `getTheme` method.\n\n```Javascript\n// Javascript\nimport { getTheme } from \"@themeit/native\";\n\nconst theme = getTheme();\n```\n\n```Typescript\n// Typescript\nimport { getTheme } from \"@themeit/native\";\n\ntype MyTheme = \"auto\" | \"dark\" | \"my-theme\";\n\nconst theme = getTheme\u003cMyTheme\u003e();\n```\n\n### Get all themes\n\nTo get all the themes available use the `getThemeList` method.\n\n```Javascript\n// Javascript\nimport { getThemeList } from \"@themeit/native\";\n\nconst themeList = getThemeList();\n```\n\n```Typescript\n// Typescript\nimport { getThemeList } from \"@themeit/native\";\n\nconst themeList: Array\u003cstring\u003e = getThemeList();\n```\n\n## How to use (React)\n\n### Initialize\n\nImport `@themeit/react` and setup the `ThemeProvider` in root file before using any other methods.\nNote that `ThemeProvider` should be above `React.StrictMode` as it won't work the other way\naround. (Do this after [Setup instructions](#setup-instructions)).\n\n**`ThemeProvider` Props:**\n\n1. `defaultTheme` – what theme should be set as the initial theme. (Default: auto)\n2. `autoLoad` – whatever you should load the `defaultTheme` during initialization.\n\n```Javascript\n// Javascript\nimport { ThemeProvider } from \"@themeit/react\";\n\nReactDOM.createRoot(document.getElementById(\"root\")).render(\n \u003cThemeProvider defaultTheme=\"my-theme\" autoLoad\u003e\n    \u003cReact.StrictMode\u003e\n      \u003cApp /\u003e\n    \u003c/React.StrictMode\u003e\n  \u003c/ThemeProvider\u003e\n);\n```\n\n```Typescript\n// Typescript\nimport { ThemeProvider } from \"@themeit/react\";\n\ntype CustomThemes =  \"light\" | \"dark\" | \"my-theme\";\n\nReactDOM.createRoot(document.getElementById(\"root\") as HTMLElement).render(\n \u003cThemeProvider\u003cCustomThemes\u003e defaultTheme=\"my-theme\" autoLoad\u003e\n    \u003cReact.StrictMode\u003e\n      \u003cApp /\u003e\n    \u003c/React.StrictMode\u003e\n  \u003c/ThemeProvider\u003e\n);\n```\n\n### Actions\n\nTo change the theme use the `useTheme` hook from `@themeit/react`. The hook returns a tuple with `[state, action]` we are interested in the `action` here.\n\n**Action Props:**\n\n1. `changeTheme` – Call to change the current theme of the browser.\n\n```Javascript\nimport { useTheme } from \"@themeit/react\";\n\nconst MyApp = () =\u003e {\n   const [_, { changeTheme }] = useTheme();\n\n   return (\n      \u003cbutton onClick={() =\u003e { changeTheme(\"dark\") }}\u003e\n      Turn of the lights!\n      \u003c/button\u003e\n   )\n}\n```\n\n```Typescript\nimport { useTheme } from \"@themeit/react\";\n\ntype MyThemes = \"light\" | \"dark\" | \"my-theme\";\n\nconst MyApp = () =\u003e {\n   const [_, { changeTheme }] = useTheme\u003cMyThemes\u003e();\n\n   return (\n      \u003cbutton onClick={() =\u003e { changeTheme(\"dark\") }}\u003e\n      Turn of the lights!\n      \u003c/button\u003e\n   )\n}\n```\n\n### State\n\nTo get the current theme use the `useTheme` hook from `@themeit/react`. The hook returns a tuple with `[state, action]` we are interested in the `state` here.\n\n**State Props:**\n\n1. `theme` – Current theme of `ThemeIT!`\n2. `themeList` – All themes available for `ThemeIT!`\n\n```Javascript\n// Javascript\nimport { useTheme } from \"@themeit/react\";\n\nconst MyApp = () =\u003e {\n   const [{ theme }] = useTheme();\n\n   return (\n      div\u003e\n         \u003ch1\u003e\n            The curren theme is: {theme}\n         \u003c/h1\u003e\n         \u003ccode\u003e\n         {JSON.stringify(themeList, null, 2)}\n         \u003c/code\u003e\n      \u003c/div\u003e\n   )\n}\n```\n\n```Typescript\n// Typescript\nimport { useTheme } from \"@themeit/react\";\n\ntype MyThemes = \"light\" | \"dark\" | \"my-theme\";\n\nconst MyApp = () =\u003e {\n   const [{ theme, themeList }] = useTheme\u003cMyThemes\u003e();\n\n   return (\n      \u003cdiv\u003e\n         \u003ch1\u003e\n            The curren theme is: {theme}\n         \u003c/h1\u003e\n         \u003ccode\u003e\n         {JSON.stringify(themeList, null, 2)}\n         \u003c/code\u003e\n      \u003c/div\u003e\n   )\n}\n```\n\n## Contribution\n\nThe project could use support for: `Vue`, `Angular`, `NextJS`, `Svelte` and `Remix.run`. If you are willing to contribute please follow [CONTRIBUTE.md](./CONTRIBUTE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbr3akzero%2Fthemeit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbr3akzero%2Fthemeit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbr3akzero%2Fthemeit/lists"}