add theming via css custom properties

and a bonus dark color theme toggle

3 files changed, 3 insertions, 3 deletions

diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index fe64a270d..5c73a8031 100644
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -7,7 +7,6 @@
   position: relative;
   top: -2px;
   background-image: url('../../../assets/images/global/help.svg');
-  background-color: #fff;
   border: none;
   margin: 5px;
 }
diff --git a/client/src/app/shared/video/video-feed.component.scss b/client/src/app/shared/video/video-feed.component.scss
index 9dab18ffd..385764be0 100644
--- a/client/src/app/shared/video/video-feed.component.scss
+++ b/client/src/app/shared/video/video-feed.component.scss
@@ -12,7 +12,8 @@
     &.icon-syndication {
       position: relative;
       top: -2px;
-      background-image: url('../../../assets/images/global/syndication.svg');
+      background-color: var(--mainForegroundColor);
+      mask-image: url('../../../assets/images/global/syndication.svg');
     }
   }
 }
\ No newline at end of file
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index cc643f9d9..895879adc 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -22,7 +22,7 @@
       transition: color 0.2s;
       font-size: 16px;
       font-weight: $font-semibold;
-      color: $fg-color;
+      color: var(--mainForegroundColor);
       margin-top: 5px;
       margin-bottom: 5px;