{"id":15018441,"url":"https://github.com/nativescript/theme","last_synced_at":"2025-04-04T17:10:27.667Z","repository":{"id":10113553,"uuid":"64524068","full_name":"NativeScript/theme","owner":"NativeScript","description":"@nativescript/theme","archived":false,"fork":false,"pushed_at":"2024-07-22T20:28:16.000Z","size":4730,"stargazers_count":128,"open_issues_count":40,"forks_count":44,"subscribers_count":44,"default_branch":"master","last_synced_at":"2024-10-29T15:51:51.829Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://v7.docs.nativescript.org/ui/theme","language":"SCSS","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.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},"funding":{"github":"NativeScript","open_collective":"nativescript"}},"created_at":"2016-07-30T03:28:57.000Z","updated_at":"2024-09-22T09:43:27.000Z","dependencies_parsed_at":"2024-11-05T18:36:32.223Z","dependency_job_id":"1c65b7f8-f01d-4686-81ec-88400ad43703","html_url":"https://github.com/NativeScript/theme","commit_stats":{"total_commits":399,"total_committers":29,"mean_commits":"13.758620689655173","dds":0.4736842105263158,"last_synced_commit":"d8482ed20b499dbe413499a7a538c7ccb077efec"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Ftheme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Ftheme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Ftheme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Ftheme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NativeScript","download_url":"https://codeload.github.com/NativeScript/theme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247217222,"owners_count":20903009,"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-09-24T19:51:58.290Z","updated_at":"2025-04-04T17:10:27.643Z","avatar_url":"https://github.com/NativeScript.png","language":"SCSS","readme":"# NativeScript Theme\n\n- [NativeScript Theme](#nativescript-theme)\n  - [Usage](#usage)\n  - [Usage before NativeScript 6.1](#usage-before-nativescript-61)\n  - [Setting Dark or Light mode](#setting-dark-or-light-mode)\n  - [Setting Dark or Light mode from JavaScript](#setting-dark-or-light-mode-from-javascript)\n        - [A note of warning](#a-note-of-warning)\n  - [More root classes](#more-root-classes)\n  - [Using Theme variables](#using-theme-variables)\n  - [CSS variables](#css-variables)\n  - [Kendo UI ThemeBuilder support](#kendo-ui-themebuilder-support)\n  - [Theme classes and compatibility](#theme-classes-and-compatibility)\n  - [Should I use sass or node-sass](#should-i-use-sass-or-node-sass)\n  - [Screenshots](#screenshots)\n  - [Contributing](#contributing)\n  - [Publishing](#publishing)\n  - [Breaking changes](#breaking-changes)\n  - [Awesome Contributors](#awesome-contributors)\n  - [LICENSE](#license)\n\n## Usage\n\nThe core theme supports light and dark core styling and skins on top of that. To load the core theme styling, just\nload the core CSS and its default skin:\n\n```css\n@import \"@nativescript/theme/css/core.css\";\n@import \"@nativescript/theme/css/default.css\";\n```\n\nor alternatively SCSS:\n\n```scss\n@import \"@nativescript/theme/core\";\n@import \"@nativescript/theme/default\";\n```\n\nIf you want, you can choose from several different skins. To do that, you can change the second CSS/SCSS file to the\npreferred skin name:\n\n```css\n@import \"@nativescript/theme/css/core.css\";\n@import \"@nativescript/theme/css/blue.css\";\n```\n\nor\n\n```scss\n@import \"@nativescript/theme/core\";\n@import \"@nativescript/theme/blue\";\n```\n\nIn order to import just the Theme variables in one of your modules, use this:\n\n```scss\n@import \"@nativescript/theme/scss/variables\";\n```\n\nIt will import just the variables and mixins, without any additional styling.\n\nHere is the old list of Theme skins - the first two are now the Core default Light and Dark skins, the rest are\nall the Light skins available, listed by name.\n\n![Multiple Platforms](http://docs.nativescript.org/img/theme/color-schemes-all.png)\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\nAdditionally, if you need to create you own skin, you can start just from the core theme - it includes the sizing and\ninitial styling of the components.\n\n## Usage before NativeScript 6.1\n\nIn order to use Theme 2.0 before {N} 6.1, you will also need to include a small JS file in your project:\n\n```javascript\nimport \"@nativescript/theme\";\n```\n\nThis JS takes care of updating several classes on the app root elements, something that got\n[included in tns-core-modules](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/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/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/theme\";\n\nTheme.toggleMode(); // to toggle between the modes\n\n// or\n\nTheme.toggleMode(true);  // to ensure dark mode\nTheme.toggleMode(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/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\nThe newest addition is `.ns-statusbar-transparent` since 2.0.4 - add this class to your root element, if you have enabled\ntransparent status bar in the OS and your ActionBar gets underneath it.\n\n\u003e Keep in mind that **Android APIs before 21** don't support transparent status bars and this will result\nin an undesired top ActionBar padding!\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\nor alternatively set them both in one go - this mixin does the same as the upper example:\n\n```scss\nButton {\n    @include colorize($color: primary);\n}\n```\n\nYou can darken/lighten a color depending on its background (darken for light theme and lighten for dark theme):\n\n```scss\nButton {\n    @include colorize($contrasted-border-color: accent background 20%);\n}\n```\n\nThe above example uses the contrasted function to check the contrast level of the background and adjust the lightness of\nthe accent color according to it.\n\n## CSS variables\n\nThe Theme now exports all its internal variables to custom CSS ones in the .ns-root and .ns-modal classes.\nThis is also done for Kendo based skins. You can use them to inherit your styles from the Theme, if using CSS.\nA list of the supported custom CSS variables follows:\n\n| Simple Colors | Constants | Light Colors | Dark Colors |\n|---------|---------|---------|---------|\n| --color-black | --const-font-size | --light-primary | --dark-primary |\n| --color-white | --const-background-alt-10 | --light-background | --dark-background |\n| --color-grey | --const-btn-color-secondary | --light-accent | --dark-accent |\n| --color-grey-light | --const-btn-color-disabled | --light-complementary-color | --dark-complementary-color |\n| --color-charcoal | --const-btn-font-size | --light-complementary | --dark-complementary |\n| --color-transparent | --const-btn-min-width | --light-background-alt-5 | --dark-background-alt-5 |\n| --color-aqua | --const-btn-height | --light-background-alt-10 | --dark-background-alt-10 |\n| --color-blue | --const-btn-padding-x | --light-background-alt-20 | --dark-background-alt-20 |\n| --color-brown | --const-btn-padding-y | --light-secondary | --dark-secondary |\n| --color-forest | --const-btn-margin-x | --light-disabled | --dark-disabled |\n| --color-grey-dark | --const-btn-margin-y | --light-text-color | --dark-text-color |\n| --color-purple | --const-btn-radius | --light-headings-color | --dark-headings-color |\n| --color-lemon | --const-headings-margin-bottom | --light-tab-text-color | --dark-tab-text-color |\n| --color-lime | --const-headings-font-weight | --light-accent-dark | --dark-accent-dark |\n| --color-orange | --const-border-width | --light-accent-light | --dark-accent-light |\n| --color-ruby | --const-border-radius | --light-accent-transparent | --dark-accent-transparent |\n| --color-sky | --const-border-radius-sm | --light-primary-accent | --dark-primary-accent |\n| --color-error | --const-border-radius-lg | --light-background-accent | --dark-background-accent |\n|  | --const-disabled-opacity | --light-background-dark-accent | --dark-background-dark-accent |\n|  | --const-icon-font-size | --light-item-active-color | --dark-item-active-color |\n|  | --const-icon-font-size-lg | --light-item-active-background | --dark-item-active-background |\n|  |  | --light-btn-color | --dark-btn-color |\n|  |  | --light-item-active-icon-color | --dark-item-active-icon-color |\n|  |  | --light-btn-color-inverse | --dark-btn-color-inverse |\n|  |  | --light-btn-color-secondary | --dark-btn-color-secondary |\n\nUse them like this:\n\n```css\n.my-accented-class {\n    color: var(--light-accent);\n}\n```\n\nFor now these CSS variables are not used internally, so changing them won't change the look of your skin. This is planned\nfor after HSL color support comes in NativeScript 6.2.\n\n## Kendo UI ThemeBuilder support\n\nThe theme now supports inheriting the [Kendo UI ThemeBuilder](https://themebuilder.telerik.com/) theme variables. Just head\nthere, customize your Keno UI SASS theme and hit the Download button. You will get a ZIP with two files in it - the theme CSS\nthat you can use to style your web app, and `variables.scss` - the one you need for your NativeScript theme. It will look\nsomething like this:\n\n```scss\n$base-theme:Default;\n$skin-name:test;\n$swatch-name:Default Purple;\n$border-radius: 10px;\n$accent: #bf70cc;\n$info: #3e80ed;\n$success: #5ec232;\n$warning: #fdce3e;\n$error: #d51923;\n$text-color: #656565;\n$bg-color: #ffffff;\n$base-text: #656565;\n$base-bg: #f6f6f6;\n$hovered-text: #656565;\n$hovered-bg: #ededed;\n$selected-text: #ffffff;\n$selected-bg: #bf70cc;\n$series-a: #ff6358;\n$series-b: #ffd246;\n$series-c: #78d237;\n$series-d: #28b4c8;\n$series-e: #2d73f5;\n$series-f: #aa46be;\n```\n\nTake this file, add the following under it:\n\n```scss\n// Uncomment this row, if you target compat styling:\n// $compat: true;\n\n@import '~@nativescript/theme/index';\n```\n\nAnd load the file after your core theme. It should just work\u0026trade;. If it doesn't - head for the issues section.\n\n## Theme classes and compatibility\n\nThe old generic theme classes have been retired to avoid clashes with user code. They now live in the .compat world -\nif you want to use them, you should load them separately, like this:\n\n```scss\n@import \"~@nativescript/theme/core.compat\";\n@import \"~@nativescript/theme/blue.compat\";\n```\n\nAs of 2.0, the theme now utilizes a simplified BEM approach for the new element classes, that might be needed here or there.\nFor instance, the buttons need `.-primary` and `.-outline` modifiers, instead of the old `.btn-primary` and\n`.btn-outline` classes. All element classes (which are not needed by default, except if you want to style a component\nto look like another one) are namespaced, so for instance a button is `.nt-button`, an action bar is `.nt-action-bar` and a ListView is\n`.nt-list-view`.\n\n## Should I use sass or node-sass\n\nTheme 2.0 is developed using SASS. The NPM package used was sass (formerly dart-sass), however it can be used with either sass or node-sass. The difference between them is that sass doesn't depend on a native module (unless you add fibers) and is a little slower (30%) than node-sass, however it doesn't need recompilation if you change Node versions often. If you decide to use it, you should update your webpack config and change the sass-loader options to load sass instead (node-sass is the default sass-loader implementation), like this:\n\n```javascript\n{\n    loader: \"sass-loader\",\n    options: {\n        implementation: require(\"sass\")\n    }\n}\n```\n\n## Screenshots\n\n![](screenshots/ios-1.png)\n![](screenshots/ios-2.png)\n![](screenshots/ios-3.png)\n\u003cbr\u003e\n![](screenshots/android-1.png)\n![](screenshots/android-2.png)\n![](screenshots/android-3.png)\n\n## Contributing\n\nClone this repo, and then use the `tns run` command to launch the demo app on your device or emulator of choice.\n\n```\ntns run ios\n\n// or\n\ntns run android\n```\n\nIf you’d like to toggle the color scheme from light to dark, open the sidedrawer, scroll down to \"Themes\" at the bottom, and toggle away.\n\n## Publishing\n\n*NOTE*: Only authorized authors can publish updates.\n\n**IMPORTANT**: Always make sure you have run the demo app in iOS or Android to verify any changes as well as ensure the latest `css` has been built before doing the following:\n\n* Bump version in `package.json`\n* Adjust `nativescript-theme-core.md` if any changes to the published `README` are needed.\n\n```\nnpm run builder\ncd nativescript-theme-core\nnpm publish\n```\n\n**IMPORTANT**: Never modify the contents of `nativescript-theme-core` folder directly. The builder creates that everytime and any change you make there will be overwritten.\n\nSetup changelog generation:\n\n```\nnpm install -g conventional-changelog-cli\n```\n\nGenerate changelog workflow:\n\n1. Make changes\n2. Commit those changes - using [these conventions](https://gist.github.com/stephenparish/9941e89d80e2bc58a153).\n3. Make sure Travis turns green\n4. Bump version in `package.json` and `nativescript-theme-core.json`\n5. `conventional-changelog -p angular -i CHANGELOG.md -s`\n6. Commit package.json and CHANGELOG.md files\n7. Tag\n8. Push\n\n## Breaking changes\n\n---\n**NOTE**\n\nNativeScript Theme 1.0 to 2.0 migration guide is available [here](MIGRATION-GUIDE.md).\n\n---\n\n* The theme requires 2 files to be loaded - the core theme and a skin on top of it. Read [Usage](#usage) for more info.\n* The theme is now **applied using Element selectors**, if you need the old classes approach - it has moved to\n.compat CSS/SCSS files, e.g. `core.compat.css` and `blue.compat.css`.\n* Theme 2.0 replaces node-sass with **sass** which is more up to date feature-wise and doesn't have a native dependency.\nIt does still work with node-sass though.\n\n## Awesome Contributors\n\n[\u003cimg alt=\"NathanWalker\" src=\"https://avatars.githubusercontent.com/u/457187?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/NathanWalker) |[\u003cimg alt=\"TheOriginalJosh\" src=\"https://avatars.githubusercontent.com/u/1486275?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/TheOriginalJosh) |[\u003cimg alt=\"tjvantoll\" src=\"https://avatars.githubusercontent.com/u/544280?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/tjvantoll) |[\u003cimg alt=\"NathanaelA\" src=\"https://avatars.githubusercontent.com/u/850871?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/NathanaelA) |[\u003cimg alt=\"triniwiz\" src=\"https://avatars.githubusercontent.com/u/6695919?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/triniwiz) |[\u003cimg alt=\"sis0k0\" src=\"https://avatars.githubusercontent.com/u/7893485?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/sis0k0) |\n:---: |:---: |:---: |:---: |:---: |:---: |\n[NathanWalker](https://github.com/NathanWalker) |[TheOriginalJosh](https://github.com/TheOriginalJosh) |[tjvantoll](https://github.com/tjvantoll) |[NathanaelA](https://github.com/NathanaelA) |[triniwiz](https://github.com/triniwiz) |[sis0k0](https://github.com/sis0k0) |\n[\u003cimg alt=\"sitefinitysteve\" src=\"https://avatars.githubusercontent.com/u/1542376?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/sitefinitysteve) |[\u003cimg alt=\"vakrilov\" src=\"https://avatars.githubusercontent.com/u/4092076?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/vakrilov) |[\u003cimg alt=\"bradmartin\" src=\"https://avatars.githubusercontent.com/u/6006148?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/bradmartin) |[\u003cimg alt=\"firescript\" src=\"https://avatars.githubusercontent.com/u/1789978?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/firescript) |[\u003cimg alt=\"valentinstoychev\" src=\"https://avatars.githubusercontent.com/u/4980822?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/valentinstoychev) |[\u003cimg alt=\"enchev\" src=\"https://avatars.githubusercontent.com/u/5804953?v=3\u0026s=117\" width=\"117\"\u003e](https://github.com/enchev) |\n[sitefinitysteve](https://github.com/sitefinitysteve) |[vakrilov](https://github.com/vakrilov) |[　bradmartin　](https://github.com/bradmartin) |[　firescript　　](https://github.com/firescript) |[valentinstoychev](https://github.com/valentinstoychev) |[　　enchev　　](https://github.com/enchev) |\n[\u003cimg alt=\"bundyo\" src=\"https://avatars.githubusercontent.com/u/98318?s=117\" width=\"117\"\u003e](https://github.com/bundyo) | | | | | |\n[　　bundyo　　](https://github.com/bundyo) | | | | | |\n\n## LICENSE\n\nApache 2.0\n","funding_links":["https://github.com/sponsors/NativeScript","https://opencollective.com/nativescript"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript%2Ftheme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript%2Ftheme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript%2Ftheme/lists"}