Merge pull request #3503 from matrix-org/bwindels/custom-themes-mvp

Custom theming MVP

res/css/structures/_RoomSubList.scss

@@ -70,10 +70,10 @@ limitations under the License.
 .mx_RoomSubList_badge {
     flex: 0 0 auto;
     border-radius: 8px;
-    color: $accent-fg-color;
     font-weight: 600;
     font-size: 12px;
     padding: 0 5px;
+    color: $roomtile-badge-fg-color;
     background-color: $roomtile-name-color;
     cursor: pointer;
 }
@@ -104,6 +104,7 @@ limitations under the License.
 }
 
 .mx_RoomSubList_badgeHighlight {
+    color: $accent-fg-color;
     background-color: $warning-color;
 }
 

res/css/views/rooms/_RoomTile.scss

@@ -110,7 +110,7 @@ limitations under the License.
     flex: 0 1 content;
     border-radius: 0.8em;
     padding: 0 0.4em;
-    color: $accent-fg-color;
+    color: $roomtile-badge-fg-color;
     font-weight: 600;
     font-size: 12px;
 }
@@ -156,6 +156,7 @@ limitations under the License.
 
 .mx_RoomTile_highlight .mx_RoomTile_badge,
 .mx_RoomTile_badge.mx_RoomTile_badgeRed {
+    color: $accent-fg-color;
     background-color: $warning-color;
 }
 

res/themes/dark-custom/css/dark-custom.scss

@@ -0,0 +1,6 @@
+@import "../../light/css/_paths.scss";
+@import "../../light/css/_fonts.scss";
+@import "../../light/css/_light.scss";
+@import "../../dark/css/_dark.scss";
+@import "../../light-custom/css/_custom.scss";
+@import "../../../../res/css/_components.scss";

res/themes/light-custom/css/_custom.scss

