{"id":19220056,"url":"https://github.com/nativescript-community/css-theme","last_synced_at":"2025-07-05T18:04:04.120Z","repository":{"id":57129395,"uuid":"293458476","full_name":"nativescript-community/css-theme","owner":"nativescript-community","description":null,"archived":false,"fork":false,"pushed_at":"2024-06-03T19:13:51.000Z","size":249,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-20T21:36:04.948Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nativescript-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2020-09-07T07:48:15.000Z","updated_at":"2024-06-03T19:13:55.000Z","dependencies_parsed_at":"2024-01-09T10:49:46.061Z","dependency_job_id":"b3fde5bb-81c1-48ae-9eba-7037784e5419","html_url":"https://github.com/nativescript-community/css-theme","commit_stats":{"total_commits":25,"total_committers":2,"mean_commits":12.5,"dds":0.24,"last_synced_commit":"aca50a113e1e58c711e8e96b38a5d5d7c63ba7ba"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fcss-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fcss-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fcss-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fcss-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativescript-community","download_url":"https://codeload.github.com/nativescript-community/css-theme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253851070,"owners_count":21973674,"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":[],"created_at":"2024-11-09T14:33:48.215Z","updated_at":"2025-05-13T01:11:02.325Z","avatar_url":"https://github.com/nativescript-community.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm](https://img.shields.io/npm/v/@nativescript-community/css-theme.svg)](https://www.npmjs.com/package/@nativescript-community/css-theme)\n[![npm](https://img.shields.io/npm/dt/@nativescript-community/css-theme.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/css-theme)\n[![GitHub forks](https://img.shields.io/github/forks/nativescript-community/css-theme.svg)](https://github.com/nativescript-community/css-theme/network)\n[![GitHub stars](https://img.shields.io/github/stars/nativescript-community/css-theme.svg)](https://github.com/nativescript-community/css-theme/stargazers)\n\n## Installation\n\n* `tns plugin add @nativescript-community/css-theme`\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n## Usage\n\nThe theme will style your application using Element selectors - you don't need to add CSS classes on every element you\nneed to style.\n\n```javascript\nimport \"@nativescript-community/css-theme\";\n```\n\nThis JS takes care of updating several classes on the app root elements, something that got\n[included in @nativescript/core](https://github.com/NativeScript/NativeScript/issues/7313) in {N} 6.1.\n\n## Setting Dark or Light mode\n\nSetting the theme mode from light to dark is now easier - instead of loading a new file, just find the root view and\nset `.ns-dark` class to it - this will change all colorization to dark tones. For instance, if your page root is\nRadSideDrawer, just add a class to it, like this:\n\n```html\n\u003cdrawer:RadSideDrawer class=\"ns-dark\" xmlns:drawer=\"nativescript-ui-sidedrawer\"\u003e\n    ...\n\u003c/drawer:RadSideDrawer\u003e\n```\n\nIf your root is a frame, you can do this\n\n```html\n\u003cFrame class=\"ns-dark\" defaultPage=\"root\"\u003e\u003c/Frame\u003e\n```\n\nFor **Angular**, if your root is a `page-router-outlet`, you can set the .ns-dark class on it - it will pass it down to the\nFrame it renders.\n\n## Setting Dark or Light mode from JavaScript\n\nSetting the theme mode from JavaScript is also much easier now - just import the theme and call Theme.setMode() with\nyour preferred mode - either Theme.Light or Theme.Dark, like this:\n\n```javascript\nimport Theme from \"@nativescript-community/css-theme\";\n\nTheme.setMode(Theme.Dark); // Or Theme.Light\n```\n\nKeep in mind that in {N} 6.2 these changes will override the default system mode. To \nrestore it, use Theme.Auto (available since Theme 2.3.0):\n\n```javascript\nimport Theme from \"@nativescript-community/css-theme\";\n\nTheme.setMode(Theme.Auto);\n```\n\nAdditionally there is another helper method - toggleMode, which can be used without parameters to just toggle the mode\nor with a boolean parameter to ensure light or dark mode is set:\n\n```javascript\nimport Theme from \"@nativescript-community/css-theme\";\n\nTheme.toggleDarkMode(); // to toggle between the modes\n\n// or\n\nTheme.toggleDarkMode(true);  // to ensure dark mode\nTheme.toggleDarkMode(false); // to ensure light mode\n```\n\n##### A note of warning\n\nDue to limitation in Playground the JS Theme API cannot be imported like an ES6 module in a TS/Angular projects. You'll\nhave to resort to requiring it:\n\n```javascript\nconst Theme = require(\"@nativescript-community/css-theme\");\n\nTheme.setMode(Theme.Dark); // Or Theme.Light\n```\n\n## More root classes\n\nIn addition to `.ns-light` and `.ns-dark` classes, the theme's little JavaScript file introduces `.ns-root` on the root element,\n`.ns-android/.ns-ios` depending on the current platform (which the theme extensively uses) and additionally\n`.ns-portrait/.ns-landscape` and `.ns-phone/.ns-tablet`, which should be self-explanatory.\nOf course `.ns-portrait/.ns-landscape` get updated on orientation change, so you can use it to show a two pane layout\nin landscape, for instance.\n\n\n## Using Theme variables\n\nThere are several functions and mixins in the core theme, that can be used in your projects, as long as you're using\nSASS/SCSS.\n\nIf you need to access specific theme variables like simple colors or sizes, do it through the `const` function:\n\n```scss\nButton {\n    background-color: const(forest);\n    height: const(btn-height);\n}\n```\n\nYou can get light/dark colors:\n\n```scss\nButton {\n    color: light(primary);\n\n    .ns-dark \u0026 {\n        color: dark(primary);\n    }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fcss-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript-community%2Fcss-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fcss-theme/lists"}