Create switch styles

lib/src/client/core/core.tsx

@@ -50,8 +50,11 @@ export const Core = ({ t }: CoreProps) => {
     const clsList = documentEl.classList;
     modes.forEach(mode => clsList.remove(mode));
     clsList.add(resolvedMode);
-    clsList.add(mode);
-    documentEl.setAttribute("data-system", systemMode);
+    [
+      ["sm", systemMode],
+      ["rm", resolvedMode],
+      ["m", mode],
+    ].forEach(([dataLabel, value]) => documentEl.setAttribute(`data-${dataLabel}`, value));
     localStorage.setItem(key, JSON.stringify({ mode, systemMode }));
   }, [resolvedMode]);
 

lib/src/client/switch/switch.module.scss

@@ -1,3 +1,52 @@
 .switch {
-  /* create your container styles here */
-}
+  all: unset;
+  position: relative;
+  color: currentColor;
+  border-radius: 50%;
+  border: 1px dashed currentColor;
+  cursor: pointer;
+  --size: 24px;
+  height: var(--size);
+  width: var(--size);
+  transition: all 0.3s ease-in-out 0s !important;
+}
+
+[data-m="system"] .switch::after {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  font-weight: 600;
+  font-size: calc(var(--size) / 2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  content: "A";
+}
+
+[data-rm="light"] .switch {
+  box-shadow: 0 0 50px 10px yellow;
+  background-color: yellow;
+  border: 1px solid orangered;
+}
+
+[data-rm="dark"] .switch {
+  box-shadow: calc(var(--size) / 4) calc(var(--size) / -4) calc(var(--size) / 8) inset #fff;
+  border: none;
+  background: transparent;
+  animation: swing linear 0.5s;
+}
+
+@keyframes swing {
+  40% {
+    transform: rotate(-15deg);
+  }
+  80% {
+    transform: rotate(10deg);
+  }
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+}

lib/src/client/switch/switch.tsx

@@ -4,7 +4,7 @@ import { modes, useStore } from "../../utils";
 
 export interface SwitchProps extends HTMLProps<HTMLElement> {
   /** html tag @defaultValue 'button' */
-  tag: "button" | "div";
+  tag?: "button" | "div";
   /** Diameter of the color switch */
   size?: number;
   /** Skip system colorScheme while toggling */
@@ -21,7 +21,7 @@ export interface SwitchProps extends HTMLProps<HTMLElement> {
  *
  * @source - Source code
  */
-export const Switch = ({ tag: Tag = "button", size, skipSystem, ...props }: SwitchProps) => {
+export const Switch = ({ tag: Tag = "button", size = 24, skipSystem, ...props }: SwitchProps) => {
   const [state, setState] = useStore();
   const handleModeSwitch = useCallback(() => {
     let index = modes.indexOf(state.mode);
@@ -32,5 +32,14 @@ export const Switch = ({ tag: Tag = "button", size, skipSystem, ...props }: Swit
     });
   }, []);
   const className = [props.className, styles["switch"]].filter(Boolean).join(" ");
-  return <Tag {...props} className={className} data-testid="switch" onClick={handleModeSwitch} />;
+  return (
+    <Tag
+      {...props}
+      className={className}
+      // @ts-expect-error -> we are setting the CSS variable
+      style={{ "--size": `${size}px` }}
+      data-testid="switch"
+      onClick={handleModeSwitch}
+    />
+  );
 };

packages/shared/src/server/layout/layout.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from "react";
 import styles from "./layout.module.scss";
 import { ForkMe } from "@mayank1513/fork-me/server";
 import config from "@repo/scripts/rebrand.config.json";
+import "nextjs-darkmode/dist/index.css";
 
 const { owner, repo } = config;
 interface LayoutProps {