simplify theme provider

components/Code/Code.tsx

@@ -1,11 +1,10 @@
 import CodeBlock from "../CodeBlock";
 import CodeInline from "../CodeInline";
-import type { PropsWithChildren } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 
-export type CodeProps = PropsWithChildren<{
+export type CodeProps = ComponentPropsWithoutRef<"code"> & {
   forceBlock?: boolean;
-  className?: string;
-}>;
+};
 
 // a simple wrapper component that "intelligently" picks between inline code and code blocks (w/ optional syntax
 // highlighting & a clipboard button)

components/Comments/Comments.tsx

@@ -14,7 +14,7 @@ export type CommentsProps = ComponentPropsWithoutRef<"div"> & {
 };
 
 const Comments = ({ title, className, ...rest }: CommentsProps) => {
-  const { activeTheme } = useTheme();
+  const { theme } = useTheme();
 
   // fail silently if giscus isn't configured
   if (!config.giscusConfig) {
@@ -36,7 +36,7 @@ const Comments = ({ title, className, ...rest }: CommentsProps) => {
         emitMetadata="0"
         inputPosition="top"
         loading="lazy"
-        theme={activeTheme === "dark" ? activeTheme : "light"}
+        theme={theme === "dark" ? theme : "light"}
       />
     </div>
   );

components/ThemeToggle/ThemeToggle.tsx

@@ -14,13 +14,13 @@ export type ThemeToggleProps = {
 
 const ThemeToggle = ({ className }: ThemeToggleProps) => {
   const hasMounted = useHasMounted();
-  const { activeTheme, setTheme } = useTheme();
+  const { theme, setTheme } = useTheme();
   const isFirstMount = useFirstMountState();
   const prefersReducedMotion = useReducedMotion() ?? false;
   const maskId = useId(); // SSR-safe ID to cross-reference areas of the SVG
 
-  // default to light since `activeTheme` might be undefined
-  const safeTheme = activeTheme === "dark" ? activeTheme : "light";
+  // default to light since `theme` might be undefined
+  const safeTheme = theme === "dark" ? theme : "light";
 
   // accessibility: disable animation if user prefers reduced motion
   useEffect(() => {

components/Time/Time.tsx

@@ -1,14 +1,14 @@
 import { formatDate } from "../../lib/helpers/format-date";
+import type { ComponentPropsWithoutRef } from "react";
 
-export type TimeProps = {
+export type TimeProps = ComponentPropsWithoutRef<"time"> & {
   date: string | number | Date;
   format?: string;
-  className?: string;
 };
 
-const Time = ({ date, format = "MMM D", className }: TimeProps) => {
+const Time = ({ date, format = "MMM D", ...rest }: TimeProps) => {
   return (
-    <time dateTime={formatDate(date)} title={formatDate(date, "MMM D, YYYY, h:mm A z")} className={className}>
+    <time dateTime={formatDate(date)} title={formatDate(date, "MMM D, YYYY, h:mm A z")} {...rest}>
       {formatDate(date, format)}
     </time>
   );