{"id":25177533,"url":"https://github.com/livresaber/darkmode-vue","last_synced_at":"2026-02-10T10:31:15.262Z","repository":{"id":155657080,"uuid":"558104772","full_name":"livresaber/darkmode-vue","owner":"livresaber","description":"Componente DarkMode com Vue","archived":false,"fork":false,"pushed_at":"2024-11-16T20:40:20.000Z","size":1210,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-31T05:11:13.390Z","etag":null,"topics":["darkmode","hacktoberfest","javascript","lightmode","vue","vue3"],"latest_commit_sha":null,"homepage":"https://darkmode-vue.web.app","language":"Vue","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/livresaber.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":"2022-10-26T22:51:22.000Z","updated_at":"2024-11-16T20:40:23.000Z","dependencies_parsed_at":"2024-02-14T21:30:25.962Z","dependency_job_id":"733d5036-5019-4cfa-9f7a-c2f70e593c10","html_url":"https://github.com/livresaber/darkmode-vue","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livresaber%2Fdarkmode-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livresaber%2Fdarkmode-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livresaber%2Fdarkmode-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livresaber%2Fdarkmode-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/livresaber","download_url":"https://codeload.github.com/livresaber/darkmode-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252798781,"owners_count":21805880,"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":["darkmode","hacktoberfest","javascript","lightmode","vue","vue3"],"created_at":"2025-02-09T14:25:47.264Z","updated_at":"2026-02-10T10:31:15.201Z","avatar_url":"https://github.com/livresaber.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# darkmode-vue\n\nA component darkmode injection in your document page with vue.js\n\n\u003ca href=\"https://darkmode-vue.web.app\" target=\"_blank\"\u003eLive Preview\u003c/a\u003e\n\nInstall\n```js\nnpm install --save darkmode-vue\n```\n\nUsage basic\n```vue\nimport DarkModeVue from 'darkmode-vue';\n\n\u003cDarkModeVue /\u003e\n```\n\nProp hiddenLabel\n```vue\n\u003cDarkModeVue :hiddenLabel=\"true\" /\u003e\n```\n\nProp hiddenIcon\n```vue\n\u003cDarkModeVue :hiddenIcon=\"true\" /\u003e\n```\n\nProp labelDark and labelLight\n```vue\n\u003cDarkModeVue labelDark=\"Tema escuro\" labelLight=\"Tema claro\" /\u003e\n```\n\nSlot change icon and label custom\n```vue\n\u003cDarkModeVue\u003e\n  \u003ctemplate #iconDark\u003e\n    \u003csvg\u003e\u003c/svg\u003e\n  \u003c/template\u003e\n  \u003ctemplate #iconLight\u003e\n    \u003csvg\u003e\u003c/svg\u003e\n  \u003c/template\u003e\n  \u003ctemplate #labelDark\u003e\n    Off\n  \u003c/template\u003e\n  \u003ctemplate #labelLight\u003e\n    On\n  \u003c/template\u003e\n\u003c/DarkModeVue\u003e\n```\n\nUsage useDarkModeVue with toggleMode and mode value\n```vue\nimport { useDarkModeVue } from 'darkmode-vue';\n\nconst { mode, toggleMode } = useDarkModeVue();\n\n\u003cbutton @click=\"toggleMode\"\u003eDarkModeVue {{ mode }}\u003c/button\u003e\n```\n\nStyle modification and usage in your styles\n```css\nbody {\n  --dm-color-primary: #41b883;\n  --dm-color-secondary: #34495e;\n  --dm-color-text: #222;\n  --dm-color-background: #fff;\n}\n\nbody.darkmode {\n  --dm-color-text: #fff;\n  --dm-color-background: #222;\n}\n```\nCreate your variable colors and update this with class .darkmode.\n\n### Description class of components\nIf DarkModeVue usage in a page, a class in body document is update with class darkmode.\nIn LocalStorage is created a key store with value current mode.\nDo you usage children body.darkmode styles for your application.\nI recomend create a variables colors in css and update this with toggle class of body document.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flivresaber%2Fdarkmode-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flivresaber%2Fdarkmode-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flivresaber%2Fdarkmode-vue/lists"}