{"id":13821401,"url":"https://github.com/dishait/vue-dark-switch","last_synced_at":"2025-08-20T08:32:15.295Z","repository":{"id":37662050,"uuid":"485235950","full_name":"dishait/vue-dark-switch","owner":"dishait","description":"多合一的开箱即用 vue3 暗黑模式开关组件 | A versatile vue3 dark mode switch component","archived":false,"fork":false,"pushed_at":"2024-02-28T07:57:54.000Z","size":1798,"stargazers_count":89,"open_issues_count":0,"forks_count":8,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-07T01:23:41.295Z","etag":null,"topics":["dark","nuxt","switch","theme","vue3"],"latest_commit_sha":null,"homepage":"https://dishait.github.io/vue-dark-switch/","language":"Vue","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/dishait.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":"2022-04-25T05:35:17.000Z","updated_at":"2024-09-10T04:53:39.000Z","dependencies_parsed_at":"2024-01-13T16:26:19.504Z","dependency_job_id":"8cce7982-ca52-4b7f-b8ea-da0fe35e8544","html_url":"https://github.com/dishait/vue-dark-switch","commit_stats":{"total_commits":78,"total_committers":2,"mean_commits":39.0,"dds":0.02564102564102566,"last_synced_commit":"1cba79fba816d748acda51d52a6cff05432a891c"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dishait%2Fvue-dark-switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dishait%2Fvue-dark-switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dishait%2Fvue-dark-switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dishait%2Fvue-dark-switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dishait","download_url":"https://codeload.github.com/dishait/vue-dark-switch/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230408170,"owners_count":18220974,"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":["dark","nuxt","switch","theme","vue3"],"created_at":"2024-08-04T08:01:21.311Z","updated_at":"2024-12-19T09:07:08.920Z","avatar_url":"https://github.com/dishait.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg width=\"100%\" height=\"100%\" src=\"./vue-dark-switch.gif\" /\u003e\n    \u003ch1\u003evue-dark-switch\u003c/h1\u003e\n    \u003cp\u003e多合一的开箱即用 vue3 暗黑模式开关组件\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## README 🦉\n\n[English](./README_EN.md) | Chinese\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## 动机\n\n暗黑模式开关是一个项目中常用的功能，为了减少后续新项目的工作量，所以封装了这个组件。\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## 特性\n\n- 美观的\n- 开箱即用的\n- 支持手动操作\n- `naive-ui` 支持\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## 使用\n\n### 安装\n\n```shell\nnpm i vue-dark-switch\n```\n\n\u003cbr /\u003e\n\n### 基础\n\n```html\n\u003cscript setup\u003e\n  import { Switch } from \"vue-dark-switch\"\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cSwitch /\u003e\n\u003c/template\u003e\n```\n\n支持自定义 `Switch` 背景色\n\n```html\n\u003ctemplate\u003e\n  \u003cSwitch darkBackground=\"#fff\" lightBackground=\"#2D2D2D\" /\u003e\n\u003c/template\u003e\n```\n\n```html\n\u003cscript setup\u003e\n  import { Switch } from \"vue-dark-switch\"\n  import WorkspacePremiumTwotone from \"@vicons/material/es/WorkspacePremiumTwotone\"\n  import WorkspacePremiumOutlined from \"@vicons/material/es/WorkspacePremiumOutlined\"\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cSwitch\u003e\n    \u003ctemplate #dark\u003e\n      \u003cWorkspacePremiumOutlined /\u003e\n    \u003c/template\u003e\n    \u003ctemplate #light\u003e\n      \u003cWorkspacePremiumTwotone /\u003e\n    \u003c/template\u003e\n  \u003c/Switch\u003e\n\u003c/template\u003e\n```\n\n#### 纯图标\n\n```html\n\u003cscript setup\u003e\n  import { SwitchIcon } from \"vue-dark-switch\"\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cSwitchIcon /\u003e\n\u003c/template\u003e\n```\n\n自定义图标\n\n```html\n\u003cscript setup\u003e\n  import { SwitchIcon } from \"vue-dark-switch\"\n  import WorkspacePremiumOutlined from \"@vicons/material/es/WorkspacePremiumOutlined\"\n  import WorkspacePremiumTwotone from \"@vicons/material/es/WorkspacePremiumTwotone\"\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cSwitchIcon\u003e\n    \u003ctemplate #dark\u003e\n      \u003cWorkspacePremiumOutlined /\u003e\n    \u003c/template\u003e\n    \u003ctemplate #light\u003e\n      \u003cWorkspacePremiumTwotone /\u003e\n    \u003c/template\u003e\n  \u003c/SwitchIcon\u003e\n\u003c/template\u003e\n```\n\n\u003cbr /\u003e\n\n### nuxt\n\n```ts\n// nuxt.config.ts\nexport default defineNuxtConfig({\n  build: {\n    transpile: [\"vue-dark-switch\"],\n  },\n})\n```\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\n  import { Switch } from \"vue-dark-switch\"\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cClientOnly\u003e\n      \u003cSwitch /\u003e\n    \u003c/ClientOnly\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n\u003cbr /\u003e\n\n### 手动\n\n```ts\nimport { isDark, toggleDark } from \"vue-dark-switch\"\n\nisDark.value // 是否是暗黑模式\n\ntoggleDark(false) // 取消暗黑模式\n\ntoggleDark(true) // 开启暗黑模式\n\ntoggleDark() // 切换模式\n```\n\n\u003cbr /\u003e\n\n### `naive-ui` 支持\n\n```html\n\u003c!-- App.vue --\u003e\n\u003cscript setup\u003e\n  import { NConfigProvider } from \"naive-ui\"\n\n  import { naiveTheme } from \"vue-dark-switch\"\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cn-config-provider :theme=\"naiveTheme\"\u003e\n    \u003crouter-view /\u003e\n  \u003c/n-config-provider\u003e\n\u003c/template\u003e\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n# Refs\n\n该组件由以下库搭建而成\n\n- [vite](https://cn.vitejs.dev/)\n- [naive-ui](https://www.naiveui.com/zh-CN)\n- [vueuse](https://vueuse.org/)\n- [unocss](https://github.com/unocss/unocss)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n# Support\n\n该组件由 [vue3-exports](https://github.com/dishait/vue3-exports) 和\n[vite-layers](https://github.com/markthree/vite-layers) 提供支持\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## License\n\nMade with [markthree](https://github.com/markthree)\n\nPublished under [MIT License](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdishait%2Fvue-dark-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdishait%2Fvue-dark-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdishait%2Fvue-dark-switch/lists"}