feat: Support multiple tags for server-target

- Use case: replace html element in case SSR is preferred over SSG.

.changeset/shy-mayflies-end.md

@@ -0,0 +1,5 @@
+---
+"nextjs-darkmode": minor
+---
+
+Support passing tag to server-target. Use case: replace html element in case SSR is preferred over SSG.

lib/src/server/server-target/server-target.tsx

@@ -1,5 +1,10 @@
 import { cookies } from "next/headers";
 import { COOKIE_KEY, LIGHT } from "../../constants";
+import { HTMLProps } from "react";
+
+export interface ServerTargetProps extends HTMLProps<HTMLHtmlElement | HTMLDivElement> {
+  tag?: "html" | "div";
+}
 
 /**
  * Server Side target for avoiding flash of un-themed content.
@@ -15,9 +20,22 @@ import { COOKIE_KEY, LIGHT } from "../../constants";
  * </html>
  * ```
  *
+ * If you prefer SSR over SSG, you can replace `html` element with `ServerTarget`. This way you can avoid having to write sybling selectors.
+ *
+ * @example
+ * ```tsx
+ * <ServerTarget tag="html">
+ *     ...
+ * </ServerTarget>
+ * ```
+ *
+ * @param tag - Tag to use for the target. Defaults to `div`.
+ * ```
+ *
  * @source - Source code
  */
-export const ServerTarget = () => {
+export const ServerTarget = ({ tag: Tag = "div", ...props }: ServerTargetProps) => {
   const rm = cookies().get(COOKIE_KEY)?.value ?? LIGHT;
-  return <div className={rm} data-rm={rm} data-ndm="ndm" data-testid="server-target" />;
+  // @ts-expect-error -- too complex types
+  return <Tag className={rm} data-rm={rm} data-ndm="ndm" data-testid="server-target" {...props} />;
 };