add theming via css custom properties

and a bonus dark color theme toggle

4 files changed, 10 insertions, 13 deletions

diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss
index 892520e40..2f078d46d 100644
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -5,8 +5,6 @@ $border-width: 3px;
 $border-type: solid;
 $border-color: #EAEAEA;
 
-$background-color:  #F7F7F7;
-
 /deep/ .root-tabset.video-add-tabset {
   &.hide-nav .nav {
     display: none !important;
@@ -24,7 +22,6 @@ $background-color:  #F7F7F7;
     a.nav-link {
       @include disable-default-a-behaviour;
 
-      color: #000;
       height: 40px !important;
       padding: 0 30px !important;
       font-size: 15px;
@@ -32,10 +29,10 @@ $background-color:  #F7F7F7;
       &.active {
         border: $border-width $border-type $border-color;
         border-bottom: none;
-        background-color: $background-color !important;
+        background-color: var(--mainBackgroundColor) !important;
 
         span {
-          border-bottom: 2px solid #F1680D;
+          border-bottom: 2px solid var(--mainColor);
           font-weight: $font-bold;
         }
       }
@@ -46,7 +43,7 @@ $background-color:  #F7F7F7;
     border: $border-width $border-type $border-color;
     border-top: none;
 
-    background-color: $background-color;
+    background-color: var(--mainBackgroundColor);
     border-radius: 3px;
     width: 100%;
     min-height: 440px;
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
index 78bcfe121..285db061f 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
@@ -35,7 +35,7 @@
       .comment-account {
         @include disable-default-a-behaviour;
 
-        color: #000;
+        color: var(--mainForegroundColor);
         font-weight: $font-bold;
       }
 
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index be1388a83..edd5ae6ba 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -111,7 +111,7 @@
         a {
           @include disable-default-a-behaviour;
 
-          color: #000;
+          color: var(--mainForegroundColor);
 
           &:hover {
             opacity: 0.8;
@@ -137,7 +137,7 @@
           display: inline;
           align-items: center;
           font-size: 13px;
-          color: #000;
+          color: var(--mainForegroundColor);
 
           span:hover {
             opacity: 0.8;
@@ -342,7 +342,7 @@
 
       a.video-attribute-value {
         @include disable-default-a-behaviour;
-        color: #000;
+        color: var(--mainForegroundColor);
 
         &:hover {
           opacity: 0.9;
@@ -413,7 +413,7 @@
   a {
     @include disable-default-a-behaviour;
 
-    color: $orange-color;
+    color: var(--mainColor);
     transition: color 0.3s;
 
     &:hover {
@@ -422,7 +422,7 @@
   }
 
   .privacy-concerns-okay {
-    background-color: $orange-color;
+    background-color: var(--mainColor);
     padding: 5px 8px 5px 7px;
     margin-left: auto;
     border-radius: 3px;
diff --git a/client/src/app/videos/video-list/video-overview.component.scss b/client/src/app/videos/video-list/video-overview.component.scss
index e7dc60b4b..f5508cf61 100644
--- a/client/src/app/videos/video-list/video-overview.component.scss
+++ b/client/src/app/videos/video-list/video-overview.component.scss
@@ -21,7 +21,7 @@
   a {
     @include disable-default-a-behaviour;
 
-    color: #000;
+    color: var(--mainForegroundColor);
   }
 }