reza added some light mode

src/components/Navbar/index.scss

@@ -7,7 +7,6 @@
   left: 0px;
   z-index: 150;
   &-light{
-    background-color: white;
     .nav___share{
       background-color: inherit !important;
       border: 1px solid $green1 !important;
@@ -20,9 +19,6 @@
       color: $gray5 !important;
     }
   }
-  &-dark{
-    background-color: black;
-  }
   &__container{
     width: 100%;
     font-family: numeralLight;

src/components/Navbar/index.tsx

@@ -70,7 +70,7 @@ function Navbar(props: any) {
       className={_.join(
         [
           "nav align-items-center justify-content-center",
-          theme === "light" ? "nav-light" : "nav-dark",
+          theme === "light" ? "nav-light bg-white" : "nav-dark bg-black",
         ],
         " "
       )}

src/components/StyledRating/index.tsx

@@ -1,19 +1,24 @@
-import React from 'react'
-import StarIcon from '@mui/icons-material/Star';
-import Rating from '@mui/material/Rating';
+import React from "react";
+import StarIcon from "@mui/icons-material/Star";
+import Rating from "@mui/material/Rating";
 
-
-
-export default function StyledRating({rate} : any) {
+export default function StyledRating({ rate, theme }: any) {
   return (
     <>
       <Rating
         name="customized-color"
         defaultValue={rate}
         precision={0.5}
-        icon={<StarIcon style={{ fontSize : 25, color : '#FFED00'  }} />}
-        emptyIcon={<StarIcon style={{ fontSize : 25, color : '#494949' }} />}
+        icon={<StarIcon style={{ fontSize: 25, color: "#FFED00" }} />}
+        emptyIcon={
+          <StarIcon
+            style={{
+              fontSize: 25,
+              color: theme === "dark" ? "#494949" : "#777",
+            }}
+          />
+        }
       />
     </>
-  )
+  );
 }

src/constants/colors.scss

@@ -20,7 +20,7 @@ $green2 : #6cbe44;
 $green3 : #00cc69;
 $green4 : #84de56;
 $green5 : #9cdf52;
-
+$green6 : #08793d;
 // blue
 $blue : #a2b4cb;
 $blue1 : #505a82;

src/custom.scss

@@ -31,6 +31,14 @@
   display: flex;
 }
 
+.bg-black{
+  background-color: black !important;
+}
+
+.bg-white{
+  background-color: white !important;
+}
+
 p {
   line-height: 1.5;
 }

src/views/Course/Lesson/index.scss

@@ -2,32 +2,87 @@
   transition: all 0.3s;
   overflow : hidden;
   border-bottom: 1px solid $gray9;
-  &__light{
+  &-light {
     header {
-      background-color : white !important;
+      background-color : $gray13;
       border: 1px solid $gray9;
+      h4 {
+        color: $green6;          
+      }
+      div {
+        color: $gray5;
+      }
+    }
+    .lesson{
+      &__files{
+        border-left: 1px solid $gray9;
+        border-right: 1px solid $gray9;
+        p{
+          color: $gray5;
+          background-color: $gray12;
+        }
+        &--sample{
+          &:hover{
+            background-color: $gray12;
+          }
+          color: $gray5;
+          a{
+            color: $gray5;
+          }
+        }
+        &--active{
+          // border-bottom: 1px solid $gray11;
+        }
+      }
+    }
+  }
+  &-dark{
+    header {
+      background-color: #414141;
+      h4 {
+        color: $green;          
+      }
+      div {
+        color: $gray10;
+      }
+    }
+    .lesson{
       
+      &__files{
+        border-left: 1px solid $gray9;
+        border-right: 1px solid $gray9;
+        p{
+          color: white;
+          background-color: $gray1;
         }
-    .lesson__files *{
-      color: black !important;
+        &--sample{
+          &:hover{
+            background-color: rgb(58, 58, 58);
+          }
+          color: white;
+          a{
+            color: white;
+          }
+        }
+        &--active{
+          // border-bottom: 1px solid $gray9;
+        }
+      }
+
     }
   }
   &__active{
-    border-bottom-left-radius: 10px;
-    border-bottom-right-radius: 10px;
+    // border-bottom-left-radius: 10px;
+    // border-bottom-right-radius: 10px;
   }
   header {
-    background-color: #414141;
     // border: 1px solid $gray9 !important;
+    border-top-right-radius: 5px !important;
+    border-top-left-radius: 5px;
     padding: 5px 15px !important;
     cursor: pointer;
     h4 {
-      color: $green;
       margin: 0px;
-      
-    }
-    div {
-      color: $gray10;
     }
     img{
       width: 40px;
@@ -35,14 +90,10 @@
   }
   &__files{
     padding : 0px !important;
-    border-left: 1px solid $gray9;
-    border-right: 1px solid $gray9;
-    transition: all 0.4s ease-in;
+    transition: all 0.15s ease-in;
     overflow: hidden;
     p{
-      color: white;
       padding: 10px 20px;
-      background-color: $gray1;
       margin: 0px !important;
     }
     & img{
@@ -53,17 +104,10 @@
       transition: all 0.5s;
       cursor: pointer;
       padding: 5px 0px;
-      &:hover{
-        background-color: rgb(58, 58, 58);
-      }
       &___active{
         transition: all 0.5s;
         transform: scale(1.3);
       }
-      color: white;
-      a{
-        color: white;
-      }
       li{
         text-align: center;
       }
@@ -72,9 +116,6 @@
         margin-bottom: 0px;
       }
     }
-    &--active{
-      border-bottom: 1px solid $gray9;
-    }
   }
 }
 
@@ -196,7 +237,7 @@
 
 @media screen and (max-width: 640px) {
   .lesson {
-    border-radius: 10px;
+    // border-radius: 10px;
     margin-bottom: 15px;
     header {
       border-top-right-radius: 10px;
@@ -216,8 +257,8 @@
       text-align: center;
     }
     &__files{
-      border-bottom-left-radius: 10px;
-      border-bottom-right-radius: 10px;
+      // border-bottom-left-radius: 10px;
+      // border-bottom-right-radius: 10px;
       padding: 0px !important;
       &--sample{
         img{

src/views/Course/Lesson/index.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import whiteDropdown from "../../../assets/icons/white-dropdown.png";
+import greenPlay from "../../../assets/icons/play-green.png";
+import greenDocument from "../../../assets/icons/document-green.png";
 import whitePlay from "../../../assets/icons/white-play.png";
 import document from "../../../assets/icons/document.png";
 import { connect } from "react-redux";
@@ -33,10 +35,10 @@ function Lesson({
   const light = theme === "light";
   return (
     <div
-      className={_.join([
-        "lesson d-flex flex-column",
-        light ? "lesson__light" : "lesson__dark",
-      ], " ")}
+      className={_.join(
+        ["lesson d-flex flex-column", light ? "lesson-light" : "lesson-dark"],
+        " "
+      )}
     >
       <header
         className="desktop justify-content-between align-items-center"
@@ -107,8 +109,18 @@ function Lesson({
               }
             >
               <div className="d-flex align-items-center">
-                {data.type === "video" && <img src={whitePlay} alt="" />}
-                {data.type === "pdf" && <img src={document} alt="" />}
+                {data.type === "video" &&
+                  (light ? (
+                    <img src={greenPlay} alt="" />
+                  ) : (
+                    <img src={whitePlay} alt="" />
+                  ))}
+                {data.type === "pdf" &&
+                  (light ? (
+                    <img src={greenDocument} alt="" />
+                  ) : (
+                    <img src={document} alt="" />
+                  ))}
                 <img
                   className={
                     selectedLesson === data.id

src/views/Course/index.scss

@@ -1,49 +1,84 @@
 @import "./Lesson/index.scss";
 
 .course {
-  &__light {
-    .course__options--rate {
-      color: black;
+  &-light{
+    .course{
+      &__header {
+        border-bottom: 2px solid $gray12;
+      }
+      &__info {
+        &--description {
+          a {
+            color: $gray5;
+          }
+          li {
+            color: $gray5;
+          }
+          h1 {
+            color: $gray5;
+          }
+          p {
+            color: $gray6;
           }
-    .course__options--button {
-      background-color: white !important;
-      color: black;
+          .course-info-items {
+            background-color: #9cdf5222;
+            i {
+              color: $green;
+            }
+          }
+        }
+      }
+      &__options {
+        &--rate {
+          border: none;
+          background-color: $gray12;
+          box-shadow: none;
+          color: $gray5;
         }
+        &--button {
+          background-color: $gray12;
+          border: none;
+          color: $gray5;
+          transition: all 0.3s;
+          &:hover {
+            color: $gray5;
+            background-color: $gray;
           }
+        }
+      }
+      &__list {
+        &--header {
+          h2 {
+            color: $green;
+          }
+          p {
+            color: $gray7;
+          }
+        }
+      }
+    }
+  }
+  &-dark{
+    .course{
       &__header {
-    padding: 30px 0px 45px;
         border-bottom: 2px solid $gray5;
       }
       &__info {
-    &--image {
-      margin-left: 20px;
-      img {
-        border-top-left-radius: 9px;
-        border-top-right-radius: 9px;
-        border-bottom-right-radius: 9px;
-        border-bottom-left-radius: 24px;
-      }
-    }
         &--description {
-      padding-top: 5px;
           a {
             color: $gray5;
           }
-      li {
-        color: $gray5;
-      }
           h1{
             color: white;
-        margin-top: 12px;
+          }
+          li {
+            color: $gray5;
           }
           p {
             color: $gray6;
-        margin-top: 25px;
           }
           .course-info-items {
-        padding: 10px;
             background-color: #08793d23;
-        border-radius: 10px;
             i {
               color: $green;
             }
@@ -54,29 +89,19 @@
         &--rate {
           border: 2px solid $gray7;
           box-shadow: 0px 0px 20px #f7ff0179;
-      border-radius: 15px;
-      padding-top: 20px;
           color: white;
         }
         &--button {
           background-color: #313131;
           border: 1px solid $gray7;
           color: white;
-      padding: 8px;
-      text-align: center;
-      margin-top: 15px;
           &:hover {
             color: white;
           }
         }
       }
       &__list {
-    margin-bottom: 30px;
-    border-radius: 10px;
-
         &--header {
-      padding: 20px 0px 20px !important;
-      border: 0px !important;
           h2 {
             color: $green;
           }
@@ -86,6 +111,54 @@
         }
       }
     }
+  }
+  &__header {
+    padding: 30px 0px 45px;
+  }
+  &__info {
+    &--image {
+      margin-left: 20px;
+      img {
+        border-top-left-radius: 9px;
+        border-top-right-radius: 9px;
+        border-bottom-right-radius: 9px;
+        border-bottom-left-radius: 24px;
+      }
+    }
+    &--description {
+      padding-top: 5px;
+      h1 {
+        margin-top: 12px;
+      }
+      p {
+        margin-top: 25px;
+      }
+      .course-info-items {
+        padding: 10px;
+        border-radius: 10px;
+      }
+    }
+  }
+  &__options {
+    &--rate {
+      border-radius: 15px;
+      padding-top: 20px;
+    }
+    &--button {
+      padding: 8px;
+      text-align: center;
+      margin-top: 15px;
+    }
+  }
+  &__list {
+    margin-bottom: 30px;
+    border-radius: 10px;
+    &--header {
+      padding: 20px 0px 20px !important;
+      border: 0px !important;
+    }
+  }
+}
 
 @media screen and (min-width: 1441px) {
   .course {
@@ -266,7 +339,6 @@
 
 @media screen and (min-width: 641px) and (max-width: 1007px) {
   .course {
-    background: black;
     main {
       max-width: 900px;
       padding: 0px 20px;
@@ -364,7 +436,6 @@
 
 @media screen and (max-width: 640px) {
   .course {
-    background: black;
     margin-top: 20px;
     &__header {
       padding: 0px;

src/views/Course/index.tsx

@@ -43,7 +43,7 @@ function Course({ getInfo, info, categories, loading, theme }: any) {
       className={_.join(
         [
           "course main d-flex flex-column",
-          light ? "course__light" : "course__dark",
+          light ? "course-light bg-white" : "course-dark bg-black",
         ],
         " "
       )}
@@ -96,7 +96,7 @@ function Course({ getInfo, info, categories, loading, theme }: any) {
                 </div>
                 <span>از 288 رای</span>
               </div>
-              <StyledRating rate={info?.rate} />
+              <StyledRating rate={info?.rate} theme={theme} />
               <h2>میانگین رای کاربران</h2>
             </div>
             <button className="course__options--button d-flex align-items-center justify-content-between">

src/views/Faq/index.scss

@@ -1,41 +1,84 @@
 .faq {
-  &__light{
+  &-light{
+    header{
+      h1{
+        color: $gray5;
+      }
+      input{
+        background-color: $gray12;
+      }
+      button{
+        background-color: $gray1;
+        border-radius: 5px;
+      }
+    }
     .faq{
       &__list{
         li{
-          background-color: white !important;
-          border: 1px solid black !important;
+          background-color: $gray13 !important;
           p{
-            color: black !important;
+            color: $gray5 !important;
+          }
+          strong{
+            color: $green6;
           }
         }
       }
     }
   }
+  &-dark{
+    header {
+      h1 {
+        color: white;
+      }
+      p {
+        color: $gray11;
+      }
+      input {
+        background-color: $gray5;
+        color: white;
+        &::placeholder {
+          color: $gray11;
+        }
+      }
+      button {
+        background-color: $gray1;
+      }
+    }
+    &__list {
+      li{
+        background-color: $gray5;
+      }
+      &--itemHeader {
+        strong {
+          color: $green;
+        }
+      }
+      &--itemBody {
+        p {
+          color: white;
+        }
+      }
+    }
+  }
   header {
     width: 100%;
     margin: 0px auto;
     padding-top: 40px;
     h1 {
-      color: white;
       margin-bottom: 15px;
     }
     p {
-      color: $gray11;
     }
     input {
-      background-color: $gray5;
       border-top-right-radius: 10px;
       border-bottom-right-radius: 10px;
       border: none;
-      color: white;
       flex: 1;
       &::placeholder {
-        color: $gray11;
       }
     }
     button {
-      background-color: $gray1;
       border: none;
       margin-right: 2px;
       width: 70px;
@@ -49,7 +92,6 @@
     margin: 0px auto !important;
     padding-top: 30px !important;
     li{
-      background-color: $gray5;
       margin-bottom: 15px;
       cursor: pointer;
       border-radius: 5px;
@@ -58,9 +100,6 @@
       border-top-right-radius: 5px;
       border-top-left-radius: 5px;
       padding: 10px;
-      strong {
-        color: $green;
-      }
       img{
         width: 30px;
       }
@@ -69,9 +108,6 @@
       border-bottom-right-radius: 5px;
       border-bottom-left-radius: 5px;
       padding:0px 10px 30px;
-      p {
-        color: white;
-      }
     }
   }
 }

src/views/Faq/index.tsx

@@ -28,7 +28,7 @@ function Faq({
     <div
       className={_.join([
         "faq main d-flex flex-column",
-        light ? "faq__light" : "faq__dark",
+        light ? "faq-light bg-white" : "faq-dark bg-black",
       ], " ")}
     >
       <Navbar />

src/views/Home/index.scss

@@ -5,9 +5,6 @@
 @import './Footer/index.scss';
 @import './Header/index.scss';
 
-.home {
- 
-}
 
 @media screen and (min-width: 641px) and (max-width: 1007px){
   .home{

src/views/Home/index.tsx

@@ -13,7 +13,7 @@ import scroll from "../../util/scroll";
 import Loader from "../../components/Loader";
 import { connect } from "react-redux";
 import { book, publicApi } from "../../redux/actions";
-import _ from 'lodash';
+import _ from "lodash";
 
 function Home({
   courseList,
@@ -28,7 +28,7 @@ function Home({
   getHeader,
   bookLoading,
   publicLoading,
-  theme
+  theme,
 }: any) {
   const [grade, setGrade] = useState(null);
   const [vocal, setVocal] = useState(false);
@@ -49,7 +49,13 @@ function Home({
   return (
     <>
       <div
-        className={_.join(["home main d-flex flex-column", theme === 'dark' ? 'main__dark' : 'main__light'], " ")}
+        className={_.join(
+          [
+            "home main d-flex flex-column",
+            theme === "dark" ? "home-dark bg-black" : "home-light bg-white",
+          ],
+          " "
+        )}
         style={{
           filter: vocal || bookLoading || publicLoading ? "blur(8px)" : "",
         }}
@@ -65,7 +71,10 @@ function Home({
           setInputValue={setInputValue}
           theme={theme}
         />
-        <Courses courses={sortFilterCourse ? sortFilterCourse : courseList} theme={theme} />
+        <Courses
+          courses={sortFilterCourse ? sortFilterCourse : courseList}
+          theme={theme}
+        />
         <GradeFilter
           grades={grades}
           grade={grade}
@@ -74,7 +83,10 @@ function Home({
           setGradeDropdown={setGradeDropdown}
           theme={theme}
         />
-        <Books list={gradeFilterBooks ? gradeFilterBooks : courseList} theme={theme} />
+        <Books
+          list={gradeFilterBooks ? gradeFilterBooks : courseList}
+          theme={theme}
+        />
         <Blogs theme={theme} />
         <AppDownload theme={theme} />
         <Footer />

src/views/Subscription/SubscribeRadio/index.scss

@@ -5,56 +5,81 @@
   border-radius: 10px;
   cursor: pointer;
   transition: all 0.5s;
+  &-active {
+    box-shadow: 0px 0px 6px $green !important;
+    background-color: $green !important;
+    border: none;
+    .subscribe-radio__factor {
+      background-color: rgba(255, 255, 255, 0.18);
+    }
+    h2,p,b, strong,i {
+      color: white !important;
+    }
+  }
+  &-light {
+    .subscribe-radio {
+      &__name {
+        h2 {
+          color: $gray5;
+        }
+      }
+      &__factor {
+        background-color: rgba(255, 255, 255, 0.18);
 
+        strong,
+        b {
+          color: $gray5;
+        }
+        &--tag {
+          background-color: $yellow;
+        }
+        &--finalPrice {
+          i {
+            color: $gray5;
+          }
+        }
+        &--off {
+          color: #707070;
+          b {
+            color: #707070;
+            span {
+              background-color: rgb(211, 211, 211);
+            }
+          }
+        }
+      }
+    }
+  }
+  &-dark {
+    .subscribe-radio {
       &__name {
-    border-top-right-radius: 10px;
-    border-bottom-right-radius: 10px;
         h2 {
           color: white;
-      margin-bottom: 0px;
         }
-    
       }
       &__factor {
-    border-top-left-radius: 10px;
-    border-bottom-left-radius: 10px;
         background-color: rgba(255, 255, 255, 0.18);
 
-    strong, b{
+        strong,
+        b {
           color: white;
         }
         &--tag {
           background-color: $yellow;
-      padding: 4px 20px;
-      border-radius: 30px;
-      width: fit-content;
-      letter-spacing: -1px;
         }
         &--finalPrice {
           i {
             color: white;
-        margin-right: 10px;
           }
         }
         &--off {
           color: #707070;
           b {
             color: #707070;
-        position: relative;
             span {
-          position: absolute;
-          width: 100%;
-          height: 2px;
-          top: 50%;
-          left: 0px;
-          transform: translateY(-50%) rotate(-15deg);
               background-color: rgb(211, 211, 211);
-          opacity: 0.5;
             }
           }
-      i{
-        margin-right: 10px;
-      }
         }
       }
       &-active {
@@ -64,16 +89,45 @@
           background-color: rgba(255, 255, 255, 0.18);
         }
       }
-  &__light{
-    h2{
-      color: black !important;
     }
-    .subscribe-radio{
-      &-active{
+  }
+  &__name {
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
     h2 {
-          color: white !important;
+      margin-bottom: 0px;
     }
   }
+  &__factor {
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    &--tag {
+      padding: 4px 20px;
+      border-radius: 30px;
+      width: fit-content;
+      letter-spacing: -1px;
+    }
+    &--finalPrice {
+      i {
+        margin-right: 10px;
+      }
+    }
+    &--off {
+      b {
+        position: relative;
+        span {
+          position: absolute;
+          width: 100%;
+          height: 2px;
+          top: 50%;
+          left: 0px;
+          transform: translateY(-50%) rotate(-15deg);
+          opacity: 0.5;
+        }
+      }
+      i {
+        margin-right: 10px;
+      }
     }
   }
 }

src/views/Subscription/SubscribeRadio/index.tsx

@@ -21,7 +21,7 @@ function SubscribeRadio({ data, selectedVOD, selectVOD, theme }: any) {
         [
           "subscribe-radio d-flex",
           selectedVOD?.id === data.id ? "subscribe-radio-active" : "",
-          light ? "subscribe-radio__light" : "subscribe-radio__dark",
+          light ? "subscribe-radio-light" : "subscribe-radio-dark",
         ],
         " "
       )}

src/views/Subscription/index.scss

@@ -2,6 +2,7 @@
 @import './SubscribeRadio/index.scss';
 
 .subscription {
+  &-dark{
     main {
       h1,h2{
         color: $gray;
@@ -12,6 +13,19 @@
       }
     }
   }
+  &-light{
+    main {
+      h1,h2{
+        color: $gray5;
+      }
+      p{
+        color : $gray5;
+        margin : 10px 0px 35px;
+      }
+    }
+  }
+  
+}
 
 @media screen and (min-width : 1441px) {
   .subscription{
@@ -33,7 +47,7 @@
     main{
       margin-top: 20px;
       max-width: 700px;
-      transform: scale(0.8) translateY(-80px);
+      transform: scale(0.9) translateY(-30px);
       h1{
         font-size: calc(100vw / 50);
       }

src/views/Subscription/index.tsx

@@ -28,6 +28,7 @@ function Subscription({
       className={_.join(
         [
           "subscription main d-flex flex-column",
+          light ? 'subscription-light bg-white' : 'subscription-dark bg-black'
         ],
         " "
       )}

src/views/VideoTube/LessonPlayList/index.scss

@@ -1,35 +1,36 @@
 .lesson-playlist {
   width: 100%;
   padding-bottom: 10px;
-  &__light{
-    .lesson-playlist{
-      h3{
+  &-light {
+    header {
       background-color: inherit !important;
-        border: 1px solid $gray9 !important;
+      h3 {
+        background-color: $gray12;
       }
+    }
+    .lesson-playlist {
       &__item {
         * {
           color: black !important;
         }
+        &--active{
+          background-color: $gray13;
+        }
       }
     }
-    
   }
+  &-dark {
     header {
       background-color: inherit !important;
-    margin-bottom: 5px;
       h3 {
         background-color: $gray7;
-      padding: 5px 10px;
-      margin: 0px;
       }
       span {
         background-color: $gray7;
-      display: flex;
-      flex: 1;
-      height : 1px;
       }
     }
+    .lesson-playlist {
+      
       &__item {
         &--count {
           color: white;
@@ -38,30 +39,55 @@
           background: rgba($gray12, 0.21);
         }
         &--text {
-      padding: 15px 10px;
           h4 {
             color: white;
-        margin: 0px;
           }
           p {
             color: $gray7;
-        margin: 0px;
           }
         }
         &--video {
           span {
             background-color: #0000006d;
+            color: white;
+          }
+        }
+      }
+    }
+  }
+  header {
+    margin-bottom: 5px;
+    h3 {
+      padding: 5px 10px;
+      margin: 0px;
+    }
+    span {
+      display: flex;
+      flex: 1;
+      height: 1px;
+    }
+  }
+  &__item {
+    &--text {
+      padding: 15px 10px;
+      h4 {
+        margin: 0px;
+      }
+      p {
+        margin: 0px;
+      }
+    }
+    &--video {
+      span {
         padding: 0px 5px;
         position: absolute;
         left: 5px;
         bottom: 10px;
-        color: white;
       }
     }
   }
 }
 
-
 @media screen and (min-width: 1441px) {
   .lesson-playlist {
     width: 100%;
@@ -71,7 +97,6 @@
         font-size: 16px;
       }
       span {
-        
       }
     }
     &__item {
@@ -116,7 +141,6 @@
         font-size: calc(100vw / 95);
       }
       span {
-        
       }
     }
     &__item {
@@ -161,7 +185,6 @@
         font-size: calc(100vw / 45);
       }
       span {
-        
       }
     }
     &__item {
@@ -206,7 +229,6 @@
         font-size: calc(100vw / 38);
       }
       span {
-        
       }
     }
     &__item {

src/views/VideoTube/LessonPlayList/index.tsx

@@ -43,7 +43,7 @@ function LessonPlayList({
           className={_.join(
             [
               "lesson-playlist d-flex flex-column",
-              light ? "lesson-playlist__light" : "lesson-playlist__dark",
+              light ? "lesson-playlist-light" : "lesson-playlist-dark",
             ],
             " "
           )}

src/views/VideoTube/index.scss

@@ -4,7 +4,8 @@
 @import "./LessonPlayList/index.scss";
 
 .video-tube {
-  &__light {
+  &-light {
+    background-color: white;
     h1,
     p {
       color: black !important;
@@ -13,40 +14,61 @@
       &__content {
         &--comments {
           color: black !important;
+          header{
+            background-color: inherit !important;
+            h2{
+              color: $green !important;
+            }
+          }
+          button{
+            color: $green !important;
+            background-color: inherit;
+          }
         }
         &--addComment {
           textarea {
-            background-color: white !important;
+            background-color: $gray13;
             color: black !important;
+            border: none;
           }
         }
       }
       &__sidebar {
         header {
-          background-color: white !important;
+          background-color: $gray12;
           * {
             color: black !important;
           }
         }
+        &--playlist{
+          border: 1px solid $gray7;
+          border-top: none;
+        }
+        &--suggests{
+          border : none;
+          &__list{
+            background-color: inherit;
+          }
+        }
+        &--attachments{
+          border: none;
+        }
       }
     }
   }
+  &-dark {
+    .video-tube{
       &__content {
-    margin-left: 15px;
-
         &--display {
           border-bottom: 1px solid $gray8;
-      padding-bottom: 30px;
           video {
             border: 1px solid $gray8;
           }
           span {
             color: $green4;
-        padding: 15px 0px;
           }
           h1 {
             color: white;
-        margin-bottom: 20px;
           }
           p {
             color: white;
@@ -55,6 +77,99 @@
         &--comments {
           color: white;
           border-bottom: 1px solid $gray8;
+          header {
+            h2 {
+              color: white;
+            }
+          }
+          button {
+            background-color: inherit;
+            color: $green;
+          }
+        }
+        &--addComment {
+          textarea {
+            background-color: $gray8;
+            color: white;
+            &::placeholder {
+              color: $gray4;
+            }
+          }
+        }
+      }
+      &__sidebar {
+        &--playlist {
+          border: 1px solid $gray8;
+          header {
+            color: white;
+          }
+          &___list {
+            /* Track */
+            &::-webkit-scrollbar-track {
+              box-shadow: inset 0 0 5px inherit;
+            }
+  
+            /* Handle */
+            &::-webkit-scrollbar-thumb {
+              background: $gray;
+            }
+  
+            /* Handle on hover */
+            &::-webkit-scrollbar-thumb:hover {
+              background: white;
+            }
+          }
+        }
+        &--attachments {
+          border: 1px solid $gray8;
+          header {
+            color: white;
+          }
+          &___list {
+            /* Track */
+            &::-webkit-scrollbar-track {
+              box-shadow: inset 0 0 5px inherit;
+            }
+            /* Handle */
+            &::-webkit-scrollbar-thumb {
+              background: $gray10;
+            }
+            /* Handle on hover */
+            &::-webkit-scrollbar-thumb:hover {
+              background: white;
+            }
+          }
+        }
+        &--suggests {
+          border: 1px solid $gray8;
+          header {
+            color: white;
+            span {
+              background-color: #00fff74f;
+              color: $blue2;
+            }
+          }
+        }
+      }
+    }
+  }
+  &__content {
+    margin-left: 15px;
+
+    &--display {
+      padding-bottom: 30px;
+      video {
+      }
+      span {
+        padding: 15px 0px;
+      }
+      h1 {
+        margin-bottom: 20px;
+      }
+      p {
+      }
+    }
+    &--comments {
       padding-bottom: 30px;
       header {
         padding: 20px 0px;
@@ -63,9 +178,7 @@
         }
       }
       button {
-        background-color: inherit;
         border: none;
-        color: $green;
       }
     }
     &--addComment {
@@ -74,25 +187,18 @@
       textarea {
         width: 100%;
         border-radius: 12px;
-        background-color: $gray8;
         padding: 10px;
-        color: white;
         &:focus {
           outline: none;
         }
-        &::placeholder {
-          color: $gray4;
-        }
       }
     }
   }
   &__sidebar {
     &--playlist {
-      border: 1px solid $gray8;
       margin-bottom: 30px;
       header {
         width: 100%;
-        color: white;
         h2,
         p {
           margin: 0px;
@@ -110,28 +216,23 @@
 
         /* Track */
         &::-webkit-scrollbar-track {
-          box-shadow: inset 0 0 5px inherit;
           border-radius: 10px;
         }
 
         /* Handle */
         &::-webkit-scrollbar-thumb {
-          background: $gray;
           border-radius: 10px;
         }
 
         /* Handle on hover */
         &::-webkit-scrollbar-thumb:hover {
-          background: white;
         }
       }
     }
     &--attachments {
-      border: 1px solid $gray8;
       margin-bottom: 30px;
       header {
         width: 100%;
-        color: white;
         h2,
         p {
           margin: 0px;
@@ -148,33 +249,26 @@
 
         /* Track */
         &::-webkit-scrollbar-track {
-          box-shadow: inset 0 0 5px inherit;
           border-radius: 10px;
         }
 
         /* Handle */
         &::-webkit-scrollbar-thumb {
-          background: $gray10;
           border-radius: 10px;
         }
 
         /* Handle on hover */
         &::-webkit-scrollbar-thumb:hover {
-          background: white;
         }
       }
     }
     &--suggests {
-      border: 1px solid $gray8;
       header {
         width: 100%;
-        color: white;
         h2 {
           margin: 0px;
         }
         span {
-          background-color: #00fff74f;
-          color: $blue2;
           padding: 5px 8px;
         }
       }
@@ -571,7 +665,6 @@
         }
         &___list {
           padding: 15px 12px;
-          background-color: #08793d58;
         }
       }
     }

src/views/VideoTube/index.tsx

@@ -52,7 +52,7 @@ function VodTube({
         className={_.join(
           [
             "video-tube main d-flex flex-column",
-            light ? "video-tube__light" : "video-tube__dark",
+            light ? "video-tube-light bg-white" : "video-tube-dark bg-black",
           ],
           " "
         )}