@@ -0,0 +1,126 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+//
+// --accent-color
+$accent-color: var(--accent-color);
+$button-bg-color: var(--accent-color);
+$button-link-fg-color: var(--accent-color);
+$button-primary-bg-color: var(--accent-color);
+$input-valid-border-color: var(--accent-color);
+$reaction-row-button-selected-border-color: var(--accent-color);
+$roomsublist-chevron-color: var(--accent-color);
+$tab-label-active-bg-color: var(--accent-color);
+$togglesw-on-color: var(--accent-color);
+$username-variant3-color: var(--accent-color);
+$accent-color-50pct: var(--accent-color-50pct); //still needs alpha at .5
+//
+// --timeline-background-color
+$authpage-body-bg-color: var(--timeline-background-color);
+$button-secondary-bg-color: var(--timeline-background-color);
+$field-focused-label-bg-color: var(--timeline-background-color);
+$lightbox-border-color: var(--timeline-background-color);
+$menu-bg-color: var(--timeline-background-color);
+$avatar-bg-color: var(--timeline-background-color);
+$message-action-bar-bg-color: var(--timeline-background-color);
+$primary-bg-color: var(--timeline-background-color);
+$roomtile-focused-bg-color: var(--timeline-background-color);
+$togglesw-ball-color: var(--timeline-background-color);
+$droptarget-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .5
+$authpage-modal-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .59
+//
+// --roomlist-highlights-color
+$roomtile-selected-bg-color: var(--roomlist-highlights-color);
+//
+// --sidebar-color
+$interactive-tooltip-bg-color: var(--sidebar-color);
+$tagpanel-bg-color: var(--sidebar-color);
+$tooltip-timeline-bg-color: var(--sidebar-color);
+$dialog-backdrop-color: var(--sidebar-color-50pct);
+//
+// --roomlist-background-color
+$event-selected-color: var(--roomlist-background-color);
+$header-panel-bg-color: var(--roomlist-background-color);
+$reaction-row-button-bg-color: var(--roomlist-background-color);
+$panel-gradient: var(--roomlist-background-color-0pct), var(--roomlist-background-color);
+// these were #f2f5f8 instead of #f3f8fd, but close enough
+$dark-panel-bg-color: var(--roomlist-background-color);
+$input-lighter-bg-color: var(--roomlist-background-color);
+$plinth-bg-color: var(--roomlist-background-color);
+$roomsublist-background: var(--roomlist-background-color);
+$secondary-accent-color: var(--roomlist-background-color);
+$selected-color: var(--roomlist-background-color);
+$widget-menu-bar-bg-color: var(--roomlist-background-color);
+$roomtile-badge-fg-color: var(--roomlist-background-color);
+//
+// --timeline-text-color
+$message-action-bar-fg-color: var(--timeline-text-color);
+$primary-fg-color: var(--timeline-text-color);
+$settings-profile-overlay-placeholder-fg-color: var(--timeline-text-color);
+$roomtopic-color: var(--timeline-text-color-50pct);
+$tab-label-fg-color: var(--timeline-text-color);
+$tab-label-icon-bg-color: var(--timeline-text-color);   //was #454545
+// was #212121
+$topleftmenu-color: var(--timeline-text-color);
+// was #45474a
+$dialog-title-fg-color: var(--timeline-text-color);
+$tab-label-fg-color: var(--timeline-text-color);
+// was #4e5054
+$authpage-lang-color: var(--timeline-text-color);
+$roomheader-color: var(--timeline-text-color);
+//
+// --roomlist-text-color
+$roomtile-notified-color: var(--roomlist-text-color);
+$roomtile-selected-color: var(--roomlist-text-color);
+//
+// --roomlist-text-secondary-color
+$roomsublist-label-fg-color: var(--roomlist-text-secondary-color);
+$roomtile-name-color: var(--roomlist-text-secondary-color);
+//
+// --roomlist-separator-color
+$input-darker-bg-color: var(--roomlist-separator-color);
+$panel-divider-color: var(--roomlist-separator-color);// originally #dee1f3, but close enough
+$primary-hairline-color: var(--roomlist-separator-color);// originally #e5e5e5, but close enough
+//
+// --timeline-text-secondary-color
+$authpage-secondary-color: var(--timeline-text-secondary-color);
+$memberstatus-placeholder-color: var(--timeline-text-secondary-color);
+$notice-secondary-color: var(--timeline-text-secondary-color);
+$pinned-color: var(--timeline-text-secondary-color);
+$settings-subsection-fg-color: var(--timeline-text-secondary-color);
+$roomheader-addroom-bg-color: var(--timeline-text-secondary-color);
+// was #747474
+$light-fg-color: var(--timeline-text-secondary-color);
+// was #777777
+$blockquote-fg-color: var(--timeline-text-secondary-color);
+// was #888888
+$greyed-fg-color: var(--timeline-text-secondary-color);
+$info-plinth-fg-color: var(--timeline-text-secondary-color);
+$preview-widget-fg-color: var(--timeline-text-secondary-color);
+//
+// --primary-color
+$accent-color-alt: var(--primary-color);
+$input-focused-border-color: var(--primary-color);
+//
+// --warning-color
+$button-danger-bg-color: var(--warning-color);
+$event-highlight-fg-color: var(--warning-color);
+$input-invalid-border-color: var(--warning-color);
+$mention-user-pill-bg-color: var(--warning-color);
+$notice-primary-color: var(--warning-color);
+$pinned-unread-color: var(--warning-color);
+$warning-color: var(--warning-color);
+$button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5

res/themes/light-custom/css/light-custom.scss

@@ -0,0 +1,5 @@
+@import "../../light/css/_paths.scss";
+@import "../../light/css/_fonts.scss";
+@import "../../light/css/_light.scss";
+@import "_custom.scss";
+@import "../../../../res/css/_components.scss";

res/themes/light/css/_light.scss

@@ -167,6 +167,7 @@ $header-divider-color: #91A1C0;
 // ********************
 
 $roomtile-name-color: #61708b;
+$roomtile-badge-fg-color: $accent-fg-color;
 $roomtile-selected-color: #212121;
 $roomtile-notified-color: #212121;
 $roomtile-selected-bg-color: #fff;
@@ -234,7 +235,7 @@ $tab-label-active-fg-color: #ffffff;
 $tab-label-bg-color: transparent;
 $tab-label-active-bg-color: $accent-color;
 $tab-label-icon-bg-color: #454545;
-$tab-label-active-icon-bg-color: #ffffff;
+$tab-label-active-icon-bg-color: $tab-label-active-fg-color;
 
 // Buttons
 $button-primary-fg-color: #ffffff;