From f9b8d67039e789ab0a55c91b85f0184ebc1d8e8b Mon Sep 17 00:00:00 2001 From: Connor Abbas Date: Tue, 31 Dec 2024 20:30:25 +0000 Subject: [PATCH] streamlined dark mode --- README.md | 2 +- package-lock.json | 66 ++++++++++++------- package.json | 1 + .../js/Components/ToggleDarkModeButton.vue | 14 ++++ resources/js/Components/ToggleThemeButton.vue | 18 ----- resources/js/Composables/useTheme.js | 22 ------- resources/js/Layouts/AuthenticatedLayout.vue | 6 +- resources/js/Pages/Welcome.vue | 4 +- resources/js/app.js | 6 -- resources/js/theme-preset.js | 2 +- tailwind.config.js | 2 +- 11 files changed, 66 insertions(+), 77 deletions(-) create mode 100644 resources/js/Components/ToggleDarkModeButton.vue delete mode 100644 resources/js/Components/ToggleThemeButton.vue delete mode 100644 resources/js/Composables/useTheme.js diff --git a/README.md b/README.md index d16c0ae8..8244629b 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Do you need a separate Vue SPA front-end instead of using Inertia.js? Consider u - Need SSR support? [There's a branch for that.](https://github.com/connorabbas/laravel-inertia-primevue/tree/feature/ssr) - Pre-configured [Auto Import](https://primevue.org/autoimport/) PrimeVue components - Wrapper components for PrimeVue's `Menu`, `MenuBar`, & `PanelMenu` utilizing Inertia's `Link` component -- Light/Dark mode toggle with custom component & composable +- Light/Dark mode toggle - `useLazyDataTable()` composable for use with PrimeVue's `DataTable` component for easy filtering/sorting (example usage in `feature/admin-panel` branch) - Easily customizable theming diff --git a/package-lock.json b/package-lock.json index 8bce137a..a126aa78 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "packages": { "": { "dependencies": { + "@vueuse/core": "^12.2.0", "lodash": "^4.17.21" }, "devDependencies": { @@ -53,7 +54,6 @@ "version": "7.25.9", "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz", "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==", - "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -63,7 +63,6 @@ "version": "7.25.9", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz", "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==", - "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -73,7 +72,6 @@ "version": "7.26.3", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz", "integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==", - "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.26.3" @@ -89,7 +87,6 @@ "version": "7.26.3", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz", "integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==", - "dev": true, "license": "MIT", "dependencies": { "@babel/helper-string-parser": "^7.25.9", @@ -574,7 +571,6 @@ "version": "1.5.0", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", - "dev": true, "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { @@ -1036,6 +1032,12 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/web-bluetooth": { + "version": "0.0.20", + "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz", + "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==", + "license": "MIT" + }, "node_modules/@vitejs/plugin-vue": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz", @@ -1054,7 +1056,6 @@ "version": "3.5.13", "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz", "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==", - "dev": true, "license": "MIT", "dependencies": { "@babel/parser": "^7.25.3", @@ -1068,7 +1069,6 @@ "version": "3.5.13", "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz", "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==", - "dev": true, "license": "MIT", "dependencies": { "@vue/compiler-core": "3.5.13", @@ -1079,7 +1079,6 @@ "version": "3.5.13", "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz", "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==", - "dev": true, "license": "MIT", "dependencies": { "@babel/parser": "^7.25.3", @@ -1097,7 +1096,6 @@ "version": "3.5.13", "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz", "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==", - "dev": true, "license": "MIT", "dependencies": { "@vue/compiler-dom": "3.5.13", @@ -1108,7 +1106,6 @@ "version": "3.5.13", "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz", "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==", - "dev": true, "license": "MIT", "dependencies": { "@vue/shared": "3.5.13" @@ -1118,7 +1115,6 @@ "version": "3.5.13", "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz", "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==", - "dev": true, "license": "MIT", "dependencies": { "@vue/reactivity": "3.5.13", @@ -1129,7 +1125,6 @@ "version": "3.5.13", "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz", "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==", - "dev": true, "license": "MIT", "dependencies": { "@vue/reactivity": "3.5.13", @@ -1142,7 +1137,6 @@ "version": "3.5.13", "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz", "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==", - "dev": true, "license": "MIT", "dependencies": { "@vue/compiler-ssr": "3.5.13", @@ -1156,9 +1150,44 @@ "version": "3.5.13", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz", "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==", - "dev": true, "license": "MIT" }, + "node_modules/@vueuse/core": { + "version": "12.2.0", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-12.2.0.tgz", + "integrity": "sha512-jksyNu+5EGwggNkRWd6xX+8qBkYbmrwdFQMgCABsz+wq8bKF6w3soPFLB8vocFp3wFIzn0OYkSPM9JP+AFKwsg==", + "license": "MIT", + "dependencies": { + "@types/web-bluetooth": "^0.0.20", + "@vueuse/metadata": "12.2.0", + "@vueuse/shared": "12.2.0", + "vue": "^3.5.13" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/metadata": { + "version": "12.2.0", + "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-12.2.0.tgz", + "integrity": "sha512-x6zynZtTh1l52m0y8d/EgzpshnMjg8cNZ2KWoncJ62Z5qPSGoc4FUunmMVrrRM/I/5542rTEY89CGftngZvrkQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/shared": { + "version": "12.2.0", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-12.2.0.tgz", + "integrity": "sha512-SRr4AZwv/giS+EmyA1ZIzn3/iALjjnWAGaBNmoDTMEob9JwQaevAocuaMDnPAvU7Z35Y5g3CFRusCWgp1gVJ3Q==", + "license": "MIT", + "dependencies": { + "vue": "^3.5.13" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, "node_modules/acorn": { "version": "8.14.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz", @@ -1560,7 +1589,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true, "license": "MIT" }, "node_modules/debug": { @@ -1673,7 +1701,6 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, "license": "BSD-2-Clause", "engines": { "node": ">=0.12" @@ -1768,7 +1795,6 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", - "dev": true, "license": "MIT" }, "node_modules/fast-glob": { @@ -2220,7 +2246,6 @@ "version": "0.30.14", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.14.tgz", "integrity": "sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" @@ -2345,7 +2370,6 @@ "version": "3.3.8", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", - "dev": true, "funding": [ { "type": "github", @@ -2472,7 +2496,6 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", - "dev": true, "license": "ISC" }, "node_modules/picomatch": { @@ -2524,7 +2547,6 @@ "version": "8.4.49", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", - "dev": true, "funding": [ { "type": "opencollective", @@ -2986,7 +3008,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", - "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -3413,7 +3434,6 @@ "version": "3.5.13", "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz", "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==", - "dev": true, "license": "MIT", "dependencies": { "@vue/compiler-dom": "3.5.13", diff --git a/package.json b/package.json index a8d98f52..bbd59584 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "vue": "^3.5.0" }, "dependencies": { + "@vueuse/core": "^12.2.0", "lodash": "^4.17.21" } } diff --git a/resources/js/Components/ToggleDarkModeButton.vue b/resources/js/Components/ToggleDarkModeButton.vue new file mode 100644 index 00000000..83838e14 --- /dev/null +++ b/resources/js/Components/ToggleDarkModeButton.vue @@ -0,0 +1,14 @@ + + + diff --git a/resources/js/Components/ToggleThemeButton.vue b/resources/js/Components/ToggleThemeButton.vue deleted file mode 100644 index fd65f100..00000000 --- a/resources/js/Components/ToggleThemeButton.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/resources/js/Composables/useTheme.js b/resources/js/Composables/useTheme.js deleted file mode 100644 index 67b39dbc..00000000 --- a/resources/js/Composables/useTheme.js +++ /dev/null @@ -1,22 +0,0 @@ -import { ref } from 'vue'; - -const currentTheme = ref(localStorage.getItem('selectedTheme') || 'light'); - -function initSiteTheme() { - setTheme(currentTheme.value); -} - -function setTheme(theme) { - const domHtml = document.documentElement; - domHtml.classList.toggle('dark-mode', theme === 'dark'); - saveThemePreference(theme); -} - -function saveThemePreference(theme) { - currentTheme.value = theme; - localStorage.setItem('selectedTheme', theme); -} - -export function useTheme() { - return { initSiteTheme, setTheme, currentTheme }; -} diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue index 0c017bc2..a182cbce 100644 --- a/resources/js/Layouts/AuthenticatedLayout.vue +++ b/resources/js/Layouts/AuthenticatedLayout.vue @@ -6,7 +6,7 @@ import Container from '@/Components/Container.vue'; import LinksMenu from '@/Components/PrimeVue/LinksMenu.vue'; import LinksMenuBar from '@/Components/PrimeVue/LinksMenuBar.vue'; import LinksPanelMenu from '@/Components/PrimeVue/LinksPanelMenu.vue'; -import ToggleThemeButton from '@/Components/ToggleThemeButton.vue'; +import ToggleDarkModeButton from '@/Components/ToggleDarkModeButton.vue'; const currentRoute = route().current(); const logoutForm = useForm({}); @@ -111,7 +111,7 @@ watchEffect(() => { class="hidden lg:flex items-center ms-6 space-x-3" >
- {
diff --git a/resources/js/Pages/Welcome.vue b/resources/js/Pages/Welcome.vue index 8b2348bc..e141a95f 100644 --- a/resources/js/Pages/Welcome.vue +++ b/resources/js/Pages/Welcome.vue @@ -1,5 +1,5 @@