{"id":20810228,"url":"https://github.com/sencha/theming-contest","last_synced_at":"2025-07-25T06:34:56.478Z","repository":{"id":34504687,"uuid":"38445702","full_name":"sencha/theming-contest","owner":"sencha","description":"Sencha Ext jS 6 Theming Contest","archived":false,"fork":false,"pushed_at":"2018-09-14T14:44:37.000Z","size":1595,"stargazers_count":14,"open_issues_count":1,"forks_count":14,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-03-31T08:06:52.406Z","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/sencha.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}},"created_at":"2015-07-02T17:02:49.000Z","updated_at":"2022-10-26T14:38:07.000Z","dependencies_parsed_at":"2022-09-06T04:02:40.025Z","dependency_job_id":null,"html_url":"https://github.com/sencha/theming-contest","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sencha%2Ftheming-contest","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sencha%2Ftheming-contest/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sencha%2Ftheming-contest/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sencha%2Ftheming-contest/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sencha","download_url":"https://codeload.github.com/sencha/theming-contest/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252839918,"owners_count":21812196,"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-17T20:21:14.179Z","updated_at":"2025-05-07T08:22:52.524Z","avatar_url":"https://github.com/sencha.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Sencha App Theming Contest\n\n### Requirements\n* [Download Ext JS 6] (https://www.sencha.com/products/extjs/evaluate/)\n* [Download Sencha Cmd 6] (https://www.sencha.com/products/extjs/cmd-download/)\n* [Download Sencha Inspector Beta] (http://pages.sencha.com/Inspector-Beta.html)\n\n\n### Getting started with Feed Viewer App\n\n* Create a workspace\n```\nsencha -sdk {path/to/Ext-JS-SDK}  generate workspace theming-workspace\ncd theming-workspace/\n```\n* Fork/Clone/Download Feed Viewer sample application on this github page and unzip it in theming-workspace\n\n* Build the Feed Viewer sample application\n```\ncd theming-contest-master\ndelete directory .sencha/workspace (to use theming-workspace)\nsencha app build development\n```\n\n* Start web server and watch changes\n\n    *For feedviewer app using classic toolkit, run*\n    ```\n    sencha app watch classic\n    ```\n    *For feedviewer app using modern toolkit, run*\n    ```\n    sencha app watch modern\n    ```\n\n* View the Feedviewer sample app in browser with platform tag. It will show view with classic toolkit\n```\nhttp://localhost:1841/theming-contest-master/?platformTags=fashion:true\n```\n\n* To view the modern toolkit based view, in Chrome developer tools, toggle device mode icon and select mobile phone\n\n\n### Connect Feed Viewer app to Sencha Inspector\nFollow steps in the document:\nhttp://docs.sencha.com/tools/sencha_inspector/inspecting_desktop_applications.html\n\nOne quick way to inspect your Feedviewer sample app is to use bookmarklet. To add bookmarklet in your browser, \n* Open Inspector app, click on the button \"Quick connect an app with Bookmarklet\"\n* Drag the blue \"Sencha Inspector bookmarklet\" button to your browser bookmarks bar\n* Now open feedviewer sample app in your browser and click on the bookmarklet in bookmarks bar. \n* You should see feedviewer app link in Inspector. \n* Click on the link and go to Theme tab to change Sass variables\n\n### Create your Custom Theme\n\n* Generate custom theme called “my-contest-theme” in theming-workspace/packages/local/my-contest-theme\n\n```\nFrom theming-contest-master directory\nsencha generate theme my-contest-theme\n```\n\n* Extend custom theme “my-contest-theme” from \"theme-triton\". \n```\nIn theming-workspace/packages/local/my-contest-theme/package.json\n\n\"extend\": \"theme-triton\",\n```\n* Use “my-contest-theme” in the feed viewer app\nIn the app.json file, change to \"theme\": \"my-contest-theme\". Optionally uncomment “save” to use Sencha Inspector changed Sass variables in save.json file. The resulting changes in app.json will look like\n```\napp.json\n\n    \"builds\": {\n        \"classic\": {\n            \"toolkit\": \"classic\",\n            \"theme\": \"my-contest-theme\",\n            \"sass\": {\n                \"save\": \"classic/sass/save.json\"\n            }\n        },\n\n        \"modern\": {\n            \"toolkit\": \"modern\",\n            \"theme\": \"my-contest-theme\",\n            \"sass\": {\n                \"save\": \"modern/sass/save.json\"\n            }\n        }\n    }\n```\n* Copy changes from the Inspector (or save.json file) to custom theme. \n```\nE.g. Add component variable $base-color: #639000; in\n{path/to/theming-workspace}/packages/local/my-contest-theme/sass/var/Component.scss\n```\n* Create unique components with Ext JS UIs (CSS mixins).\n\n### Submit your contest entry\nSend us zipped file of your workspace containing your version of the Feed Viewer sample application as well as custom themes at contest@sencha.com. Please do not include ext directory in the zipped file.  All entries must be received by September 15, 2015.\n\n\n### Resources\n\n* [Video - Getting started with theming contest] (https://vimeo.com/133395706)\n* [Doc - Ext JS 6.0 theming] (http://docs.sencha.com/extjs/6.0/core_concepts/theming.html)\n* [Tutorial - Ext JS 6.0 theming - Part 1] (https://www.sencha.com/blog/how-to-create-a-dark-ext-js-theme-part-1/)\n* [Tutorial - Ext JS 6.0 theming - Part 2] (https://www.sencha.com/blog/how-to-create-a-dark-ext-js-theme-part-2/)\n\n### Any Questions?\nIf you have any additional questions about the contest, please send those to contest forum at  [Sencha Contest Forum] (https://www.sencha.com/forum/forumdisplay.php?137-Sencha-Contests) \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsencha%2Ftheming-contest","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsencha%2Ftheming-contest","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsencha%2Ftheming-contest/lists"}