{"id":35206703,"url":"https://github.com/daacdev/styled-fleet","last_synced_at":"2026-04-25T00:39:37.627Z","repository":{"id":38332876,"uuid":"349317854","full_name":"daacdev/styled-fleet","owner":"daacdev","description":"Building theming for styled components","archived":false,"fork":false,"pushed_at":"2023-01-07T23:38:58.000Z","size":8452,"stargazers_count":1,"open_issues_count":36,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-12T08:24:50.473Z","etag":null,"topics":["fleet","react","reactjs","styled","styled-components","styled-fleet","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/daacdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-19T06:01:54.000Z","updated_at":"2021-06-26T18:32:57.000Z","dependencies_parsed_at":"2023-02-08T03:31:08.916Z","dependency_job_id":null,"html_url":"https://github.com/daacdev/styled-fleet","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/daacdev/styled-fleet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daacdev%2Fstyled-fleet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daacdev%2Fstyled-fleet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daacdev%2Fstyled-fleet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daacdev%2Fstyled-fleet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daacdev","download_url":"https://codeload.github.com/daacdev/styled-fleet/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daacdev%2Fstyled-fleet/sbom","scorecard":{"id":316107,"data":{"date":"2025-08-11","repo":{"name":"github.com/daacdev/styled-fleet","commit":"f66193de7bd0d64607ef715d0521f6b98a993cea"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.5,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/16 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/main.yml:1","Warn: no topLevel permission defined: .github/workflows/publish-release.yml:1","Warn: no topLevel permission defined: .github/workflows/size.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/daacdev/styled-fleet/main.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/daacdev/styled-fleet/main.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/daacdev/styled-fleet/main.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-release.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/daacdev/styled-fleet/publish-release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-release.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/daacdev/styled-fleet/publish-release.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-release.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/daacdev/styled-fleet/publish-release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/daacdev/styled-fleet/size.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/size.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/daacdev/styled-fleet/size.yml/main?enable=pin","Info:   0 out of   5 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   3 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 18 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"64 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-xq7p-g2vc-g82p","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q","Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T00:12:57.495Z","repository_id":38332876,"created_at":"2025-08-18T00:12:57.495Z","updated_at":"2025-08-18T00:12:57.495Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28117483,"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","status":"online","status_checked_at":"2025-12-29T02:00:07.021Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["fleet","react","reactjs","styled","styled-components","styled-fleet","theme","theming","typescript"],"created_at":"2025-12-29T15:00:20.346Z","updated_at":"2025-12-29T15:00:44.634Z","avatar_url":"https://github.com/daacdev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eStyled Fleet\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n  Building theming for styled components\n\n  [![CI](https://github.com/daacdev/styled-fleet/actions/workflows/main.yml/badge.svg)](https://github.com/daacdev/styled-fleet/actions/workflows/main.yml)\n  ![GitHub](https://img.shields.io/github/license/daacdev/styled-fleet)\n  ![npm](https://img.shields.io/npm/v/styled-fleet)\n  [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\n\u003c/div\u003e\n\n\u003cimg alt=\"styled-fleet\" src=\"https://github.com/daacdev/styled-fleet/blob/ae4a1047a8b4be2f4280678b135e8ab375059ddb/example/demo/demo.gif\" /\u003e\n\nEnglish | [Español](./README_es_CO.md)\n\n## 🎴 [Demo](https://daacdev.github.io/styled-fleet/)\n\n## 📦 Install\n\n```bash\nnpm install styled-fleet\n```\n\n```bash\nyarn add styled-fleet\n```\n\n## 🔨 Usage\n\nCreate a `theme`\n\n```jsx\nimport {createTheme} from 'styled-fleet';\n\nconst theme = createTheme({\n  colors: {\n    white: '#fff',\n    black: '#000',\n  },\n  space: [\"0rem\", \"0.5rem\", \"1rem\", \"1.5rem\", \"2rem\", \"2.5rem\", \"3rem\"],\n  font: {\n    sizes: ['0.75rem', '0.875rem', '1rem', '1.25rem', '1.5rem', '1.75rem', '2rem', '2.5rem', '3rem'],\n    family: ['sans-serif'],\n    weights: {\n      body: 400,\n      heading: 700,\n      bold: 700,\n      light: 300,\n      medium: 500,\n      semibold: 500,\n    }\n  },\n  modes: {\n    light: {\n      background: '$theme-colors-white',\n      text: '$theme-colors-black',\n    },\n    dark: {\n      background: '$theme-colors-black',\n      text: '$theme-colors-white',\n    },\n  },\n});\n```\n\nCreate a `styled component` and access the `theme` with $theme-... , or if you prefer you can use the css notation with var(--theme-...)\n\n```jsx\nimport styled from 'styled-components';\n\nexport const Button = styled.button`\n  display: inline-block;\n  border: none;\n  padding: $theme-space-2 $theme-space-4;\n  margin: $theme-space-0;\n  text-decoration: none;\n  font-family: $theme-font-family-0;\n  font-size: $theme-font-sizes-2;\n  font-weight: $theme-font-weights-medium;\n  cursor: pointer;\n  text-align: center;\n  transition: background 250ms ease-in-out, transform 150ms ease;\n  color: $theme-text;\n  background-color: var(--theme-background);\n`;\n```\n\nAdd the `theme` to `ThemeProvider` and use the component\n\n```jsx\nimport * as React from 'react';\nimport {ThemeProvider} from 'styled-fleet';\n\nexport const App = () =\u003e {\n  return (\n    \u003cThemeProvider theme={theme} \u003e\n      \u003cButton\u003e\n        Example Button\n      \u003c/Button\u003e\n    \u003c/ThemeProvider\u003e\n  );\n};\n```\n\n## 🔧 API\n\n### `createTheme`\n\nFunction that allows you to create a `theme`.\n|Parameters|Type|Description|\n|----------|----|-----------|\n|theme (required)|[DefaultTheme](#DefaultTheme)|Theming context object|\n|options (optional)|[ThemeOptions](#ThemeOptions)|Options object for theme processing|\n\n#### `DefaultTheme`\n\nObject with custom key / value that will define the global css variables, the `styles` and `modes` keys are reserved to define global styles and `theme` modes respectively, for example.\n\n```javascript\n{\n  colors: ...,\n  sizes: ...,\n  fonts: ...,\n  shadows: ...,\n  ...\n  styles: {\n    body: {\n      backgroundColor: '$theme-background',\n      color: '$theme-text',\n      ...\n    },\n    a: ...,\n    h1: ...,\n    h2: ...,\n    code: ...,\n    pre: ...,\n    hr: ...,\n    ...\n  },\n  modes: {\n    light: {\n      background: '$theme-colors-white',\n      text: '$theme-colors-black',\n      ...\n    },\n    dark: {\n      background: '$theme-colors-black',\n      text: '$theme-colors-white',\n      ...\n    },\n    ...\n  },\n}\n```\n\n#### `ThemeOptions`\n\nObject with the following keys\n\n|Key|Type|Description|Default|Example|\n|---|----|-----------|-------|-------|\n|prefix (optional)|string|Prefix to use in css variables|'theme'|$theme-colors-red|\n|useLocalStorage (optional)|boolean|Enable or disable local storage to store the set theme mode|true|useLocalStorage: true|\n|defaultMode (optional)|string|Set the default theme mode|'default'|defaultMode: 'light'|\n|scope (optional)|string or styled-component|Allows you to set the scope of global CSS variables|':root'|scope: 'body'\u003cbr /\u003escope: Sider|\n|functions (optional)|Function[]|An array of custom functions that can be accessed by @\\\u003cfunction name\u003e(...arguments), This allows you to extend and add features to your css styles|[]|functions: [cssVar, ...]\n\n`Note:`\n\n* All custom functions will be processed with string parameters, so the function will have to ensure the data type conversion and error handling in case of any wrong parameter.\n* You can use external package functions like polished or others.\n* The functions have to return a correct value for the css styles, it can be a string or a number.\n* Sometimes you have to set a name to the function so that `styled-fleet` can access it, example\n\n```javascript\nconst rgba = (red, green, blue, alpha) =\u003e { ... };\n\nObject.defineProperty(rgba, 'name', { value: 'rgba' });\n```\n\n`Example:`\n\n```javascript\nimport styled from 'styled-components';\nimport {createTheme} from 'styled-fleet';\nimport {rgba, darken, lighten} from 'polished';\n\nconst theme = { ... };\n\nconst options = {\n  prefix: 'my-prefix',\n  useLocalStorage: false,\n  defaultMode: 'light',\n  scope: ':root',\n  functions: [rgba, darken, lighten],\n};\n\nexport default createTheme(theme, options);\n\n//  To use it in a component\nconst MyComponent = styled.div`\n  padding: $my-prefix-space-2;\n  background-color: @rgba(#000, 0.5);\n  color: @darken(0.2, #fff);\n  border: 1px solid @lighten(.2, #000);\n`;\n```\n\n### `ThemeProvider`\n\nProvider component that provides a theme for all React components under itself.\n\n|Props|Description|value|\n|-----|-----------|-----|\n|theme (required)|Required prop for global app theming|Object returned by createTheme|\n\n`Example:`\n\n```jsx\nimport * as React from 'react';\nimport {createTheme, ThemeProvider} from 'styled-fleet';\n\nconst theme = createTheme({...}, {...});\n\nconst App = () =\u003e {\n  return (\n    \u003cThemeProvider theme={theme}\u003e\n      ...\n    \u003c/ThemeProvider\u003e\n  )\n};\n```\n\n### `useMode`\n\nHook that allows accessing or setting the current theme mode in the context of `ThemeProvider`.\n\n* Does not receive input parameters.\n* Returns a pair of values that can be destructuring into\n  * `mode`, string containing current mode theme.\n  * `setMode`, function that allows setting the theme mode, receives as the only parameter a string that represents the theme to be used.\n\n`Example:`\n\n```jsx\nimport * as React from 'react';\nimport styled from 'styled-components';\nimport { useMode } from 'styled-fleet'\n\nimport { Button } from './Button';\nimport { MoonIcon } from './MoonIcon';\nimport { SunIcon } from './SunIcon';\n\nconst IconButton = styled(Button)`\n  background-color: transparent;\n  border: $theme-borders-0;\n  cursor: pointer;\n  padding: $theme-space-0;\n  color: $theme-color;\n  align-items: center;\n  display: flex;\n  gap: $theme-space-1;\n  outline: none;\n`;\n\nexport const ButtonThemeMode = () =\u003e {\n  const {mode, setMode} = useMode();\n\n  return (\n    \u003cIconButton onClick = {() =\u003e setMode(mode === 'light' ? 'dark' : 'light') } \u003e\n      { mode === 'light'\n        ? ( \u003cMoonIcon /\u003e )\n        : ( \u003cSunIcon /\u003e ) }\n      \u003ch4\u003e Switch to { mode === 'light' ? 'dark' : 'light' } mode \u003c/h4\u003e\n    \u003c/IconButton\u003e\n  );\n};\n```\n\n## ⚠️ Limitations\n\n* Currently it is not possible to access the value of css variables in the first rendering of the application, so functions like polished cssVar that allows obtaining global css variables, will fail if a default value is not specified. This behavior also occurs with styled-components when setting css variables in the root and trying to get their value.\n* When using functions to calculate a value of a css property, it is possible that if you are using css variables and change the theme mode you will not get the expected result, this is because in the first rendering when processing the css styles, the variable css has been changed to the new value calculated by the function, unless the function returns another css variable as a result depending on the theme mode\n\n## License\n\nLicensed under the MIT License.\n\nSee [LICENSE](./LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaacdev%2Fstyled-fleet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaacdev%2Fstyled-fleet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaacdev%2Fstyled-fleet/lists"}