Add a dark theme

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

web/app/admin/admin.component.scss

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

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

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

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

@@ -1,22 +1,26 @@
-.sticker {
+@import "../../../../style/themes/themes";
-  margin: 20px;
-  padding: 5px;
-  background-color: #f6fbff;
 
-  .caption {
+@include themifyComponent() {
-    display: inline-block;
+  .sticker {
-    vertical-align: middle;
+    margin: 20px;
-    margin-left: 20px;
+    padding: 5px;
+    background-color: themed(stickerPreviewBgColor);
 
-    .name {
+    .caption {
-      font-size: 1.1em;
+      display: inline-block;
-      font-weight: bold;
+      vertical-align: middle;
-      display: block;
+      margin-left: 20px;
-    }
 
-    .description {
+      .name {
-      color: #7d7d7d;
+        font-size: 1.1em;
-      display: block;
+        font-weight: bold;
+        display: block;
+      }
+
+      .description {
+        color: themed(stickerPreviewFgColor);
+        display: block;
+      }
     }
   }
 }

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

@@ -1,37 +1,42 @@
-.pack {
+@import "../../../style/themes/themes";
-  display: flex;
-  margin: 20px;
-  padding: 5px;
-  background-color: #f6fbff;
 
-  .caption {
+@include themifyComponent() {
-    flex: 1;
+  .pack {
-    margin-left: 20px;
+    display: flex;
-    padding-top: 20px;
+    margin: 20px;
+    padding: 5px;
+    background-color: themed(stickerpackBgColor);
+    color: themed(stickerpackFgColor);
 
-    .name {
+    .caption {
-      font-size: 1.1em;
+      flex: 1;
-      font-weight: bold;
+      margin-left: 20px;
-      display: block;
+      padding-top: 20px;
-    }
 
-    .description {
+      .name {
-      color: #7d7d7d;
+        font-size: 1.1em;
-      display: block;
+        font-weight: bold;
-    }
+        display: block;
+      }
 
-    .toggle-switch {
+      .description {
-      margin-top: 20px;
+        color: themed(stickerpackDescriptionColor);
-      margin-right: 10px;
+        display: block;
-      float: right;
+      }
-    }
 
-    .author, .license {
+      .toggle-switch {
-      font-size: 0.8em;
+        margin-top: 20px;
-      color: #7d7d7d;
+        margin-right: 10px;
+        float: right;
+      }
 
-      a {
+      .author, .license {
-        color: #7d7d7d;
+        font-size: 0.8em;
+        color: themed(stickerpackAuthorLicenseColor);
+
+        a {
+          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";
+@import "../../../../node_modules/spinkit/scss/spinners/11-folding-cube";
+
+// see app.scss for the spinner color stuff

web/app/home/home.component.scss

@@ -1,176 +1,179 @@
 // component styles are encapsulated and only applied to their components
+@import "../../style/themes/themes";
 
-.spacer {
+@include themifyComponent() {
-  width: 85%;
+  .spacer {
-  display: block;
+    width: 85%;
-  border-color: rgba(206, 222, 235, 0.85);
+    display: block;
-  margin-top: 60px;
+    border-color: themed(promoSpacerColor);
-  margin-bottom: 60px;
+    margin-top: 60px;
-}
+    margin-bottom: 60px;
-
-.shadowed {
-  box-shadow: 0 20px 40px 20px rgba(206, 222, 235, 0.34);
-}
-
-.info-box {
-  display: inline-block;
-  margin: auto;
-  background-color: #fff;
-  padding: 50px;
-  border: 1px solid rgba(143, 45, 86, 0.2);
-
-  h3 {
-    margin-bottom: 20px;
   }
-}
 
-pre {
+  .shadowed {
-  border: 1px solid rgba(143, 45, 86, 0.7);
+    box-shadow: 0 20px 40px 20px thtmed(promoShadowColor);
-  padding: 5px;
+  }
-  width: 590px;
-}
 
-.footer {
+  .info-box {
-  color: white;
+    display: inline-block;
-  text-align: center;
+    margin: auto;
-  padding: 50px;
+    background-color: themed(promoInfoBgColor);
-  background: linear-gradient(to right, #c95036, #8F2D56);
+    padding: 50px;
+    border: 1px solid themed(promoInfoBorderColor);
 
-  a {
+    h3 {
-    color: white;
+      margin-bottom: 20px;
+    }
+  }
+
+  pre {
+    border: 1px solid themed(promoPreBorderColor);
+    padding: 5px;
+    width: 590px;
+  }
+
+  .footer {
+    color: themed(promoFooterFgColor);
+    text-align: center;
+    padding: 50px;
+    background: linear-gradient(to right, themed(promoGradientStartColor), themed(promoGradientEndColor));
+
+    a {
+      color: themed(promoFooterFgColor);
+      font-size: 0.9em;
+      margin-left: 20px;
+    }
+  }
+
+  .links {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+  }
+
+  .links a {
     font-size: 0.9em;
+    color: themed(promoLinksColor);
     margin-left: 20px;
   }
-}
 
-.links {
-  position: absolute;
-  right: 20px;
-  top: 20px;
-}
-
-.links a {
-  font-size: 0.9em;
-  color: #dadada;
-  margin-left: 20px;
-}
-
-.hero {
-  color: white;
-  text-align: center;
-  background: linear-gradient(to right, #c95036, #8F2D56);
-}
-
-.wrapper {
-  min-width: 700px;
-  max-width: 1500px;
-  padding: 20px;
-  margin: 70px auto auto;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.made-for-matrix {
-  height: 45px;
-}
-
-.made-for-matrix-anchor {
-  margin-left: 20px;
-}
-
-.promo {
   .hero {
-    padding-top: 50px;
+    color: themed(promoHeroFgColor);
-    padding-bottom: 100px;
+    text-align: center;
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3vw));
+    background: linear-gradient(to right, themed(promoGradientStartColor), themed(promoGradientEndColor));
   }
 
-  .logo {
+  .wrapper {
-    padding: 20px 20px 40px;
+    min-width: 700px;
+    max-width: 1500px;
+    padding: 20px;
+    margin: 70px auto auto;
+    display: flex;
+    flex-wrap: wrap;
   }
 
-  .banner {
+  .made-for-matrix {
-    font-size: 1.2em;
+    height: 45px;
-    margin-top: 30px;
-    margin-bottom: 20px;
   }
 
-  .try-dimension {
+  .made-for-matrix-anchor {
-    width: 695px;
+    margin-left: 20px;
   }
 
-  .screenshot {
+  .promo {
-    display: inline-block;
+    .hero {
-    margin: 0 70px;
+      padding-top: 50px;
-
+      padding-bottom: 100px;
-    img {
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3vw));
-      width: 595px;
     }
-  }
 
-  .integrations {
+    .logo {
-    display: block;
+      padding: 20px 20px 40px;
-    width: 100%;
+    }
 
-    .title {
+    .banner {
+      font-size: 1.2em;
+      margin-top: 30px;
+      margin-bottom: 20px;
+    }
+
+    .try-dimension {
+      width: 695px;
+    }
+
+    .screenshot {
+      display: inline-block;
+      margin: 0 70px;
+
+      img {
+        width: 595px;
+      }
+    }
+
+    .integrations {
       display: block;
-      text-align: center;
+      width: 100%;
-      margin-bottom: 40px;
-    }
 
-    .intro {
+      .title {
-      font-size: 1.3em;
+        display: block;
-      color: #868686;
+        text-align: center;
-      text-align: center;
+        margin-bottom: 40px;
-    }
+      }
 
-    .integration-list {
+      .intro {
-      display: flex;
+        font-size: 1.3em;
-      flex-wrap: wrap;
+        color: themed(promoIntroColor);
-      justify-content: center;
+        text-align: center;
+      }
 
-      .integration {
+      .integration-list {
-        width: 350px;
+        display: flex;
-        background-color: #ffffff;
+        flex-wrap: wrap;
-        padding: 20px;
+        justify-content: center;
-        margin: 15px;
-        border: 1px solid rgba(143, 45, 86, 0.2);
 
-        img {
+        .integration {
-          margin-right: 25px;
+          width: 350px;
-          width: 48px;
+          background-color: themed(promoIntegrationBgColor);
-          vertical-align: middle;
+          padding: 20px;
-        }
+          margin: 15px;
+          border: 1px solid themed(promoIntegrationBorderColor);
 
-        span {
+          img {
-          font-size: 1.2em;
+            margin-right: 25px;
+            width: 48px;
+            vertical-align: middle;
+          }
+
+          span {
+            font-size: 1.2em;
+          }
         }
       }
     }
   }
-}
 
-.non-promo {
+  .non-promo {
-  .hero {
+    .hero {
-    padding-top: 20px;
+      padding-top: 20px;
-  }
+    }
 
-  .logo {
+    .logo {
-    padding: 20px 20px 40px;
+      padding: 20px 20px 40px;
-    height: 150px;
+      height: 150px;
-  }
+    }
 
-  .welcome {
+    .welcome {
-    min-width: 700px;
+      min-width: 700px;
-    max-width: 800px;
+      max-width: 800px;
-  }
+    }
 
-  h4 {
+    h4 {
-    margin-top: 45px;
+      margin-top: 45px;
-    margin-bottom: 20px;
+      margin-bottom: 20px;
-  }
+    }
 
-  .footer {
+    .footer {
-    margin-top: 100px;
+      margin-top: 100px;
+    }
   }
 }

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

@@ -1,55 +1,58 @@
 // component styles are encapsulated and only applied to their components
-.integration-bag {
+@import "../../style/themes/themes";
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-}
 
-.integration {
+@include themifyComponent() {
-  border: 1px solid #eee;
+  .integration-bag {
-  border-radius: 5px;
+    display: flex;
-  margin: 7px;
+    flex-direction: row;
-  padding: 6px;
+    align-items: stretch;
-  width: calc(325px - 14px);
+    flex-wrap: wrap;
-  position: relative;
+    justify-content: flex-start;
-  cursor: pointer;
+  }
-}
 
-.integration .integration-arrow {
+  .integration {
-  display: none;
+    border: 1px solid themed(integrationBorderColor);
-  position: absolute;
+    margin: 7px;
-  top: calc(50% - 12px); // icon happens to be 24px tall
+    padding: 6px;
-  right: 1px;
+    width: calc(325px - 14px);
-  color: #bbb;
+    position: relative;
-}
+    cursor: pointer;
+  }
 
-.integration:hover {
+  .integration .integration-arrow {
-  box-shadow: 0 0 9px #888;
+    display: none;
-}
+    position: absolute;
+    top: calc(50% - 12px); // icon happens to be 24px tall
+    right: 1px;
+    color: #bbb;
+  }
 
-.integration:hover .integration-arrow {
+  .integration:hover {
-  display: block;
+    box-shadow: 0 0 5px 5px themed(integrationShadowColor);
-}
+  }
 
-.integration .integration-avatar {
+  .integration:hover .integration-arrow {
-  width: 50px;
+    display: block;
-  height: 50px;
+  }
-  float: left;
-}
 
-.integration .integration-name {
+  .integration .integration-avatar {
-  display: inline-block;
+    width: 50px;
-  font-size: 1.1em;
+    height: 50px;
-  font-weight: 100;
+    float: left;
-  padding-left: 10px;
+  }
-}
 
-.integration .integration-description {
+  .integration .integration-name {
-  display: block;
+    display: inline-block;
-  font-size: 0.8em;
+    font-size: 1.1em;
-  margin-left: 60px;
+    font-weight: 100;
-  margin-right: 5px;
+    padding-left: 10px;
-  color: #999;
+  }
+
+  .integration .integration-description {
+    display: block;
+    font-size: 0.8em;
+    margin-left: 60px;
+    margin-right: 5px;
+    color: themed(integrationDescriptionColor);
+  }
 }

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

@@ -1,9 +1,11 @@
-<div class="header">
+<div class="wrapper">
-    <div class="title">
+    <div class="header">
-        <h2 class="pageName">{{ pageName }}</h2>
+        <div class="title">
-        <breadcrumb [allowBootstrap]="true" class="dimension-breadcrumb"></breadcrumb>
+            <h2 class="pageName">{{ pageName }}</h2>
-    </div>
+            <breadcrumb [allowBootstrap]="true" class="dimension-breadcrumb"></breadcrumb>
-    <div class="quickAction">
+        </div>
-        <ng-content></ng-content>
+        <div class="quickAction">
+            <ng-content></ng-content>
+        </div>
     </div>
 </div>

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

@@ -1,31 +1,40 @@
 // component styles are encapsulated and only applied to their components
-.header {
+@import "../../style/themes/themes";
-  width: 100%;
-  margin-top: 30px;
-  border-top: 1px solid #e7eaec;
-  border-bottom: 1px solid #e7eaec;
-  background-color: #fff;
-}
 
-.header .title {
+@include themifyComponent() {
-  margin: 0;
+  .wrapper {
-  width: 83.333333%; // col-sm-10
+    width: 100%;
-  padding: 15px;
+    padding-top: 10px;
-  display: inline-block;
+    background: linear-gradient(to right, themed(headerGradientStartColor), themed(headerGradientEndColor));
-}
+  }
 
-.header .title .pageName {
+  .header {
-  font-weight: 100;
+    width: 100%;
-  padding: 0;
+    border-top: 1px solid themed(headerBorderColor);
-  margin: 0;
+    border-bottom: 1px solid themed(headerBorderColor);
-}
+    background-color: themed(headerBgColor);
+  }
 
-.header .quickAction {
+  .header .title {
-  padding: 0;
+    margin: 0;
-  margin: 0;
+    width: 83.333333%; // col-sm-10
-  float: right;
+    padding: 15px;
-  text-align: right;
+    display: inline-block;
-  display: inline-block;
+  }
-  width: 15.666667%; // col-sm-2
+
-  position: relative;
+  .header .title .pageName {
+    font-weight: 100;
+    padding: 0;
+    margin: 0;
+  }
+
+  .header .quickAction {
+    padding: 0;
+    margin: 0;
+    float: right;
+    text-align: right;
+    display: inline-block;
+    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
-.stickerpacks {
+@import "../../../style/themes/themes";
-  position: relative;
+
-  top: -15px;
+@include themifyComponent() {
-  padding-left: 10px;
+  .stickerpacks {
-  font-size: 0.8em;
+    position: relative;
-  color: #525252;
+    top: -15px;
+    padding-left: 10px;
+    font-size: 0.8em;
+    color: themed(stickerpacksNotifFgColor);
+  }
 }

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

@@ -1,47 +1,51 @@
 // component styles are encapsulated and only applied to their components
-.control-page {
+@import "../../../style/themes/themes";
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: 0;
-  padding: 0;
-  background-color: #eee;
-  color: #222;
-}
 
-.loading-badge {
+@include themifyComponent() {
-  text-align: center;
+  .control-page {
-  font-size: 20px;
+    position: fixed;
-  position: relative;
+    top: 0;
-  top: calc(50% - 10px);
+    bottom: 0;
-}
+    left: 0;
+    right: 0;
+    margin: 0;
+    padding: 0;
+    background-color: themed(genericControlBgColor);
+    color: themed(genericControlFgColor);
+  }
 
-.embed-failed {
+  .loading-badge {
-  text-align: center;
+    text-align: center;
-  position: relative;
+    font-size: 20px;
-  height: 300px;
+    position: relative;
-  top: calc(50% - 150px);
+    top: calc(50% - 10px);
-}
+  }
 
-.embed-failed .ban {
+  .embed-failed {
-  font-size: 145px;
+    text-align: center;
-  color: #bd362f;
+    position: relative;
-}
+    height: 300px;
+    top: calc(50% - 150px);
+  }
 
-iframe {
+  .embed-failed .ban {
-  position: absolute;
+    font-size: 145px;
-  top: 0;
+    color: themed(widgetBannedSymbolColor);
-  bottom: 0;
+  }
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-}
 
-.toggleFullscreen {
+  iframe {
-  position: fixed;
+    position: absolute;
-  bottom: 10px;
+    top: 0;
-  right: 10px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .toggleFullscreen {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+  }
 }

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

@@ -1,29 +1,33 @@
 // component styles are encapsulated and only applied to their components
-#jitsiContainer {
+@import "../../../style/themes/themes";
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: none;
-}
 
-.join-conference-wrapper {
+@include themifyComponent() {
-  display: table;
+  #jitsiContainer {
-  position: absolute;
+    position: fixed;
-  height: 100%;
+    top: 0;
-  width: 100%;
+    bottom: 0;
-  background-color: #fff;
+    left: 0;
-}
+    right: 0;
+    display: none;
+  }
 
-.join-conference-boat {
+  .join-conference-wrapper {
-  display: table-cell;
+    display: table;
-  vertical-align: middle;
+    position: absolute;
-}
+    height: 100%;
+    width: 100%;
+    background-color: themed(jitsiWelcomeBgColor);
+  }
 
-.join-conference-prompt {
+  .join-conference-boat {
-  margin-left: auto;
+    display: table-cell;
-  margin-right: auto;
+    vertical-align: middle;
-  width: 90%;
+  }
-  text-align: center;
+
+  .join-conference-prompt {
+    margin-left: auto;
+    margin-right: auto;
+    width: 90%;
+    text-align: center;
+  }
 }

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

@@ -1,80 +1,84 @@
 // component styles are encapsulated and only applied to their components
-.control-page {
+@import "../../../style/themes/themes";
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: 0;
-  padding: 0;
-  background-color: #eee;
-  color: #222;
-}
 
-.loading-badge {
+@include themifyComponent() {
-  text-align: center;
+  .control-page {
-  font-size: 20px;
+    position: fixed;
-  position: relative;
+    top: 0;
-  top: calc(50% - 10px);
+    bottom: 0;
-}
+    left: 0;
+    right: 0;
+    margin: 0;
+    padding: 0;
+    background-color: themed(stickerPickerControlBgColor);
+    color: themed(stickerPickerControlFgColor);
+  }
 
-.auth-error {
+  .loading-badge {
-  text-align: center;
+    text-align: center;
-  position: relative;
+    font-size: 20px;
-  height: 300px;
+    position: relative;
-  top: calc(50% - 150px);
+    top: calc(50% - 10px);
-  color: #bd362f;
+  }
-}
 
-.sticker-picker {
+  .auth-error {
-  margin: 15px 15px 30px;
+    text-align: center;
+    position: relative;
+    height: 300px;
+    top: calc(50% - 150px);
+    color: themed(stickerPickerErrorColor);
+  }
 
-  .sticker-pack {
+  .sticker-picker {
-    .header {
+    margin: 15px 15px 30px;
-      margin-top: 15px;
-      margin-left: 3px;
 
-      .title {
+    .sticker-pack {
-        font-weight: 700;
+      .header {
-        color: #222222;
+        margin-top: 15px;
-      }
+        margin-left: 3px;
 
-      .license {
+        .title {
-        font-size: 0.6em;
+          font-weight: 700;
-        font-weight: 300;
+          color: themed(stickerPickerTitleColor);
-        color: #b5b5b5;
+        }
-        margin-top: 3px;
-        float: right;
 
-        a {
+        .license {
-          color: #b5b5b5;
+          font-size: 0.6em;
+          font-weight: 300;
+          color: themed(stickerPickerLicenseColor);
+          margin-top: 3px;
+          float: right;
+
+          a {
+            color: themed(stickerPickerLicenseColor);
+          }
+        }
+
+        .author {
+          font-size: 0.6em;
+          font-weight: 300;
+          color: themed(stickerPickerAuthorColor);
+          display: block;
+
+          a {
+            color: themed(stickerPickerAuthorColor);
+          }
         }
       }
 
-      .author {
+      .stickers {
-        font-size: 0.6em;
+        display: flex;
-        font-weight: 300;
+        flex-wrap: wrap;
-        color: #222222;
-        display: block;
 
-        a {
+        .sticker {
-          color: #222222;
+          padding: 5px;
+          margin: 2px;
+          cursor: pointer;
+          border-radius: 3px;
+          background-color: themed(stickerPickerStickerBgColor);
+          box-shadow: 0 2px 6px themed(stickerPickerShadowColor);
         }
       }
     }
-
-    .stickers {
-      display: flex;
-      flex-wrap: wrap;
-
-      .sticker {
-        padding: 5px;
-        margin: 2px;
-        cursor: pointer;
-        border-radius: 3px;
-        background-color: #fff;
-        box-shadow: 0 2px 6px hsla(0, 0%, 0%, 0.2);
-      }
-    }
   }
 }

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">
 
-    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
+    <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,48 +2,62 @@
 // 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.
 
-.dimension-breadcrumb {
+@import "themes/themes";
-  .fluid-bread {
+
-    padding: 0;
+.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 {
+      position: absolute;
+      top: 19px;
+      right: 15px;
+    }
+
+    .header .quickAction .adminButton {
+      position: absolute;
+      top: 19px;
+      right: 55px;
+    }
+
+    .header .quickAction .headerButton {
+      font-size: 35px;
+      cursor: pointer;
+      color: themed(quickActionColor);
+    }
+
+    .header .quickAction .headerButton:hover {
+      color: themed(quickActionHoverColor);
+    }
   }
-
-  .fluid-bread .container {
-    padding: 0;
-    margin: 0;
-  }
-
-  .fluid-bread .container .breadcrumb {
-    padding: 0;
-    margin: 0;
-  }
-
-  .fluid-bread .breadcrumb-item a:hover {
-    text-decoration: none;
-  }
-
-  font-size: 13px;
-  display: block;
-  padding-top: 4px;
-}
-
-.header .quickAction .closeButton .scalarClose {
-  position: absolute;
-  top: 19px;
-  right: 15px;
-}
-
-.header .quickAction .adminButton {
-  position: absolute;
-  top: 19px;
-  right: 55px;
-}
-
-.header .quickAction .headerButton {
-  font-size: 35px;
-  cursor: pointer;
-  color: #ccc;
-}
-
-.header .quickAction .headerButton:hover {
-  color: #888;
 }

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,21 +1,27 @@
-.dialog {
+@import "../themes/themes";
-  .dialog-header {
-    border-bottom: 1px solid #ddd;
-    padding: 20px;
 
-    h4 {
+@include themifyRoot() {
-      margin: 0;
+  .dialog {
+    background-color: themed(dialogBgColor);
+    color: themed(dialogFgColor);
+
+    .dialog-header {
+      padding: 20px;
+      border-bottom: 1px solid themed(dialogBorderColor);
+
+      h4 {
+        margin: 0;
+      }
+    }
+
+    .dialog-content {
+      padding: 20px;
+    }
+
+    .dialog-footer {
+      padding: 20px;
+      border-top: 1px solid themed(dialogFooterBorderColor);
+      background-color: themed(dialogFooterBackgroundColor);
     }
   }
-
+}
-  .dialog-content {
-    padding: 20px;
-
-  }
-
-  .dialog-footer {
-    padding: 20px;
-    border-top: 1px solid #bbb;
-    background-color: #ddd;
-  }
-}

web/style/components/ibox.scss

@@ -1,34 +1,40 @@
-.ibox {
+@import "../themes/themes";
-  background-color: #fff;
-  padding: 0;
-  margin-bottom: 30px;
-  box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.2);
-}
 
-.ibox .ibox-title {
+.main-app {
-  padding: 5px;
+  @include themify() {
-  border-bottom: 1px solid #e7eaec;
+    .ibox {
-  border-top: 2px solid #e7eaec;
+      background-color: themed('containerBgColor');
-}
+      padding: 0;
+      margin-bottom: 30px;
+      box-shadow: 0 2px 4px themed('containerShadowColor');
+    }
 
-.ibox .ibox-title h5 {
+    .ibox .ibox-title {
-  display: inline;
+      padding: 5px;
-  font-size: 1.1em;
+      border-bottom: 1px solid themed('containerBorderColor');
-  padding: 5px;
+      border-top: 2px solid themed('containerBorderColor');
-  margin: 0;
+    }
-}
 
-.ibox .ibox-content {
+    .ibox .ibox-title h5 {
-  padding: 15px;
+      display: inline;
-}
+      font-size: 1.1em;
+      padding: 5px;
+      margin: 0;
+    }
 
-.ibox .ibox-title .ibox-icon {
+    .ibox .ibox-content {
-  float: right;
+      padding: 15px;
-  margin-top: 4px;
+    }
-  margin-right: 5px;
-  cursor: pointer;
-}
 
-.ibox .ibox-title.ibox-title-collapsible {
+    .ibox .ibox-title .ibox-icon {
-  cursor: pointer;
+      float: right;
+      margin-top: 4px;
+      margin-right: 5px;
+      cursor: pointer;
+    }
+
+    .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,
+);