feat(website): add back light mode (#1104)

Author: Rel1cx

apps/website/app/(home)/page.tsx

@@ -20,7 +20,7 @@ export default function HomePage() {
     <main className="w-full min-w-0 max-w-6xl px-8 pt-4 pb-12 md:px-12 mx-auto">
       <EffectLayer />
       <ESLintReact />
-      <article className="prose max-w-none">
+      <article className="prose max-w-none isolate dark:isolation-auto">
         <h2 className="isolate">Features</h2>
         <Cards className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
           {features.map(([title, description, Icon]) => (

apps/website/app/layout.config.tsx

@@ -29,7 +29,4 @@ export const baseOptions: BaseLayoutProps = {
     ),
     transparentMode: "top",
   },
-  themeSwitch: {
-    enabled: false,
-  },
 };

apps/website/app/layout.tsx

@@ -16,10 +16,10 @@ const ibm_plex_mono = IBM_Plex_Mono({
 });
 
 const themeOptions = {
-  defaultTheme: "dark",
   enabled: true,
-  enableSystem: false,
-  forcedTheme: "dark",
+  enableSystem: true,
+  // defaultTheme: "dark",
+  // forcedTheme: "dark",
 };
 
 export const metadata = {

apps/website/components/ESLintReact.tsx

@@ -8,7 +8,7 @@ export function ESLintReact() {
     <div className="flex flex-col items-center gap-4 m-0 mx-auto p-8 w-fit">
       <Image alt="logo" height="150" quality={100} src={logo as StaticImageData} width="150" />
       <span className="text-2xl">ESLint React</span>
-      <p className="text-center text-gray-400 pt-4">
+      <p className="text-center text-gray-700 dark:text-gray-400 pt-4">
         A series of composable ESLint rules for React and friends.
       </p>
     </div>

apps/website/components/EffectLayer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable perfectionist/sort-objects */
 "use client";
 
 import type { PropsWithChildren } from "react";
@@ -199,7 +200,7 @@ function createUniforms(width: number, height: number) {
 function createRenderer(canvas: HTMLCanvasElement, width: number, height: number, dpr = 2) {
   return new Renderer({
     alpha: true,
-    antialias: true,
+    antialias: false,
     canvas,
     depth: false,
     dpr,
@@ -243,7 +244,7 @@ export function EffectLayer({ children, className }: EffectLayerProps) {
 
     function update(time: number) {
       if (!isActive.current) return;
-      uniforms.uTime.value = time * 0.001;
+      uniforms.uTime.value = time * 0.0005;
       renderer.dpr = getDevicePixelRatio(2);
       renderer.render({ scene: mesh });
       rRaf.current = requestAnimationFrame(update);
@@ -296,7 +297,6 @@ const styles = {
     "inset-[0]",
     "pointer-events-none",
   ),
-
   canvas: cn(
     "w-full",
     "h-full",