Theme.js — react Source File

Architecture documentation for Theme.js, a javascript file in the react codebase. 1 imports, 4 dependents.

File javascript BabelCompiler Optimization 1 imports 4 dependents 1 functions

Entity Profile

BabelCompiler→ Optimization→ Theme.js — react Source File

Dependency Diagram

graph LR
  c549fdb2_d55e_4878_6475_8654256c52bf["Theme.js"]
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  c549fdb2_d55e_4878_6475_8654256c52bf --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  0728161c_056a_6e89_5b38_6275d0ed4d04["App.js"]
  0728161c_056a_6e89_5b38_6275d0ed4d04 --> c549fdb2_d55e_4878_6475_8654256c52bf
  5c8ed2a6_fcb7_5258_d158_8bd841e362ae["Chrome.js"]
  5c8ed2a6_fcb7_5258_d158_8bd841e362ae --> c549fdb2_d55e_4878_6475_8654256c52bf
  44fb6700_638f_2f39_6d45_bed99b6007a5["Page.js"]
  44fb6700_638f_2f39_6d45_bed99b6007a5 --> c549fdb2_d55e_4878_6475_8654256c52bf
  13f7bfc1_77c5_77e8_b0d9_3713c3a81c00["Page2.js"]
  13f7bfc1_77c5_77e8_b0d9_3713c3a81c00 --> c549fdb2_d55e_4878_6475_8654256c52bf
  style c549fdb2_d55e_4878_6475_8654256c52bf fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import React, {createContext, useContext, useState} from 'react';

const Theme = createContext('light');

export default Theme;

export function ThemeToggleButton({onChange}) {
  let theme = useContext(Theme);
  let [targetTheme, setTargetTheme] = useState(theme);
  function toggleTheme() {
    let newTheme = theme === 'light' ? 'dark' : 'light';
    // High pri, responsive update.
    setTargetTheme(newTheme);
    // Perform the actual theme change in a separate update.
    setTimeout(() => onChange(newTheme), 0);
  }
  if (targetTheme !== theme) {
    return 'Switching to ' + targetTheme + '...';
  }
  return (
    <a className="link" onClick={toggleTheme}>
      Switch to {theme === 'light' ? 'Dark' : 'Light'} theme
    </a>
  );
}