From ee310f5327737269b3e3692dcdcb7a7a514c8429 Mon Sep 17 00:00:00 2001 From: Kevin Cole Date: Sun, 25 Sep 2022 21:46:44 -0400 Subject: [PATCH] docs(useDark): not about default localStorage key (#2236) --- packages/core/useDark/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/useDark/index.md b/packages/core/useDark/index.md index 20ca56788f8..6971fb51b23 100644 --- a/packages/core/useDark/index.md +++ b/packages/core/useDark/index.md @@ -21,7 +21,7 @@ const toggleDark = useToggle(isDark) ## Behavior -`useDark` combines with `usePreferredDark` and `useStorage`. On start up, it reads the value from localStorage/sessionStorage(the key is configurable) to see if there is a user configured color scheme, if not, it will use users' system preferences. When you change the `isDark` ref, it will update the corresponding element's attribute and then store the preference to storage for persistence. +`useDark` combines with `usePreferredDark` and `useStorage`. On start up, it reads the value from localStorage/sessionStorage (the key is configurable) to see if there is a user configured color scheme, if not, it will use users' system preferences. When you change the `isDark` ref, it will update the corresponding element's attribute and then store the preference to storage (default key: `vueuse-color-scheme`) for persistence. > Please note `useDark` only handles the DOM attribute changes for you to apply proper selector in your CSS. It does NOT handle the actual style, theme or CSS for you. @@ -37,7 +37,7 @@ By default, it uses [Tailwind CSS favored dark mode](https://tailwindcss.com/doc ... ``` -While you can customize it and make it work for most of the CSS frameworks. +Still, you can also customize it to make it work with most CSS frameworks. For example: @@ -64,7 +64,7 @@ will work like ``` -If the configuration above still not fitting to your needs, you can use `onChanged` options to take full controls over how you handle the updates +If the configuration above still does not fit your needs, you can use the`onChanged` option to take full control over how you handle updates. ```ts const isDark = useDark({