diff --git a/src/appComponent.tsx b/src/appComponent.tsx index 32504e2..e59e466 100644 --- a/src/appComponent.tsx +++ b/src/appComponent.tsx @@ -39,6 +39,7 @@ const AppComponent = memo(function AppComponent(props) { 'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4', width: 750, height: 420, + theme: '#00D3FF', }} onProgressMouseDown={onProgressMouseDown} onPlay={onPlay} diff --git a/src/components/switch/index.module.scss b/src/components/switch/index.module.scss index 4766380..45f2672 100644 --- a/src/components/switch/index.module.scss +++ b/src/components/switch/index.module.scss @@ -1,3 +1,6 @@ +body { + --JoL-theme: red; +} .container { display: flex; align-items: center; @@ -35,9 +38,8 @@ // checked状态时,背景颜色改变 .switch:checked { - background-color: red; + background-color: var(--JoL-theme); } - // checked状态时,按钮位置改变 .switch:checked::after { left: 50%; diff --git a/src/components/switch/index.tsx b/src/components/switch/index.tsx index a4f5b00..3573313 100644 --- a/src/components/switch/index.tsx +++ b/src/components/switch/index.tsx @@ -1,19 +1,27 @@ -import React, { memo, FC, useMemo, useState } from 'react'; +import React, { useEffect, FC, useMemo, useState, useRef } from 'react'; import style from './index.module.scss'; - +import { defaultTheme } from '@/core/config'; export interface switchType { sole: string; label: string; onChange?: Function; + theme?: string; } -const Index: FC = function Index({ sole, label, onChange }) { +const Index: FC = function Index({ sole, label, onChange, theme }) { const [on, setOn] = useState('no'); + + const refs = useRef(null!); + const switchChange: React.ChangeEventHandler = (e) => { const status = e.target.value === 'yes' ? 'no' : 'yes'; setOn(status); onChange && onChange(status); }; + useEffect(() => { + refs.current.style.setProperty('--JoL-theme', theme ? theme : defaultTheme); + }, [theme]); + const render = useMemo( () => (
@@ -21,6 +29,7 @@ const Index: FC = function Index({ sole, label, onChange }) { {label} = memo(function Set({ switchChange }) { + const reviceProps = useContext(FlowContext); + + const { theme } = reviceProps.propsAttributes!; + const [isShow, setIsShow] = useState(false); return (
= memo(function Set({ switchChange }) { sole="lights" label="关灯" onChange={(e: string) => switchChange(e, 'lights')} + theme={theme} />
  • - switchChange(e, 'loop')} /> + switchChange(e, 'loop')} + />
  • diff --git a/src/core/progress/index.scss b/src/core/progress/index.scss index c406009..f3f8370 100644 --- a/src/core/progress/index.scss +++ b/src/core/progress/index.scss @@ -53,8 +53,8 @@ right: -5px; top: -50%; margin-top: -1px; - width: 10px; - height: 10px; + width: 12px; + height: 12px; border-radius: 50%; // background-color: #fbc100; } diff --git a/src/core/progress/index.tsx b/src/core/progress/index.tsx index fc6c181..b6db17c 100644 --- a/src/core/progress/index.tsx +++ b/src/core/progress/index.tsx @@ -172,7 +172,7 @@ const Index = memo(function Index(props) { return (