feat: Added use-color-scheme.

Author: Blankeos

dev/components/examples/use-color-scheme/use-color-scheme.code.mdx

@@ -0,0 +1,5 @@
+```tsx
+const colorScheme = useColorScheme();
+
+return <>Your system color scheme is: {colorScheme()}</>;
+```

dev/components/examples/use-color-scheme/use-color-scheme.example.tsx

@@ -0,0 +1,32 @@
+import { useColorScheme } from 'src';
+import { ExampleBase } from '../example-base';
+import Code from './use-color-scheme.code.mdx';
+
+import { useMDXComponents } from 'solid-jsx';
+
+export function UseColorSchemeExample() {
+  const colorScheme = useColorScheme();
+
+  // @ts-ignore
+  const components: any = useMDXComponents();
+
+  return (
+    <ExampleBase
+      title="useColorScheme"
+      description="A hook that returns system color scheme value i.e. either `dark` or `light`."
+      code={<Code components={components} />}
+    >
+      <div class="flex h-full w-full items-center justify-center gap-x-1 rounded-md border p-3 py-10 text-center text-sm">
+        <div
+          class="rounded-md border px-4 py-2 text-sm"
+          style={{
+            background: colorScheme() === 'dark' ? '#000' : '#fff',
+            color: colorScheme() ? '#fff' : '#000',
+          }}
+        >
+          Your system color scheme is: {colorScheme()}
+        </div>
+      </div>
+    </ExampleBase>
+  );
+}

dev/components/examples/use-id/use-id.code.mdx

@@ -1,9 +1,5 @@
 ```tsx
 const id = useId();
 
-return (
-    <div>
-        Random ID: {id()}
-    </div>;
-)
+return <div>Random ID: {id()}</div>;
 ```

dev/pages/index/+Page.tsx

@@ -3,6 +3,7 @@ import packageJSON from 'src/../package.json';
 // Hooks
 import { UseClickOutsideExample } from 'dev/components/examples/use-click-outside/use-click-outside.example';
 import { UseClipboardExample } from 'dev/components/examples/use-clipboard/use-clipboard.example';
+import { UseColorSchemeExample } from 'dev/components/examples/use-color-scheme/use-color-scheme.example';
 import { UseCounterExample } from 'dev/components/examples/use-counter/use-counter.example';
 import { UseDebouncedCallbackExample } from 'dev/components/examples/use-debounced-callback/use-debounced-callback.example';
 import { UseDebouncedSignalExample } from 'dev/components/examples/use-debounced-signal/use-debounced-signal.example';
@@ -168,6 +169,10 @@ export default function HomePage() {
       title: 'useDidUpdate',
       example: <UseDidUpdateExample />,
     },
+    {
+      title: 'useColorScheme',
+      example: <UseColorSchemeExample />,
+    },
   ];
 
   const filteredList = createMemo(() => {
@@ -314,17 +319,6 @@ export default function HomePage() {
       </div>
 
       <div class="h-20" />
-      {/* <p ref={ref}>hovered: {JSON.stringify(hovered())}</p>
-
-      <p>idle: {JSON.stringify(idle())}</p>
-
-      <p>networkStatus: {JSON.stringify(networkStatus())}</p>
-
-      <button onClick={() => toggle()}>Current Toggled: {JSON.stringify(currentOption())}</button> */}
-
-      {/* <textarea ref={elementSizeRef} class="resize text-green-500">
-      </textarea>
-        {width()} */}
     </div>
   );
 }

src/index.ts

@@ -1,5 +1,6 @@
 export * from './use-click-outside/use-click-outside';
 export * from './use-clipboard/use-clipboard';
+export * from './use-color-scheme/use-color-scheme';
 export * from './use-counter/use-counter';
 export * from './use-debounced-callback/use-debounced-callback';
 export * from './use-debounced-signal/use-debounced-signal';

src/use-color-scheme/use-color-scheme.ts

@@ -0,0 +1,12 @@
+import { createMemo } from 'solid-js';
+import { useMediaQuery, UseMediaQueryOptions } from '../use-media-query/use-media-query';
+
+export function useColorScheme(initialValue?: 'dark' | 'light', options?: UseMediaQueryOptions) {
+  const isDark = useMediaQuery(
+    () => '(prefers-color-scheme: dark)',
+    initialValue === 'dark',
+    options,
+  );
+
+  return createMemo(() => (isDark() ? 'dark' : 'light'));
+}