{"id":20325716,"url":"https://github.com/bloycey/styleswitcher","last_synced_at":"2025-04-11T20:03:48.855Z","repository":{"id":91975663,"uuid":"135905381","full_name":"bloycey/styleSwitcher","owner":"bloycey","description":"A jQuery plugin to switch stylesheets on the fly.","archived":false,"fork":false,"pushed_at":"2020-06-09T23:21:20.000Z","size":49,"stargazers_count":7,"open_issues_count":1,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-11T20:03:20.593Z","etag":null,"topics":["2018","jquery","live-project"],"latest_commit_sha":null,"homepage":"https://bloycey.github.io/styleSwitcher/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bloycey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-06-03T13:13:50.000Z","updated_at":"2024-09-30T17:34:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"8fe34040-12fd-4b7d-a68a-b8ebfa10be79","html_url":"https://github.com/bloycey/styleSwitcher","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/bloycey%2FstyleSwitcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bloycey%2FstyleSwitcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bloycey%2FstyleSwitcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bloycey%2FstyleSwitcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bloycey","download_url":"https://codeload.github.com/bloycey/styleSwitcher/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248473131,"owners_count":21109628,"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":["2018","jquery","live-project"],"created_at":"2024-11-14T19:41:18.479Z","updated_at":"2025-04-11T20:03:48.836Z","avatar_url":"https://github.com/bloycey.png","language":"HTML","readme":"# Documentation\n\nStyleSwitcher dynamically appends alternate stylesheets to the `head` of your site. This allows you to overwrite your main CSS file with new styles and preview them instantly. StyleSwitcher can be applied to any `select` element and you can map as many alternate stylesheets as you want - the plugin will clean up as it goes and only load one alternate stylesheet at a time.\n\n## Quick Start\n\n1. Set up your alternate stylesheets using the following structure:\n\n![](https://github.com/bloycey/styleSwitcher/blob/master/img/css-structure-1.JPG)\n\nAnd within the customstyles folder:\n\n![](https://github.com/bloycey/styleSwitcher/blob/master/img/css-structure-2.JPG)\n\nThe path to your custom stylesheets should be `css/customstyles/`\n\n2. Set up your HTML as follows:\n\n```\n\u003cselect id=\"colorpick\" class=\"form-control\"\u003e\n    \u003coption value=\"defaultstyles\" selected\u003eDefault Theme\u003c/option\u003e\n    \u003coption value=\"customstyle1\"\u003eBlue Theme\u003c/option\u003e\n    \u003coption value=\"customstyle2\"\u003eGreen Theme\u003c/option\u003e\n    \u003coption value=\"customstyle3\"\u003ePurple Theme\u003c/option\u003e\n\u003c/select\u003e\n```\n\nThe value of each option should correlate with one of the alternate stylesheets saved on your server. By default each of your custom stylesheets will _need_ to start with the prefix `custom`. You can, however, change the prefix using the advanced options below.\n\nOne of your options should have the value \"defaultstyles\". When this option is selected all custom stylesheets are removed.\n\n3. Add the styleSwitcher.js file to your footer after jQuery but before your custom.js file.\n\n4. Initialise the plugin by calling the styleSwitcher function on a `select` tag.\n\n```\n$(document).ready(function(){\n    $('#colorpick').styleSwitcher();\n})\n```\n\n5. That's it! You should now notice that your styles change as you select different options from the select dropdown.\n\n---\n\n## Advanced Usage\n\nThere are several options that you can specify. They defaults for these options are as follows:\n\n```\n$('#colorpick').styleSwitcher({\n    path: \"css/customstyles/\",\n    prefix: \"custom\",\n    inputType: \"select\",\n    session: true\n})\n\n```\n\n`path` - Accepts a string. Determines the path to your custom css stylesheets.\n\n`prefix` - Accepts a string. determines the prefix for your custom css stylesheets.\n\n`inputType` - Accepts `\"select\"` or `\"radio\"` or `\"button\"`.\n\nIf using radio buttons you should structure your HTML as follows:\n\n```\n\u003cform name=\"colorpick\" id=\"colorpick\" class=\"form-control radio-btns\"\u003e\n    \u003cinput type=\"radio\" id=\"default-theme\"name=\"themecolors\" class=\"colorpick\" value=\"defaultstyles\" checked\u003e\n    \u003clabel for=\"default-theme\"\u003eDefault Theme\u003c/label\u003e\n    \u003cbr\u003e\n    \u003cinput type=\"radio\" id=\"blue-theme\" name=\"themecolors\" class=\"colorpick\" value=\"customstyle1\"\u003e\n    \u003clabel for=\"blue-theme\"\u003eBlue Theme\u003c/label\u003e\n    \u003cbr\u003e\n    \u003cinput type=\"radio\" id=\"green-theme\" name=\"themecolors\" class=\"colorpick\" value=\"customstyle2\"\u003e\n    \u003clabel for=\"green-theme\"\u003eGreen Theme\u003c/label\u003e\n    \u003cbr\u003e\n    \u003cinput type=\"radio\" id=\"purple-theme\" name=\"themecolors\" class=\"colorpick\" value=\"customstyle3\"\u003e\n    \u003clabel for=\"purple-theme\"\u003ePurple Theme\u003c/label\u003e\n\u003c/form\u003e\n```\n\nIf using buttons you should structure your HTML as follows (note the use of the data attributes!):\n\n```\n\u003cdiv id=\"colorpick\"\u003e\n    \u003cbutton data-value=\"defaultstyles\"\u003eDefault Theme\u003c/button\u003e\n    \u003cbutton data-value=\"customstyle1\"\u003eBlue Theme\u003c/button\u003e\n    \u003cbutton data-value=\"customstyle2\"\u003eGreen Theme\u003c/button\u003e\n    \u003cbutton data-value=\"customstyle3\"\u003ePurple Theme\u003c/button\u003e\n\u003c/div\u003e\n\n```\n\n`session` - Accepts a boolean. Determines whether or not you selection is stored in session storage and will endure after page reloads. This is set to 'true' by default.\n\n---\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbloycey%2Fstyleswitcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbloycey%2Fstyleswitcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbloycey%2Fstyleswitcher/lists"}