edit style

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}

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%;

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<switchType> = function Index({ sole, label, onChange }) {
+const Index: FC<switchType> = function Index({ sole, label, onChange, theme }) {
   const [on, setOn] = useState('no');
+
+  const refs = useRef<HTMLInputElement>(null!);
+
   const switchChange: React.ChangeEventHandler<HTMLInputElement> = (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(
     () => (
       <div className={style.container}>
@@ -21,6 +29,7 @@ const Index: FC<switchType> = function Index({ sole, label, onChange }) {
           {label}
         </label>
         <input
+          ref={refs}
           className={style.switch}
           type="checkbox"
           id={sole}

src/core/controls/set.tsx

@@ -1,6 +1,8 @@
-import React, { memo, FC, useState } from 'react';
+import React, { memo, FC, useState, useContext } from 'react';
 import Broadcast from '@/components/svgIcon';
 import Switch from '@/components/switch';
+
+import { FlowContext } from '@/core/context';
 import './index.scss';
 
 export interface SetType {
@@ -8,6 +10,10 @@ export interface SetType {
 }
 
 const Set: FC<SetType> = memo(function Set({ switchChange }) {
+  const reviceProps = useContext(FlowContext);
+
+  const { theme } = reviceProps.propsAttributes!;
+
   const [isShow, setIsShow] = useState<boolean>(false);
   return (
     <div
@@ -23,10 +29,16 @@ const Set: FC<SetType> = memo(function Set({ switchChange }) {
               sole="lights"
               label="关灯"
               onChange={(e: string) => switchChange(e, 'lights')}
+              theme={theme}
             />
           </li>
           <li>
-            <Switch sole="loop" label="循环" onChange={(e: string) => switchChange(e, 'loop')} />
+            <Switch
+              sole="loop"
+              label="循环"
+              theme={theme}
+              onChange={(e: string) => switchChange(e, 'loop')}
+            />
           </li>
         </ul>
       </div>

src/core/progress/index.scss

@@ -53,8 +53,8 @@
         right: -5px;
         top: -50%;
         margin-top: -1px;
-        width: 10px;
+        width: 12px;
-        height: 10px;
+        height: 12px;
         border-radius: 50%;
         // background-color: #fbc100;
       }

src/core/progress/index.tsx

@@ -172,7 +172,7 @@ const Index = memo(function Index(props) {
   return (
     <div
       className="progress-container"
-      style={{ opacity: reviceProps.videoFlow!.isControl ? '1' : '0' }}
+      // style={{ opacity: reviceProps.videoFlow!.isControl ? '1' : '0' }}
     >
       <div className="progress-bg" ref={progressBgRef}>
         <div className="progress-buffered" style={{ width: `${calculateBufferedPercent}%` }}></div>