如何为网站创建设置选项

Question

如何为网站创建允许用户更改背景颜色、语言、深色模式和浅色模式的设置选项？

我想要类似于Qwant主页设置的设置选项

Answer 1

你必须提供一个代码，记住这个论坛寻求解决问题。

我已经做了一个关于如何制作主题系统的简单示例。

您可以使用两个按钮和

useState

来切换它。此外，您可以使用 cookie 来存储用户的实际主题。

这是一个示例组件：

首先，安装

npm install js-cookie

然后，创建一个组件文件：

import React, { useState } from 'react';

const Toggler = () => {

  const toggleTheme = (themeType) => {
    Cookies.set('theme', themeType);
  };

  return (
    <div>
      <button onClick={() => toggleTheme('light')}>Light Theme</button>
      <button onClick={() => toggleTheme('dark')}>Dark Theme</button>
      <p>Current theme is {theme}</p>
    </div>
  );
}

export default Toggler;

然后就可以从其他组件调用Toggler了。您也可以使用

Cookies.get('theme')

获得模式

import Cookies from 'js-cookie';

const [theme, setTheme] = useState(Cookies.get('theme') || 'light');

一旦有了主题，您就可以将其用作样式或 html 代码的条件。