{"id":20495321,"url":"https://github.com/kevinast/tw-themes","last_synced_at":"2025-04-13T17:43:45.727Z","repository":{"id":53679010,"uuid":"346699362","full_name":"KevinAst/tw-themes","owner":"KevinAst","description":"powerful tailwind color themes (dynamically selectable at run-time)","archived":false,"fork":false,"pushed_at":"2021-03-22T18:29:29.000Z","size":1226,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-27T08:45:10.741Z","etag":null,"topics":["astx","colors","dark","dark-mode","geeku","tailwindcss","theme","themes","utility","web"],"latest_commit_sha":null,"homepage":"https://tw-themes.js.org/","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/KevinAst.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}},"created_at":"2021-03-11T12:47:02.000Z","updated_at":"2023-02-09T03:29:53.000Z","dependencies_parsed_at":"2022-09-02T18:30:28.989Z","dependency_job_id":null,"html_url":"https://github.com/KevinAst/tw-themes","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinAst%2Ftw-themes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinAst%2Ftw-themes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinAst%2Ftw-themes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinAst%2Ftw-themes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KevinAst","download_url":"https://codeload.github.com/KevinAst/tw-themes/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248756540,"owners_count":21156785,"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":["astx","colors","dark","dark-mode","geeku","tailwindcss","theme","themes","utility","web"],"created_at":"2024-11-15T17:45:27.019Z","updated_at":"2025-04-13T17:43:45.704Z","avatar_url":"https://github.com/KevinAst.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tw-themes\n\n\u003cp style=\"text-align: left;\"\u003e\n  \u003cimg src=\"docs/img/tw-themes-logo.png\"\n       alt=\"powerful tailwind color themes (dynamically selectable at run-time)\"\n       width=\"50%\"\u003e\n\u003c/p\u003e\n\nDeveloping **color themes** _that are dynamically selectable\nat run-time_ is **a tedious and arduous process**.  Ideally **Dark\nMode** would also be included in our requirements list!  While\n**tailwind** provides a powerful foundation to work from, it has no\nreal support for the dynamics that are needed for this task.\n\nIf you are a **tailwind** user _that needs **dynamic color themes**_,\nthis utility may be just what you are looking for!\n\n\u003c!--- Badges ---\u003e \n[![NPM Version\nBadge](https://img.shields.io/npm/v/tw-themes.svg)](https://www.npmjs.com/package/tw-themes)\n\n\u003c!--- *** Section ************************************************************************* ---\u003e \n## Introduction\n\n\u003cul\u003e\u003c!--- indentation hack for github - other attempts with style is stripped (be careful with number bullets) ---\u003e \n\n**tw-themes** is a [tailwindcss] utility that facilitates _**dynamic\ncolor themes that are selectable at run-time**_.\n\nUsing **tw-themes** ...\n\n- You define and use [Context Colors].  These are\n  _abstract colors that have meaning in the context of your\n  application_.  You define them however you wish _(such as `primary`\n  and `secondary`)_, and reference them throughout your markup with\n  **tailwind**'s standard color syntax _(ex: `text-primary`,\n  `bg-secondary-400`, etc.)_.\n\n- You then map **Real Colors** to your **Context Colors** through one\n  or more [Themes], which can be selected at run-time to\n  **change your application colors on the fly!**\n\n  Your colors can be defined either through the **tailwind**'s\n  standard color pallet, or your own custom colors _(or a combination\n  of both)_.\n\n  It's common to use [Color Shading] to accentuate various\n  aspects of your UI.  In **tw-themes** you can define your own shade\n  nomenclature _(e.g. `primaryLight`, `primaryDark`)_, or piggy back\n  off of **tailwind**'s numeric shade scale _(e.g. `primary-50`,\n  `primary-100`, `primary-200`, etc.)_.\n\n- Speaking of color shades, **tw-themes** even allows you to\n  [invert your color shades] at run-time _(light-to-dark,\n  and dark-to-light)_, **in effect doubling the number of color themes\n  available**, and potentially supporting an **automatic dark mode\n  theme** _(depending on how your colors are implemented)_.\n  \n  Of course, you can explicitly define your own\n  [Dark Mode] with minimal effort _(if\n  [Shade Inversion] doesn't produce the desired effect)_\n  ... it's merely a new theme!  Unlike **tailwind**'s new **Dark\n  Mode** feature, using **tw-themes** to define your **dark themes**\n  requires **NO CHANGES** to your markup _(the **tailwind** solution\n  requires you to tediously add the `dark` variant throughout your\n  markup)_.\n\n- Because **tailwind** needs to know about your Context Colors,\n  **tw-themes** provides a utility that auto-generates the required\n  color definitions ... referenced in your `tailwind.config.js` _(part\n  of the build process)_.\n\n- As an internal tidbit, the dynamics of run-time color mapping is\n  accomplished through the use of CSS Variables _(see\n  [How do it know?])_ ... _**inquiring minds want to know!**_\n\n**tw-themes** promotes a \u003cmark\u003e**clean and simple approach**\u003c/mark\u003e to\n _**dynamic color themes**_ that yields \u003cmark\u003e**powerful\n results**\u003c/mark\u003e.\n\n\u003c/ul\u003e\n\n\n\u003c!--- *** Section ************************************************************************* ---\u003e \n## Install\n\n\u003cul\u003e\u003c!--- indentation hack for github - other attempts with style is stripped (be careful with number bullets) ---\u003e \n\n**tw-themes** is a zero-dependent library, other than the\n**tailwindcss** peerDependency _**(v2+)**_, _which most likely you\nhave already installed and configured_.\n\nTo install **tw-themes**:\n\n```shell\nnpm install --save tw-themes\n```\n\n\u003c/ul\u003e\n\n\u003c!--- *** Section ************************************************************************* ---\u003e \n## Getting Started\n\n\u003cul\u003e\u003c!--- indentation hack for github - other attempts with style is stripped (be careful with number bullets) ---\u003e \n\nThe best way to get started is to review the **Comprehensive\nDocumentation**, found at https://tw-themes.js.org/.  This includes\nsections for:\n\n- [Getting Started]\n- [Concepts]\n- a full [API Reference]\n- and more!\n\n\u003c/ul\u003e\n\n\n\u003c!--- *** Section ************************************************************************* ---\u003e \n## See It Live\n\n\u003cul\u003e\u003c!--- indentation hack for github - other attempts with style is stripped (be careful with number bullets) ---\u003e \n\nWant to see **tw-themes** in action? ... take a peek at the [See It\nLive] section _(of the documentation)_.\n\n\u003c/ul\u003e\n\n\u003c!--- *** Section ************************************************************************* ---\u003e \n## Revision History\n\n\u003cul\u003e\u003c!--- indentation hack for github - other attempts with style is stripped (be careful with number bullets) ---\u003e \n\nPlease refer to the [Revision History] _(found in the documentation)_.\n\n\u003c/ul\u003e\n\n\n\u003c!--- *** External Links ******************************************************************* ---\u003e \n[tailwindcss]:               https://tailwindcss.com/\n[Color Shading]:             https://tw-themes.js.org/concepts/shades.html\n[Context Colors]:            https://tw-themes.js.org/concepts/contextColors.html\n[Dark Mode]:                 https://tw-themes.js.org/concepts/darkMode.html\n[How do it know?]:           https://tw-themes.js.org/concepts/how.html\n[invert your color shades]:  https://tw-themes.js.org/concepts/shadeInversion.html\n[Shade Inversion]:           https://tw-themes.js.org/concepts/shadeInversion.html\n[Themes]:                    https://tw-themes.js.org/concepts/themes.html\n[Getting Started]:           https://tw-themes.js.org/start.html\n[Concepts]:                  https://tw-themes.js.org/concepts.html\n[API Reference]:             https://tw-themes.js.org/api.html\n[See It Live]:               https://tw-themes.js.org/seeItLive.html\n[Revision History]:          https://tw-themes.js.org/history.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinast%2Ftw-themes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevinast%2Ftw-themes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinast%2Ftw-themes/lists"}