R闪亮的桌子更换标题和亮暗模式开关

// 假设我们使用的是React框架
import React, { useState } from 'react';

function App() {
  const [title, setTitle] = useState('原始标题');

  const changeTitle = (newTitle) => {
    setTitle(newTitle);
  };

  return (
    <div>
      <h1>{title}</h1>
      <button onClick={() => changeTitle('新标题')}>更换标题</button>
    </div>
  );
}

export default App;

// 假设我们使用的是CSS变量来控制亮暗模式
:root {
  --background-color: white;
  --text-color: black;
}

[data-theme='dark'] {
  --background-color: black;
  --text-color: white;
}

function App() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <div data-theme={theme} style={{ backgroundColor: 'var(--background-color)', color: 'var(--text-color)' }}>
      <h1>亮暗模式示例</h1>
      <button onClick={toggleTheme}>切换模式</button>
    </div>
  );
}

export default App;