Step 1: Set Up a Supabase Project
 

• Go to the Supabase website and sign up/log in.
• Create a new project by clicking on the "New Project" button.
• Follow the prompts to set up your project and database. Remember to note down your Supabase URL and API Key as these will be required later.

 
Step 2: Set Up Your Frontend
 

• Create a new frontend application if you don't have one. For example, you can use Create React App for a React-based project:
• Run: npx create-react-app my-dark-mode-app
• Navigate to the project directory: cd my-dark-mode-app
• Install the Supabase client library by running: npm install @supabase/supabase-js

 
Step 3: Initialize Supabase
 

• Create a file named supabaseClient.js in the src directory.
• Initialize the Supabase client in this file:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.REACT_APP_SUPABASE_URL;
const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY;
export const supabase = createClient(supabaseUrl, supabaseAnonKey);

  



• Make sure to add your Supabase URL and API Key in your environment variables (e.g., create a .env file).

 
Step 4: Create a Dark Mode Toggle
 

• In your React app, create a button or toggle switch that will allow users to switch between dark mode and light mode.
• In the component containing the toggle, manage the state for dark mode:

import React, { useState, useEffect } from 'react';

const DarkModeToggle = () => {
  const [darkMode, setDarkMode] = useState(false);
  useEffect(() => {
    const storedPreference = localStorage.getItem('darkMode');
    if (storedPreference) {
      setDarkMode(JSON.parse(storedPreference));
    }
  }, []);
  useEffect(() => {
    localStorage.setItem('darkMode', darkMode);
    document.body.classList.toggle('dark-mode', darkMode);
  }, [darkMode]);
  return (
    <button onClick={() => setDarkMode(prevMode => !prevMode)}>
      {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
    
  );
};
export default DarkModeToggle;

  

 
Step 5: Style Your App
 

• Define dark mode CSS styles. For example, in your App.css:

body.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

  

• Ensure your component and other elements account for dark mode styling. This could be done via CSS variables or additional class-based styles.

 
Step 6: Persist Dark Mode Choice Using Supabase
 

• To offer a more seamless user experience, store the dark mode preference in Supabase for authenticated users.
• First, set up authentication in Supabase if you haven't already.
• Add logic to store dark mode preference in Supabase whenever it is toggled:

import { supabase } from './supabaseClient';
import { useEffect, useState } from 'react';

const DarkModeToggle = () => {
  const [darkMode, setDarkMode] = useState(false);
  const user = supabase.auth.user();
  useEffect(() => {
    const fetchPreference = async () => {
      if (user) {
        const { data, error } = await supabase
          .from('preferences')
          .select('dark_mode')
          .eq('user_id', user.id)
          .single();
        if (data) {
          setDarkMode(data.dark_mode);
        }
      }
    };
    fetchPreference();
  }, [user]);
  useEffect(() => {
    const updatePreference = async () => {
      if (user) {
        await supabase
          .from('preferences')
          .upsert({ user_id: user.id, dark_mode: darkMode }, { onConflict: ['user_id'] });
      }
    };
    updatePreference();
    document.body.classList.toggle('dark-mode', darkMode);
  }, [darkMode, user]);
  return (
    <button onClick={() => setDarkMode(prevMode => !prevMode)}>
      {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
    
  );
};
export default DarkModeToggle;

  



• Ensure Supabase has a table named preferences with columns user_id and dark_mode.

 
Step 7: Test Your Implementation
 

• Ensure you test the dark mode toggle both logged in and logged out states.
• Verify that the dark mode preference is correctly stored and retrieved from Supabase for authenticated users.
• Check that the local storage functions as a fallback for unauthenticated users.