{"id":16679292,"url":"https://github.com/ryan-gordon/ionic-dynamic-themes","last_synced_at":"2025-10-06T18:18:44.423Z","repository":{"id":79095866,"uuid":"131515969","full_name":"Ryan-Gordon/ionic-dynamic-themes","owner":"Ryan-Gordon","description":"A practical example of how you can be dynamically theming your Ionic application like ToDoist","archived":false,"fork":false,"pushed_at":"2019-03-14T07:36:20.000Z","size":68,"stargazers_count":20,"open_issues_count":1,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-06T01:07:00.393Z","etag":null,"topics":["ionic","theming","todoist","typescript"],"latest_commit_sha":null,"homepage":null,"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/Ryan-Gordon.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2018-04-29T17:43:30.000Z","updated_at":"2023-12-04T03:59:24.000Z","dependencies_parsed_at":"2023-07-03T13:31:31.881Z","dependency_job_id":null,"html_url":"https://github.com/Ryan-Gordon/ionic-dynamic-themes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ryan-Gordon/ionic-dynamic-themes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ryan-Gordon%2Fionic-dynamic-themes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ryan-Gordon%2Fionic-dynamic-themes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ryan-Gordon%2Fionic-dynamic-themes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ryan-Gordon%2Fionic-dynamic-themes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ryan-Gordon","download_url":"https://codeload.github.com/Ryan-Gordon/ionic-dynamic-themes/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ryan-Gordon%2Fionic-dynamic-themes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278656037,"owners_count":26023130,"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-10-06T02:00:05.630Z","response_time":65,"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":["ionic","theming","todoist","typescript"],"created_at":"2024-10-12T13:34:35.210Z","updated_at":"2025-10-06T18:18:44.394Z","avatar_url":"https://github.com/Ryan-Gordon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ionic-dynamic-themes\n[![HitCount](http://hits.dwyl.io/Ryan-Gordon/ionic-dynamic-themes.svg)](http://hits.dwyl.io/Ryan-Gordon/ionic-dynamic-themes)\n\n\nThis repository was developed as a part of a medium post which you can [find here](https://medium.freecodecamp.org/how-to-dynamically-theme-your-ionic-application-and-make-your-users-happy-ffa17e15dbf7) if you want to run through it.\n\n\nThere are 3 examples of how to use this dynamic theming in your own projects! These are :  \n1. A side menu theme switcher (reengineered Ionic sidemenu)  \n2. A settings page with a list of colours  \n3. A modal that can be popped up allowing users to change the theme\n\n\n## Setup\n\nRequirements to use this project:\nYou need to have NodeJS and NPM installed \n\n##### Cordova \u0026 Ionic Cli\nTo install both of them on your system just launch this command:\n```sh\n$ sudo npm install cordova ionic -g\n```\n\n## Install NPM Dependencies\nOnce you clone this repository, run this command on your terminal to install all needed dependencies:\n```sh\n$ npm install\n```\n\n## Launching the App\nAfter installing the needed dependencies you are done, launch your app with a simple\n```sh\n$ ionic serve\n```\n## How it works\nThis project accomplishes the dynamic theming by holding a number of SCSS files, 1 for each theme that will be used. Once these are imported during project setup, they can be referenced at run-time using their class names. A global AppState class holds the current theme that is being used. When a user selects a new theme, the state is updated with this desired theme.  \n\nThis theme state is mapped to a `\u003cdiv\u003e` tag which encompasses the rest of the page and thus applies the theme. Given the global nature of AppState, if you change the theme in a page, any other pages which also use the AppState to get their styling will be updated too. \n\n### References \n\n\nHere are some references which use the same concept to do a dark mode.\n[Devdatic](https://devdactic.com/dynamic-theming-ionic/)\n[ionic3-components](https://github.com/yannbf/ionic3-components)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryan-gordon%2Fionic-dynamic-themes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryan-gordon%2Fionic-dynamic-themes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryan-gordon%2Fionic-dynamic-themes/lists"}