Add a dark theme

Fixes https://github.com/turt2live/matrix-dimension/issues/153

web/app/admin/admin.component.scss

@@ -1,28 +1,23 @@
-//$bgColor: #625F72;
+@import "../../style/themes/themes";
-//$hoverColor: #6E8ABC;
-//$accentColor: #8ABBFF;
-
-$bgColor: #233046;
-$hoverColor: #374752;
-$accentColor: #DE6657;
 
+@include themifyComponent() {
   .adminNav {
     width: 200px;
     margin: 0;
     padding: 0;
     position: fixed;
-  top: 120px;
+    top: 100px;
     left: 0;
     bottom: 0;
-  background-color: $bgColor;
+    background-color: themed(adminBgColor);
   }
 
   .adminNav li {
     list-style: none;
-  background-color: $bgColor;
+    background-color: themed(adminBgColor);
-  border-left: 5px solid $bgColor;
+    border-left: 5px solid themed(adminBgColor);
     padding: 5px 5px 5px 11px;
-  color: #fff;
+    color: themed(adminFgColor);
     opacity: 0.5;
     cursor: pointer;
   }
@@ -30,12 +25,12 @@ $accentColor: #DE6657;
   .adminNav li:hover,
   .adminNav li.active {
     opacity: 1;
-  background-color: $hoverColor;
+    background-color: themed(adminHoverColor);
-  border-left: 5px solid $hoverColor;
+    border-left: 5px solid themed(adminHoverColor);
   }
 
   .adminNav li.active {
-  border-left: 5px solid $accentColor;
+    border-left: 5px solid themed(adminAccentColor);
   }
 
   .adminContent {
@@ -54,7 +49,8 @@ $accentColor: #DE6657;
     left: 0;
     width: 200px;
     text-align: center;
-  color: #7d7d7d;
+    color: themed(adminVersionColor);
     font-size: 11px;
     font-family: monospace;
   }
+}

web/app/admin/neb/appservice-config/appservice-config.component.scss

@@ -1,6 +1,10 @@
+@import "../../../../style/themes/themes";
+
+@include themifyComponent() {
   pre {
     margin-top: 10px;
     padding: 5px;
-  border: 1px solid #ccc;
+    border: 1px solid themed(appserviceConfigPreBorderColor);
-  background-color: #eee;
+    background-color: themed(appserviceConfigPreBgColor);
+  }
 }

web/app/admin/sticker-packs/preview/preview.component.scss

@@ -1,7 +1,10 @@
+@import "../../../../style/themes/themes";
+
+@include themifyComponent() {
   .sticker {
     margin: 20px;
     padding: 5px;
-  background-color: #f6fbff;
+    background-color: themed(stickerPreviewBgColor);
 
     .caption {
       display: inline-block;
@@ -15,8 +18,9 @@
       }
 
       .description {
-      color: #7d7d7d;
+        color: themed(stickerPreviewFgColor);
         display: block;
       }
     }
   }
+}

web/app/configs/stickerpicker/stickerpicker.component.scss

@@ -1,8 +1,12 @@
+@import "../../../style/themes/themes";
+
+@include themifyComponent() {
   .pack {
     display: flex;
     margin: 20px;
     padding: 5px;
-  background-color: #f6fbff;
+    background-color: themed(stickerpackBgColor);
+    color: themed(stickerpackFgColor);
 
     .caption {
       flex: 1;
@@ -16,7 +20,7 @@
       }
 
       .description {
-      color: #7d7d7d;
+        color: themed(stickerpackDescriptionColor);
         display: block;
       }
 
@@ -28,10 +32,11 @@
 
       .author, .license {
         font-size: 0.8em;
-      color: #7d7d7d;
+        color: themed(stickerpackAuthorLicenseColor);
 
         a {
-        color: #7d7d7d;
+          color: themed(stickerpackAuthorLicenseColor);
+        }
       }
     }
   }

web/app/elements/spinner/spinner.component.scss

@@ -1,2 +1,4 @@
 // component styles are encapsulated and only applied to their components
 @import "../../../../node_modules/spinkit/scss/spinners/11-folding-cube";
+
+// see app.scss for the spinner color stuff

web/app/home/home.component.scss

