Browse Source

fe-29 实现亮色和暗色模式的切换

master
Chunxian Zhang 2 years ago
parent
commit
99cf0127f5
1 changed files with 88 additions and 0 deletions
  1. +88
    -0
      lazy-timer-fe/src/components/ThemeSettings.jsx

+ 88
- 0
lazy-timer-fe/src/components/ThemeSettings.jsx View File

@ -0,0 +1,88 @@
import React from 'react';
import { MdOutlineCancel } from 'react-icons/md';
import { BsCheck } from 'react-icons/bs';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { themeColors } from '../data/dummy';
import { useStateContext } from '../contexts/ContextProvider';
const ThemeSettings = () => {
const { setColor, setMode, currentMode, currentColor, setThemeSettings } = useStateContext();
return (
<div className="bg-half-transparent w-screen fixed nav-item top-0 right-0">
<div className="float-right h-screen dark:text-gray-200 bg-white dark:bg-[#484B52] w-400">
<div className="flex justify-between items-center p-4 ml-4">
<p className="font-semibold text-lg">Settings</p>
<button
type="button"
onClick={() => setThemeSettings(false)}
style={{ color: 'rgb(153, 171, 180)', borderRadius: '50%' }}
className="text-2xl p-3 hover:drop-shadow-xl hover:bg-light-gray"
>
<MdOutlineCancel />
</button>
</div>
<div className="flex-col border-t-1 border-color p-4 ml-4">
<p className="font-semibold text-xl ">Theme Option</p>
<div className="mt-4">
<input
type="radio"
id="light"
name="theme"
value="Light"
className="cursor-pointer"
onChange={setMode}
checked={currentMode === 'Light'}
/>
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
<label htmlFor="light" className="ml-2 text-md cursor-pointer">
Light
</label>
</div>
<div className="mt-2">
<input
type="radio"
id="dark"
name="theme"
value="Dark"
onChange={setMode}
className="cursor-pointer"
checked={currentMode === 'Dark'}
/>
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
<label htmlFor="dark" className="ml-2 text-md cursor-pointer">
Dark
</label>
</div>
</div>
<div className="p-4 border-t-1 border-color ml-4">
<p className="font-semibold text-xl ">Theme Colors</p>
<div className="flex gap-3">
{themeColors.map((item, index) => (
<TooltipComponent key={index} content={item.name} position="TopCenter">
<div
className="relative mt-2 cursor-pointer flex gap-5 items-center"
key={item.name}
>
<button
type="button"
className="h-10 w-10 rounded-full cursor-pointer"
style={{ backgroundColor: item.color }}
onClick={() => setColor(item.color)}
>
<BsCheck className={`ml-2 text-2xl text-white ${item.color === currentColor ? 'block' : 'hidden'}`} />
</button>
</div>
</TooltipComponent>
))}
</div>
</div>
</div>
</div>
);
};
export default ThemeSettings;

Loading…
Cancel
Save