codesnips

theming

javascript 
// Theme switching with CSS variables
const themeToggle = document.getElementById('theme-toggle');
const root = document.documentElement;

// Load saved theme
const savedTheme = localStorage.getItem('theme') || 'light';

CSS custom properties (CSS variables) for dynamic theming

css variables custom-properties
by Alex Chang 2 tabs
typescript 
import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react'

type Theme = 'light' | 'dark'

interface ThemeContextType {
  theme: Theme

Dark mode with Tailwind and localStorage persistence

react tailwind dark-mode
by Maya Patel 3 tabs
kotlin 
package com.example.myapp.ui.theme

import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily

Material Design 3 theming

kotlin android material-design
by Alex Chen 2 tabs
typescript 
import { useEffect, useState } from 'react';

export function useLocalStorage<T>(
  key: string,
  initialValue: T
): [T, (value: T) => void] {

Persisting a Dark-Mode Theme Toggle with a React ThemeProvider and localStorage

react context hooks
by codesnips 4 tabs