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 React from "react";
-import StarIcon from '@mui/icons-material/Star';
+import StarIcon from "@mui/icons-material/Star";
-import Rating from '@mui/material/Rating';
+import Rating from "@mui/material/Rating";
 
-
+export default function StyledRating({ rate, theme }: any) {
-
-export default function StyledRating({rate} : any) {
   return (
     <>
-       <Rating
+      <Rating
         name="customized-color"
         defaultValue={rate}
         precision={0.5}
-        icon={<StarIcon style={{ fontSize : 25, color : '#FFED00'  }} />}
+        icon={<StarIcon style={{ fontSize: 25, color: "#FFED00" }} />}
-        emptyIcon={<StarIcon style={{ fontSize : 25, color : '#494949' }} />}
+        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{
+    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 *{
+    .lesson{
-      color: black !important;
+      
+      &__files{
+        border-left: 1px solid $gray9;
+        border-right: 1px solid $gray9;
+        p{
+          color: white;
+          background-color: $gray1;
+        }
+        &--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-left-radius: 10px;
-    border-bottom-right-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;
+    transition: all 0.15s ease-in;
-    border-right: 1px solid $gray9;
-    transition: all 0.4s 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-left-radius: 10px;
-      border-bottom-right-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([
+      className={_.join(
-        "lesson d-flex flex-column",
+        ["lesson d-flex flex-column", light ? "lesson-light" : "lesson-dark"],
-        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 === "video" &&
-                {data.type === "pdf" && <img src={document} alt="" />}
+                  (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,18 +1,119 @@
 @import "./Lesson/index.scss";
 
 .course {
-  &__light {
+  &-light{
-    .course__options--rate {
+    .course{
-      color: black;
+      &__header {
+        border-bottom: 2px solid $gray12;
+      }
+      &__info {
+        &--description {
+          a {
+            color: $gray5;
+          }
+          li {
+            color: $gray5;
+          }
+          h1 {
+            color: $gray5;
+          }
+          p {
+            color: $gray6;
+          }
+          .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;
+          }
+        }
+      }
     }
-    .course__options--button {
+  }
-      background-color: white !important;
+  &-dark{
-      color: black;
+    .course{
+      &__header {
+        border-bottom: 2px solid $gray5;
+      }
+      &__info {
+        &--description {
+          a {
+            color: $gray5;
+          }
+          h1{
+            color: white;
+          }
+          li {
+            color: $gray5;
+          }
+          p {
+            color: $gray6;
+          }
+          .course-info-items {
+            background-color: #08793d23;
+            i {
+              color: $green;
+            }
+          }
+        }
+      }
+      &__options {
+        &--rate {
+          border: 2px solid $gray7;
+          box-shadow: 0px 0px 20px #f7ff0179;
+          color: white;
+        }
+        &--button {
+          background-color: #313131;
+          border: 1px solid $gray7;
+          color: white;
+          &:hover {
+            color: white;
+          }
+        }
+      }
+      &__list {
+        &--header {
+          h2 {
+            color: $green;
+          }
+          p {
+            color: $gray7;
+          }
+        }
+      }
     }
   }
   &__header {
     padding: 30px 0px 45px;
-    border-bottom: 2px solid $gray5;
   }
   &__info {
     &--image {
@@ -26,63 +127,35 @@
     }
     &--description {
       padding-top: 5px;
-      a {
-        color: $gray5;
-      }
-      li {
-        color: $gray5;
-      }
       h1 {
-        color: white;
         margin-top: 12px;
       }
       p {
-        color: $gray6;
         margin-top: 25px;
       }
       .course-info-items {
         padding: 10px;
-        background-color: #08793d23;
         border-radius: 10px;
-        i {
-          color: $green;
-        }
       }
     }
   }
   &__options {
     &--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;
-      }
-      p {
-        color: $gray7;
-      }
     }
   }
 }
@@ -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;
+          background-color: $gray13 !important;
-          border: 1px solid black !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 />
@@ -100,7 +112,7 @@ export default connect(
     headerData: state.publicApi.header,
     bookLoading: state.book.loading,
     publicLoading: state.publicApi.loading,
-    theme : state.publicApi.theme,
+    theme: state.publicApi.theme,
   }),
   {
     getCourseList: book.list,

src/views/Subscription/SubscribeRadio/index.scss

@@ -1,111 +1,165 @@
-.subscribe-radio{
+.subscribe-radio {
   width: 100%;
-  border : 1px solid $gray7;
+  border: 1px solid $gray7;
   margin-bottom: 15px;
   border-radius: 10px;
   cursor: pointer;
   transition: all 0.5s;
-  
+  &-active {
-  &__name{
+    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 {
+        h2 {
+          color: white;
+        }
+      }
+      &__factor {
+        background-color: rgba(255, 255, 255, 0.18);
+
+        strong,
+        b {
+          color: white;
+        }
+        &--tag {
+          background-color: $yellow;
+        }
+        &--finalPrice {
+          i {
+            color: white;
+          }
+        }
+        &--off {
+          color: #707070;
+          b {
+            color: #707070;
+            span {
+              background-color: rgb(211, 211, 211);
+            }
+          }
+        }
+      }
+      &-active {
+        box-shadow: 0px 0px 6px $green;
+        background-color: $green;
+        .subscribe-radio__factor {
+          background-color: rgba(255, 255, 255, 0.18);
+        }
+      }
+    }
+  }
+  &__name {
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
-    h2{
+    h2 {
-      color: white;
       margin-bottom: 0px;
     }
-    
   }
-  &__factor{
+  &__factor {
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
-    background-color: rgba(255, 255, 255, 0.18);
+    &--tag {
-
-    strong, b{
-      color: white;
-    }
-    &--tag{
-      background-color: $yellow;
       padding: 4px 20px;
       border-radius: 30px;
       width: fit-content;
       letter-spacing: -1px;
     }
-    &--finalPrice{
+    &--finalPrice {
-      i{
+      i {
-        color: white;
         margin-right: 10px;
       }
     }
-    &--off{
+    &--off {
-      color: #707070;
+      b {
-      b{
-        color: #707070;
         position: relative;
-        span{
+        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{
+      i {
         margin-right: 10px;
       }
     }
   }
-  &-active{
-    box-shadow: 0px 0px 6px $green;
-    background-color: $green;
-    .subscribe-radio__factor{
-      background-color: rgba(255, 255, 255, 0.18);
-    }
-  }
-  &__light{
-    h2{
-      color: black !important;
-    }
-    .subscribe-radio{
-      &-active{
-        h2{
-          color: white !important;
-        }
-      }
-    }
-  }
 }
 
 @media screen and (min-width: 1441px) {
-  .subscribe-radio{
+  .subscribe-radio {
     min-height: 60px;
-    &__name{
+    &__name {
       flex: 7;
-      h2{
+      h2 {
         font-size: 20px;
         margin-right: 40px;
       }
     }
-    &__factor{
+    &__factor {
       flex: 3;
-      &--tag{
+      &--tag {
         font-size: 11px;
       }
-      &--off{
+      &--off {
-        b{
+        b {
           font-size: 16px;
         }
-        i{
+        i {
           font-size: 10px;
         }
       }
-      &--finalPrice{
+      &--finalPrice {
-        i{
+        i {
           font-size: 12px;
         }
-        strong{
+        strong {
           font-size: 26px;
         }
       }
@@ -114,33 +168,33 @@
 }
 
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
-  .subscribe-radio{
+  .subscribe-radio {
     min-height: 60px;
-    &__name{
+    &__name {
       flex: 7;
-      h2{
+      h2 {
         font-size: calc(100vw / 70);
         margin-right: 40px;
       }
     }
-    &__factor{
+    &__factor {
       flex: 3;
-      &--tag{
+      &--tag {
         font-size: calc(100vw / 130);
       }
-      &--off{
+      &--off {
-        b{
+        b {
           font-size: calc(100vw / 80);
         }
-        i{
+        i {
           font-size: calc(100vw / 115);
         }
       }
-      &--finalPrice{
+      &--finalPrice {
-        i{
+        i {
           font-size: calc(100vw / 125);
         }
-        strong{
+        strong {
           font-size: calc(100vw / 74);
         }
       }
@@ -149,33 +203,33 @@
 }
 
 @media screen and (min-width: 641px) and (max-width: 1007px) {
-  .subscribe-radio{
+  .subscribe-radio {
     min-height: 70px;
-    &__name{
+    &__name {
       flex: 7;
-      h2{
+      h2 {
         font-size: calc(100vw / 40);
         margin-right: 10px;
       }
     }
-    &__factor{
+    &__factor {
       flex: 3;
-      &--tag{
+      &--tag {
         font-size: calc(100vw / 55);
       }
-      &--off{
+      &--off {
-        b{
+        b {
           font-size: calc(100vw / 50);
         }
-        i{
+        i {
           font-size: calc(100vw / 60);
         }
       }
-      &--finalPrice{
+      &--finalPrice {
-        i{
+        i {
           font-size: calc(100vw / 45);
         }
-        strong{
+        strong {
           font-size: calc(100vw / 38);
         }
       }
@@ -184,36 +238,36 @@
 }
 
 @media screen and (max-width: 640px) {
-  .subscribe-radio{
+  .subscribe-radio {
     min-height: 70px;
-    &__name{
+    &__name {
       flex: 7;
-      h2{
+      h2 {
         font-size: calc(100vw / 25);
         margin-right: 10px;
       }
     }
-    &__factor{
+    &__factor {
       flex: 3;
-      &--tag{
+      &--tag {
         font-size: calc(100vw / 45);
       }
-      &--off{
+      &--off {
-        b{
+        b {
           font-size: calc(100vw / 30);
         }
-        i{
+        i {
           font-size: calc(100vw / 45);
         }
       }
-      &--finalPrice{
+      &--finalPrice {
-        i{
+        i {
           font-size: calc(100vw / 45);
         }
-        strong{
+        strong {
           font-size: calc(100vw / 20);
         }
       }
     }
   }
-}
+}

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,15 +2,29 @@
 @import './SubscribeRadio/index.scss';
 
 .subscription {
-  main {
+  &-dark{
-    h1,h2{
+    main {
-      color: $gray;
+      h1,h2{
+        color: $gray;
+      }
+      p{
+        color : $gray;
+        margin : 10px 0px 35px;
+      }
     }
-    p{
+  }
-      color : $gray;
+  &-light{
-      margin : 10px 0px 35px;
+    main {
+      h1,h2{
+        color: $gray5;
+      }
+      p{
+        color : $gray5;
+        margin : 10px 0px 35px;
+      }
     }
   }
+  
 }
 
 @media screen and (min-width : 1441px) {
@@ -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,105 +1,130 @@
-.lesson-playlist{
+.lesson-playlist {
   width: 100%;
-  padding-bottom : 10px;
+  padding-bottom: 10px;
-  &__light{
+  &-light {
-    .lesson-playlist{
+    header {
-      h3{
+      background-color: inherit !important;
-        background-color : inherit !important;
+      h3 {
-        border: 1px solid $gray9 !important;
+        background-color: $gray12;
-      }
+      }
-      &__item{
+    }
-        *{
+    .lesson-playlist {
+      &__item {
+        * {
           color: black !important;
         }
+        &--active{
+          background-color: $gray13;
+        }
+      }
+    }
+  }
+  &-dark {
+    header {
+      background-color: inherit !important;
+      h3 {
+        background-color: $gray7;
+      }
+      span {
+        background-color: $gray7;
+      }
+    }
+    .lesson-playlist {
+      
+      &__item {
+        &--count {
+          color: white;
+        }
+        &--active {
+          background: rgba($gray12, 0.21);
+        }
+        &--text {
+          h4 {
+            color: white;
+          }
+          p {
+            color: $gray7;
+          }
+        }
+        &--video {
+          span {
+            background-color: #0000006d;
+            color: white;
+          }
+        }
       }
     }
-    
   }
-  header{
+  header {
-    background-color: inherit !important;
     margin-bottom: 5px;
-    h3{
+    h3 {
-      background-color : $gray7;
       padding: 5px 10px;
       margin: 0px;
     }
-    span{
+    span {
-      background-color : $gray7;
       display: flex;
       flex: 1;
-      height : 1px;
+      height: 1px;
     }
   }
-  &__item{
+  &__item {
-    &--count{
+    &--text {
-      color: white;
-    }
-    &--active{
-      background: rgba($gray12, 0.21);
-    }
-    &--text{
       padding: 15px 10px;
-      h4{
+      h4 {
-        color: white;
         margin: 0px;
       }
-      p{
+      p {
-        color: $gray7;
         margin: 0px;
       }
     }
-    &--video{
+    &--video {
-      span{
+      span {
-        background-color : #0000006d;
         padding: 0px 5px;
         position: absolute;
         left: 5px;
         bottom: 10px;
-        color: white;
       }
     }
   }
 }
 
-
 @media screen and (min-width: 1441px) {
-  .lesson-playlist{
+  .lesson-playlist {
     width: 100%;
-    header{
+    header {
-      padding: 10px 40px 0px 0px !important; 
+      padding: 10px 40px 0px 0px !important;
-      h3{
+      h3 {
         font-size: 16px;
       }
-      span{
+      span {
-        
       }
     }
-    &__item{
+    &__item {
       padding: 10px 0px 5px 0px;
       cursor: pointer;
-      &--count{
+      &--count {
         font-size: 18px;
-        width : 40px;
+        width: 40px;
         text-align: center;
       }
-      &--text{
+      &--text {
         max-width: 55%;
-        h4{
+        h4 {
           font-size: 17px;
         }
-        p{
+        p {
           font-size: 14px;
         }
       }
-      &--video{
+      &--video {
         width: 142px;
         height: 90px;
         position: relative;
-        img{
+        img {
           width: 100%;
           height: 100%;
         }
-        span{
+        span {
           font-size: 18px;
         }
       }
@@ -108,44 +133,43 @@
 }
 
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
-  .lesson-playlist{
+  .lesson-playlist {
     width: 100%;
-    header{
+    header {
-      padding: 10px 40px 0px 0px !important; 
+      padding: 10px 40px 0px 0px !important;
-      h3{
+      h3 {
         font-size: calc(100vw / 95);
       }
-      span{
+      span {
-        
       }
     }
-    &__item{
+    &__item {
       padding: 10px 0px 5px 0px;
       cursor: pointer;
-      &--count{
+      &--count {
         font-size: calc(100vw / 72);
-        width : 40px;
+        width: 40px;
         text-align: center;
       }
-      &--text{
+      &--text {
         max-width: 55%;
-        h4{
+        h4 {
           font-size: calc(100vw / 90);
         }
-        p{
+        p {
           font-size: calc(100vw / 100);
         }
       }
-      &--video{
+      &--video {
         width: 132px;
         height: 90px;
         position: relative;
-        img{
+        img {
-          width : 100%;
+          width: 100%;
-          height : 100%;
+          height: 100%;
         }
-        span{
+        span {
-          font-size:  calc(100vw / 100);
+          font-size: calc(100vw / 100);
         }
       }
     }
@@ -153,44 +177,43 @@
 }
 
 @media screen and (min-width: 641px) and (max-width: 1007px) {
-  .lesson-playlist{
+  .lesson-playlist {
     width: 100%;
-    header{
+    header {
-      padding: 10px 50px 0px 0px !important; 
+      padding: 10px 50px 0px 0px !important;
-      h3{
+      h3 {
         font-size: calc(100vw / 45);
       }
-      span{
+      span {
-        
       }
     }
-    &__item{
+    &__item {
       padding: 10px 0px 5px 0px;
       cursor: pointer;
-      &--count{
+      &--count {
         font-size: calc(100vw / 35);
-        width : 50px;
+        width: 50px;
         text-align: center;
       }
-      &--text{
+      &--text {
         max-width: 55%;
-        h4{
+        h4 {
           font-size: calc(100vw / 45);
         }
-        p{
+        p {
           font-size: calc(100vw / 50);
         }
       }
-      &--video{
+      &--video {
         width: 182px;
         // height: 90px;
         position: relative;
-        img{
+        img {
-          width : 100%;
+          width: 100%;
-          height : 100%;
+          height: 100%;
         }
-        span{
+        span {
-          font-size:  calc(100vw / 45);
+          font-size: calc(100vw / 45);
         }
       }
     }
@@ -198,46 +221,45 @@
 }
 
 @media screen and (max-width: 640px) {
-  .lesson-playlist{
+  .lesson-playlist {
     width: 100%;
-    header{
+    header {
-      padding: 10px 40px 0px 0px !important; 
+      padding: 10px 40px 0px 0px !important;
-      h3{
+      h3 {
         font-size: calc(100vw / 38);
       }
-      span{
+      span {
-        
       }
     }
-    &__item{
+    &__item {
       padding: 10px 0px 5px 0px;
       cursor: pointer;
-      &--count{
+      &--count {
         font-size: calc(100vw / 25);
-        width : 40px;
+        width: 40px;
         text-align: center;
       }
-      &--text{
+      &--text {
         max-width: 55%;
-        h4{
+        h4 {
           font-size: calc(100vw / 35);
         }
-        p{
+        p {
           font-size: calc(100vw / 40);
         }
       }
-      &--video{
+      &--video {
         width: 132px;
         height: 90px;
         position: relative;
-        img{
+        img {
-          width : 100%;
+          width: 100%;
-          height : 100%;
+          height: 100%;
         }
-        span{
+        span {
-          font-size:  calc(100vw / 40);
+          font-size: calc(100vw / 40);
         }
       }
     }
   }
-}
+}

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,21 +14,142 @@
       &__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{
+      &__sidebar {
-        header{
+        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 {
+        &--display {
+          border-bottom: 1px solid $gray8;
+          video {
+            border: 1px solid $gray8;
+          }
+          span {
+            color: $green4;
+          }
+          h1 {
+            color: white;
+          }
+          p {
+            color: white;
+          }
+        }
+        &--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;
+            }
+          }
+        }
       }
     }
   }
@@ -35,26 +157,19 @@
     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;
       }
     }
     &--comments {
-      color: white;
-      border-bottom: 1px solid $gray8;
       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",
           ],
           " "
         )}