@@ -1,23 +1,25 @@
 // component styles are encapsulated and only applied to their components
+@import "../../style/themes/themes";
 
+@include themifyComponent() {
   .spacer {
     width: 85%;
     display: block;
-  border-color: rgba(206, 222, 235, 0.85);
+    border-color: themed(promoSpacerColor);
     margin-top: 60px;
     margin-bottom: 60px;
   }
 
   .shadowed {
-  box-shadow: 0 20px 40px 20px rgba(206, 222, 235, 0.34);
+    box-shadow: 0 20px 40px 20px thtmed(promoShadowColor);
   }
 
   .info-box {
     display: inline-block;
     margin: auto;
-  background-color: #fff;
+    background-color: themed(promoInfoBgColor);
     padding: 50px;
-  border: 1px solid rgba(143, 45, 86, 0.2);
+    border: 1px solid themed(promoInfoBorderColor);
 
     h3 {
       margin-bottom: 20px;
@@ -25,19 +27,19 @@
   }
 
   pre {
-  border: 1px solid rgba(143, 45, 86, 0.7);
+    border: 1px solid themed(promoPreBorderColor);
     padding: 5px;
     width: 590px;
   }
 
   .footer {
-  color: white;
+    color: themed(promoFooterFgColor);
     text-align: center;
     padding: 50px;
-  background: linear-gradient(to right, #c95036, #8F2D56);
+    background: linear-gradient(to right, themed(promoGradientStartColor), themed(promoGradientEndColor));
 
     a {
-    color: white;
+      color: themed(promoFooterFgColor);
       font-size: 0.9em;
       margin-left: 20px;
     }
@@ -51,14 +53,14 @@ pre {
 
   .links a {
     font-size: 0.9em;
-  color: #dadada;
+    color: themed(promoLinksColor);
     margin-left: 20px;
   }
 
   .hero {
-  color: white;
+    color: themed(promoHeroFgColor);
     text-align: center;
-  background: linear-gradient(to right, #c95036, #8F2D56);
+    background: linear-gradient(to right, themed(promoGradientStartColor), themed(promoGradientEndColor));
   }
 
   .wrapper {
@@ -120,7 +122,7 @@ pre {
 
       .intro {
         font-size: 1.3em;
-      color: #868686;
+        color: themed(promoIntroColor);
         text-align: center;
       }
 
@@ -131,10 +133,10 @@ pre {
 
         .integration {
           width: 350px;
-        background-color: #ffffff;
+          background-color: themed(promoIntegrationBgColor);
           padding: 20px;
           margin: 15px;
-        border: 1px solid rgba(143, 45, 86, 0.2);
+          border: 1px solid themed(promoIntegrationBorderColor);
 
           img {
             margin-right: 25px;
@@ -174,3 +176,4 @@ pre {
       margin-top: 100px;
     }
   }
+}

web/app/integration-bag/integration-bag.component.scss

@@ -1,4 +1,7 @@
 // component styles are encapsulated and only applied to their components
+@import "../../style/themes/themes";
+
+@include themifyComponent() {
   .integration-bag {
     display: flex;
     flex-direction: row;
@@ -8,8 +11,7 @@
   }
 
   .integration {
-  border: 1px solid #eee;
+    border: 1px solid themed(integrationBorderColor);
-  border-radius: 5px;
     margin: 7px;
     padding: 6px;
     width: calc(325px - 14px);
@@ -26,7 +28,7 @@
   }
 
   .integration:hover {
-  box-shadow: 0 0 9px #888;
+    box-shadow: 0 0 5px 5px themed(integrationShadowColor);
   }
 
   .integration:hover .integration-arrow {
@@ -51,5 +53,6 @@
     font-size: 0.8em;
     margin-left: 60px;
     margin-right: 5px;
-  color: #999;
+    color: themed(integrationDescriptionColor);
+  }
 }

web/app/page-header/page-header.component.html

@@ -1,3 +1,4 @@
+<div class="wrapper">
     <div class="header">
         <div class="title">
             <h2 class="pageName">{{ pageName }}</h2>
@@ -7,3 +8,4 @@
             <ng-content></ng-content>
         </div>
     </div>
+</div>

web/app/page-header/page-header.component.scss

@@ -1,10 +1,18 @@
 // component styles are encapsulated and only applied to their components
+@import "../../style/themes/themes";
+
+@include themifyComponent() {
+  .wrapper {
+    width: 100%;
+    padding-top: 10px;
+    background: linear-gradient(to right, themed(headerGradientStartColor), themed(headerGradientEndColor));
+  }
+
   .header {
     width: 100%;
-  margin-top: 30px;
+    border-top: 1px solid themed(headerBorderColor);
-  border-top: 1px solid #e7eaec;
+    border-bottom: 1px solid themed(headerBorderColor);
-  border-bottom: 1px solid #e7eaec;
+    background-color: themed(headerBgColor);
-  background-color: #fff;
   }
 
   .header .title {
@@ -29,3 +37,4 @@
     width: 15.666667%; // col-sm-2
     position: relative;
   }
+}

web/app/riot/riot-home/home.component.scss

@@ -1,8 +1,12 @@
 // component styles are encapsulated and only applied to their components
+@import "../../../style/themes/themes";
+
+@include themifyComponent() {
   .stickerpacks {
     position: relative;
     top: -15px;
     padding-left: 10px;
     font-size: 0.8em;
-  color: #525252;
+    color: themed(stickerpacksNotifFgColor);
+  }
 }

web/app/widget-wrappers/generic/generic.component.scss

@@ -1,4 +1,7 @@
 // component styles are encapsulated and only applied to their components
+@import "../../../style/themes/themes";
+
+@include themifyComponent() {
   .control-page {
     position: fixed;
     top: 0;
@@ -7,8 +10,8 @@
     right: 0;
     margin: 0;
     padding: 0;
-  background-color: #eee;
+    background-color: themed(genericControlBgColor);
-  color: #222;
+    color: themed(genericControlFgColor);
   }
 
   .loading-badge {
@@ -27,7 +30,7 @@
 
   .embed-failed .ban {
     font-size: 145px;
-  color: #bd362f;
+    color: themed(widgetBannedSymbolColor);
   }
 
   iframe {
@@ -45,3 +48,4 @@ iframe {
     bottom: 10px;
     right: 10px;
   }
+}

web/app/widget-wrappers/jitsi/jitsi.component.scss

@@ -1,4 +1,7 @@
 // component styles are encapsulated and only applied to their components
+@import "../../../style/themes/themes";
+
+@include themifyComponent() {
   #jitsiContainer {
     position: fixed;
     top: 0;
@@ -13,7 +16,7 @@
     position: absolute;
     height: 100%;
     width: 100%;
-  background-color: #fff;
+    background-color: themed(jitsiWelcomeBgColor);
   }
 
   .join-conference-boat {
@@ -27,3 +30,4 @@
     width: 90%;
     text-align: center;
   }
+}

web/app/widget-wrappers/sticker-picker/sticker-picker.component.scss

@@ -1,4 +1,7 @@
 // component styles are encapsulated and only applied to their components
+@import "../../../style/themes/themes";
+
+@include themifyComponent() {
   .control-page {
     position: fixed;
     top: 0;
@@ -7,8 +10,8 @@
     right: 0;
     margin: 0;
     padding: 0;
-  background-color: #eee;
+    background-color: themed(stickerPickerControlBgColor);
-  color: #222;
+    color: themed(stickerPickerControlFgColor);
   }
 
   .loading-badge {
@@ -23,7 +26,7 @@
     position: relative;
     height: 300px;
     top: calc(50% - 150px);
-  color: #bd362f;
+    color: themed(stickerPickerErrorColor);
   }
 
   .sticker-picker {
@@ -36,29 +39,29 @@
 
         .title {
           font-weight: 700;
-        color: #222222;
+          color: themed(stickerPickerTitleColor);
         }
 
         .license {
           font-size: 0.6em;
           font-weight: 300;
-        color: #b5b5b5;
+          color: themed(stickerPickerLicenseColor);
           margin-top: 3px;
           float: right;
 
           a {
-          color: #b5b5b5;
+            color: themed(stickerPickerLicenseColor);
           }
         }
 
         .author {
           font-size: 0.6em;
           font-weight: 300;
-        color: #222222;
+          color: themed(stickerPickerAuthorColor);
           display: block;
 
           a {
-          color: #222222;
+            color: themed(stickerPickerAuthorColor);
           }
         }
       }
@@ -72,8 +75,9 @@
           margin: 2px;
           cursor: pointer;
           border-radius: 3px;
-        background-color: #fff;
+          background-color: themed(stickerPickerStickerBgColor);
-        box-shadow: 0 2px 6px hsla(0, 0%, 0%, 0.2);
+          box-shadow: 0 2px 6px themed(stickerPickerShadowColor);
+        }
       }
     }
   }

web/public/index.html

@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <meta name="description" content="An alternative integrations manager for Riot. Check out #dimension:t2l.io for more information.">
+    <meta name="description" content="An open source integrations manager for Matrix. Check out #dimension:t2bot.io for more information.">
 
     <title>Dimension</title>
 
@@ -16,11 +16,94 @@
     <meta name="msapplication-config" content="img/logo/favicon/browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
 
+    <style type="text/css">
+        body, html {
+            height: 100%;
+            background-color: transparent;
+        }
+
+        body.theme-dark {
+            background-color: #4a4a4a;
+        }
+
+        body.theme-light {
+            background-color: #e7e7e7;
+        }
+
+        .app-loading {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+        }
+
+        .app-loading .spinner {
+            height: 100px;
+            width: 100px;
+            animation: rotate 2s linear infinite;
+            transform-origin: center center;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin: auto;
+        }
+
+        .app-loading .spinner .path {
+            stroke-dasharray: 1, 200;
+            stroke-dashoffset: 0;
+            animation: dash 1.5s ease-in-out infinite;
+            stroke-linecap: round;
+            stroke: #a0a0a0;
+        }
+
+        @keyframes rotate {
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+        @keyframes dash {
+            0% {
+                stroke-dasharray: 1, 200;
+                stroke-dashoffset: 0;
+            }
+            50% {
+                stroke-dasharray: 89, 200;
+                stroke-dashoffset: -35px;
+            }
+            100% {
+                stroke-dasharray: 89, 200;
+                stroke-dashoffset: -124px;
+            }
+        }
+    </style>
+
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
 
     <base href="/">
 </head>
-<body>
+<body class="app-body">
-<my-app>Loading...</my-app>
+<script type="text/javascript">
+    const urlParams = new URLSearchParams(window.location.search);
+    const theme = urlParams.get("theme") || "light";
+    const allowedThemes = ["dark", "light"];
+    if (theme && allowedThemes.indexOf(theme) !== -1) {
+        const body = document.getElementsByTagName("body");
+        for (const element of body) {
+            element.className += " theme-" + theme;
+        }
+    }
+</script>
+<my-app class="main-app">
+    <div class="app-loading">
+        <svg class="spinner" viewBox="25 25 50 50">
+            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
+        </svg>
+    </div>
+</my-app>
 </body>
 </html>

web/style/_riot.scss

@@ -2,28 +2,40 @@
 // In it's current position (as a component), the component-level stylesheet cannot access the
 // elements, so we specify it in a more generic location.
 
+@import "themes/themes";
+
+.main-app {
+  @include themify() {
     .dimension-breadcrumb {
       .fluid-bread {
         padding: 0;
+        background: transparent;
       }
 
       .fluid-bread .container {
         padding: 0;
         margin: 0;
+        background: transparent;
       }
 
       .fluid-bread .container .breadcrumb {
         padding: 0;
         margin: 0;
+        background: transparent;
       }
 
       .fluid-bread .breadcrumb-item a:hover {
         text-decoration: none;
       }
 
+      .fluid-bread .breadcrumb-item.active {
+        color: themed(activeBreadcrumbColor);
+      }
+
       font-size: 13px;
       display: block;
       padding-top: 4px;
+      background: transparent;
     }
 
     .header .quickAction .closeButton .scalarClose {
@@ -41,9 +53,11 @@
     .header .quickAction .headerButton {
       font-size: 35px;
       cursor: pointer;
-  color: #ccc;
+      color: themed(quickActionColor);
     }
 
     .header .quickAction .headerButton:hover {
-  color: #888;
+      color: themed(quickActionHoverColor);
+    }
+  }
 }

web/style/app.scss

@@ -1,19 +1,28 @@
 // styles in src/style directory are applied to the whole page
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:100|Roboto:300');
 @import '../../node_modules/angular2-toaster/toaster';
+@import "themes/themes";
 @import "components/ibox";
 @import "components/dialog";
+@import "components/bootstrap_override";
 @import "riot";
 
 body {
-  background: #b0bbbf1f;
-  //background: #6268680d;
   margin: 0;
   padding: 0;
-  color: #333;
   font-family: 'Roboto', 'Open Sans', Arial, sans-serif;
 }
 
+@include themifyRoot(){
+  color: themed(defaultFgColor);
+
+  // HACK: We specify the spinner color here because we can't use the mixin
+  // in the spinner's css due to angular scoping
+  .sk-cube:before {
+    background-color: themed(spinnerColor) !important;
+  }
+}
+
 // HACK: Work around dialog not showing up
 // ref: https://github.com/shlomiassaf/angular2-modal/issues/280
 .fade.in {

web/style/components/bootstrap_override.scss

@@ -0,0 +1,30 @@
+@import "../themes/themes";
+
+.main-app {
+  @include themify(){
+    a {
+      color: themed(anchorColor);
+    }
+
+    table, td, th {
+      border-color: themed(tableBorderColor);
+    }
+
+    code {
+      background-color: themed(codeBgColor);
+    }
+
+    .text-muted {
+      color: themed(altMutedColor) !important;
+    }
+
+    .form-control {
+      color: themed(formControlFgColor);
+      background-color: themed(formControlBgColor);
+    }
+
+    .form-control::placeholder {
+      color: themed(formControlPlaceholderColor);
+    }
+  }
+}

web/style/components/dialog.scss

@@ -1,7 +1,13 @@
+@import "../themes/themes";
+
+@include themifyRoot() {
   .dialog {
+    background-color: themed(dialogBgColor);
+    color: themed(dialogFgColor);
+
     .dialog-header {
-    border-bottom: 1px solid #ddd;
       padding: 20px;
+      border-bottom: 1px solid themed(dialogBorderColor);
 
       h4 {
         margin: 0;
@@ -10,12 +16,12 @@
 
     .dialog-content {
       padding: 20px;
-
     }
 
     .dialog-footer {
       padding: 20px;
-    border-top: 1px solid #bbb;
+      border-top: 1px solid themed(dialogFooterBorderColor);
-    background-color: #ddd;
+      background-color: themed(dialogFooterBackgroundColor);
+    }
   }
 }

web/style/components/ibox.scss

@@ -1,14 +1,18 @@
+@import "../themes/themes";
+
+.main-app {
+  @include themify() {
     .ibox {
-  background-color: #fff;
+      background-color: themed('containerBgColor');
       padding: 0;
       margin-bottom: 30px;
-  box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.2);
+      box-shadow: 0 2px 4px themed('containerShadowColor');
     }
 
     .ibox .ibox-title {
       padding: 5px;
-  border-bottom: 1px solid #e7eaec;
+      border-bottom: 1px solid themed('containerBorderColor');
-  border-top: 2px solid #e7eaec;
+      border-top: 2px solid themed('containerBorderColor');
     }
 
     .ibox .ibox-title h5 {
@@ -32,3 +36,5 @@
     .ibox .ibox-title.ibox-title-collapsible {
       cursor: pointer;
     }
+  }
+}

web/style/themes/_themes.scss

@@ -0,0 +1,62 @@
+@import "light";
+@import "dark";
+
+$themes: (
+        dark: $theme_dark,
+        light: $theme_light,
+);
+
+@mixin themify($themes: $themes) {
+  @each $theme, $map in $themes {
+
+    .theme-#{$theme} & {
+      $theme-map: () !global;
+      @each $key, $submap in $map {
+        $value: map-get(map-get($themes, $theme), '#{$key}');
+        $theme-map: map-merge($theme-map, ($key: $value)) !global;
+      }
+
+      @content;
+      $theme-map: null !global;
+    }
+
+  }
+}
+
+@mixin themifyRoot($themes: $themes) {
+  @each $theme, $map in $themes {
+
+    .theme-#{$theme} {
+      $theme-map: () !global;
+      @each $key, $submap in $map {
+        $value: map-get(map-get($themes, $theme), '#{$key}');
+        $theme-map: map-merge($theme-map, ($key: $value)) !global;
+      }
+
+      @content;
+      $theme-map: null !global;
+    }
+
+  }
+}
+
+@mixin themifyComponent($themes: $themes) {
+  @each $theme, $map in $themes {
+
+    :host-context(.theme-#{$theme}) {
+      $theme-map: () !global;
+      @each $key, $submap in $map {
+        $value: map-get(map-get($themes, $theme), '#{$key}');
+        $theme-map: map-merge($theme-map, ($key: $value)) !global;
+      }
+
+      @content;
+      $theme-map: null !global;
+    }
+
+  }
+}
+
+@function themed($key) {
+  @return map-get($theme-map, $key);
+}

web/style/themes/dark.scss

@@ -0,0 +1,85 @@
+$theme_dark: (
+        bodyBgColor: rgba(47, 50, 51, 0.85),
+        defaultFgColor: #eaeaea,
+        headerColor: #f9f9f9,
+        mutedColor: #d6d6d6,
+        altMutedColor: #c4cdd4,
+        anchorColor: #82c5ff,
+        tableBorderColor: #1e1e1e,
+        codeBgColor: #323233,
+        spinnerColor: #d4d4d4,
+        formControlBgColor: #494b4e,
+        formControlFgColor: #fff,
+        formControlPlaceholderColor: #969696,
+        activeBreadcrumbColor: #afbfca,
+
+        stickerpacksNotifBgColor: #525252,
+        stickerpackBgColor: #676a6d,
+        stickerpackFgColor: #eee,
+        stickerpackDescriptionColor: #dedddd,
+        stickerpackAuthorLicenseColor: #dedddd,
+        stickerPreviewBgColor: #676a6d,
+        stickerPreviewFgColor: #dedddd,
+
+        headerBgColor: rgb(47, 47, 47),
+        headerBorderColor: #585858,
+        headerGradientStartColor: rgba(201, 80, 54, 0.7),
+        headerGradientEndColor: rgba(143, 45, 86, 0.7),
+
+        containerBgColor: rgba(47, 47, 47, 0.66),
+        containerShadowColor: hsla(0, 0%, 0%, 0.2),
+        containerBorderColor: rgb(79, 79, 79),
+
+        quickActionColor: #7b7b7b,
+        quickActionHoverColor: #fff,
+
+        dialogBgColor: #464646,
+        dialogFgColor: #ececec,
+        dialogBorderColor: #212121,
+        dialogFooterBorderColor: #212121,
+        dialogFooterBackgroundColor: #2d2d2d,
+
+        stickerPickerControlBgColor: #eee,
+        stickerPickerControlFgColor: #222,
+        stickerPickerErrorColor: #bd362f,
+        stickerPickerTitleColor: #222,
+        stickerPickerLicenseColor: #b5b5b5,
+        stickerPickerAuthorColor: #222,
+        stickerPickerStickerBgColor: #fff,
+        stickerPickerShadowColor: hsla(0, 0%, 0%, 0.2),
+
+        jitsiWelcomeBgColor: #fff,
+
+        genericControlBgColor: #eee,
+        genericControlFgColor: #222,
+        widgetBannedSymbolColor: #bd362f,
+
+        integrationBorderColor: rgba(148, 148, 148, 0.19),
+        integrationShadowColor: rgba(89, 98, 105, 0.28),
+        integrationDescriptionColor: #bcc0c1,
+
+        promoSpacerColor: rgba(206, 222, 235, 0.85),
+        promoShadowColor:  rgba(206, 222, 235, 0.34),
+        promoInfoBgColor: #fff,
+        promoInfoBorderColor: rgba(143, 45, 86, 0.2),
+        promoPreBorderColor: rgba(143, 45, 86, 0.7),
+        promoFooterFgColor: #fff,
+        promoGradientStartColor: #c95036,
+        promoGradientEndColor: #8F2D56,
+        promoIntroColor: #868686,
+        promoIntegrationBgColor: #fff,
+        promoIntegrationBorderColor: rgba(143, 45, 86, 0.2),
+        promoLinksColor: #dadada,
+        promoHeroFgColor: #fff,
+
+        adminBgColor: #233046,
+        adminFgColor: #fff,
+        adminHoverColor: #374752,
+        adminAccentColor: #DE6657,
+        adminVersionColor: #7d7d7d,
+
+        appserviceConfigPreFgColor: #eff8ff,
+        appserviceConfigPreBorderColor: #717171,
+        appserviceConfigPreBgColor: #333,
+);
+

web/style/themes/light.scss

@@ -0,0 +1,84 @@
+$theme_light: (
+        bodyBgColor: rgba(176, 187, 191, 0.12),
+        defaultFgColor: #333,
+        headerColor: #333,
+        mutedColor: #999,
+        altMutedColor: #636c72,
+        anchorColor: #0275d8,
+        tableBorderColor: #eceeef,
+        codeBgColor: #f7f7f9,
+        spinnerColor: #333,
+        formControlBgColor: #fff,
+        formControlFgColor: #464a4c,
+        formControlPlaceholderColor: #7d8487,
+        activeBreadcrumbColor: #636c72,
+
+        stickerpacksNotifFgColor: #525252,
+        stickerpackBgColor: #f6fbff,
+        stickerpackFgColor: #222,
+        stickerpackDescriptionColor: #7d7d7d,
+        stickerpackAuthorLicenseColor: #7d7d7d,
+        stickerPreviewBgColor: #f6fbff,
+        stickerPreviewFgColor: #7d7d7d,
+
+        headerBgColor: #fff,
+        headerBorderColor: #e7eaec,
+        headerGradientStartColor: rgba(201, 80, 54, 0.7),
+        headerGradientEndColor: rgba(143, 45, 86, 0.7),
+
+        containerBgColor: #fff,
+        containerShadowColor: hsla(0, 0%, 0%, 0.2),
+        containerBorderColor: #e7eaec,
+
+        quickActionColor: #313131,
+        quickActionHoverColor: #0b0b0b,
+
+        dialogBgColor: #fff,
+        dialogFgColor: #222,
+        dialogBorderColor: #ddd,
+        dialogFooterBorderColor: #bbb,
+        dialogFooterBackgroundColor: #ddd,
+
+        stickerPickerControlBgColor: #eee,
+        stickerPickerControlFgColor: #222,
+        stickerPickerErrorColor: #bd362f,
+        stickerPickerTitleColor: #222,
+        stickerPickerLicenseColor: #b5b5b5,
+        stickerPickerAuthorColor: #222,
+        stickerPickerStickerBgColor: #fff,
+        stickerPickerShadowColor: hsla(0, 0%, 0%, 0.2),
+
+        jitsiWelcomeBgColor: #fff,
+
+        genericControlBgColor: #eee,
+        genericControlFgColor: #222,
+        widgetBannedSymbolColor: #bd362f,
+
+        integrationBorderColor: rgba(143, 45, 86, 0.2),
+        integrationShadowColor: rgba(206, 222, 235, 0.34),
+        integrationDescriptionColor: #999,
+
+        promoSpacerColor: rgba(206, 222, 235, 0.85),
+        promoShadowColor:  rgba(206, 222, 235, 0.34),
+        promoInfoBgColor: #fff,
+        promoInfoBorderColor: rgba(143, 45, 86, 0.2),
+        promoPreBorderColor: rgba(143, 45, 86, 0.7),
+        promoFooterFgColor: #fff,
+        promoGradientStartColor: #c95036,
+        promoGradientEndColor: #8F2D56,
+        promoIntroColor: #868686,
+        promoIntegrationBgColor: #fff,
+        promoIntegrationBorderColor: rgba(143, 45, 86, 0.2),
+        promoLinksColor: #dadada,
+        promoHeroFgColor: #fff,
+
+        adminBgColor: #233046,
+        adminFgColor: #fff,
+        adminHoverColor: #374752,
+        adminAccentColor: #DE6657,
+        adminVersionColor: #7d7d7d,
+
+        appserviceConfigPreFgColor: rgb(41, 43, 44),
+        appserviceConfigPreBorderColor: #ccc,
+        appserviceConfigPreBgColor: #eee,
+);