Merge branch 'master' into bwindels/calls

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hydrogen-web",
-  "version": "0.2.26",
+  "version": "0.2.28",
   "description": "A javascript matrix client prototype, trying to minize RAM usage by offloading as much as possible to IndexedDB",
   "directories": {
     "doc": "doc"

scripts/build-plugins/rollup-plugin-build-themes.js

@@ -13,17 +13,22 @@ 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.
 */
+const path = require('path');
 
 async function readCSSSource(location) {
     const fs = require("fs").promises;
     const path = require("path");
-    const resolvedLocation = path.resolve(__dirname, "../../",  `${location}/theme.css`);
+    const resolvedLocation = path.resolve(__dirname, "../../", `${location}/theme.css`);
     const data = await fs.readFile(resolvedLocation);
     return data;
 }
 
-async function appendVariablesToCSS(variables, cssSource) {
+function getRootSectionWithVariables(variables) {
-    return cssSource + `:root{\n${Object.entries(variables).reduce((acc, [key, value]) => acc + `--${key}: ${value};\n`, "")} }\n\n`;
+    return `:root{\n${Object.entries(variables).reduce((acc, [key, value]) => acc + `--${key}: ${value};\n`, "")} }\n\n`;
+}
+
+function appendVariablesToCSS(variables, cssSource) {
+    return cssSource + getRootSectionWithVariables(variables);
 }
 
 function parseBundle(bundle) {
@@ -68,21 +73,30 @@ function parseBundle(bundle) {
 
 module.exports = function buildThemes(options) {
     let manifest, variants, defaultDark, defaultLight;
+    let isDevelopment = false;
+    const virtualModuleId = '@theme/'
+    const resolvedVirtualModuleId = '\0' + virtualModuleId;
 
     return {
         name: "build-themes",
         enforce: "pre",
 
+        configResolved(config) {
+            if (config.command === "serve") {
+                isDevelopment = true;
+            }
+        },
+
         async buildStart() {
-            const { manifestLocations } = options;
+            if (isDevelopment) { return; }
-            for (const location of manifestLocations) {
+            const { themeConfig } = options;
+            for (const [name, location] of Object.entries(themeConfig.themes)) {
                 manifest = require(`${location}/manifest.json`);
                 variants = manifest.values.variants;
-                const themeName = manifest.name;
                 for (const [variant, details] of Object.entries(variants)) {
-                    const fileName = `theme-${themeName}-${variant}.css`;
+                    const fileName = `theme-${name}-${variant}.css`;
-                    if (details.default) {
+                    if (name === themeConfig.default && details.default) {
-                        // This is one of the default variants for this theme.
+                        // This is the default theme, stash  the file name for later
                         if (details.dark) {
                             defaultDark = fileName;
                         }
@@ -93,7 +107,7 @@ module.exports = function buildThemes(options) {
                     // emit the css as built theme bundle
                     this.emitFile({
                         type: "chunk",
-                        id: `${location}/theme.css?variant=${variant}`,
+                        id: `${location}/theme.css?variant=${variant}${details.dark? "&dark=true": ""}`,
                         fileName,
                     });
                 }
@@ -101,23 +115,89 @@ module.exports = function buildThemes(options) {
                 this.emitFile({
                     type: "chunk",
                     id: `${location}/theme.css?type=runtime`,
-                    fileName: `theme-${themeName}-runtime.css`,
+                    fileName: `theme-${name}-runtime.css`,
                 });
             }
         },
 
-        async load(id) {
+        resolveId(id) {
-            const result = id.match(/(.+)\/theme.css\?variant=(.+)/);
+            if (id.startsWith(virtualModuleId)) {
-            if (result) {
+                return '\0' + id;
-                const [, location, variant] = result;
+            }
-                const cssSource = await readCSSSource(location);
+        },
-                const config = variants[variant];
+
-                return await appendVariablesToCSS(config.variables, cssSource);
+        async load(id) {
+            if (isDevelopment) {
+                /**
+                 * To load the theme during dev, we need to take a different approach because emitFile is not supported in dev.
+                 * We solve this by resolving virtual file "@theme/name/variant" into the necessary css import.
+                 * This virtual file import is removed when hydrogen is built (see transform hook).
+                 */
+                if (id.startsWith(resolvedVirtualModuleId)) {
+                    let [theme, variant, file] = id.substr(resolvedVirtualModuleId.length).split("/");
+                    if (theme === "default") {
+                        theme = options.themeConfig.default;
+                    }
+                    const location = options.themeConfig.themes[theme];
+                    const manifest = require(`${location}/manifest.json`);
+                    const variants = manifest.values.variants;
+                    if (!variant || variant === "default") {
+                        // choose the first default variant for now
+                        // this will need to support light/dark variants as well
+                        variant = Object.keys(variants).find(variantName => variants[variantName].default);
+                    }
+                    if (!file) {
+                        file = "index.js";
+                    }
+                    switch (file) {
+                        case "index.js": {
+                            const isDark = variants[variant].dark;
+                            return `import "${path.resolve(`${location}/theme.css`)}${isDark? "?dark=true": ""}";` +
+                                `import "@theme/${theme}/${variant}/variables.css"`;
+                        }
+                        case "variables.css": { 
+                            const variables = variants[variant].variables;
+                            const css =  getRootSectionWithVariables(variables);
+                            return css;
+                        }
+                    }
+                }
+            }
+            else {
+                const result = id.match(/(.+)\/theme.css\?variant=([^&]+)/);
+                if (result) {
+                    const [, location, variant] = result;
+                    const cssSource = await readCSSSource(location);
+                    const config = variants[variant];
+                    return appendVariablesToCSS(config.variables, cssSource);
+                }
+                return null;
+            }
+        },
+
+        transform(code, id) {
+            if (isDevelopment) {
+                return;
+            }
+            /**
+             * Removes develop-only script tag; this cannot be done in transformIndexHtml hook because
+             * by the time that hook runs, the import is added to the bundled js file which would
+             * result in a runtime error.
+             */
+
+            const devScriptTag =
+                /<script type="module"> import "@theme\/.+"; <\/script>/;
+            if (id.endsWith("index.html")) {
+                const htmlWithoutDevScript = code.replace(devScriptTag, "");
+                return htmlWithoutDevScript;
             }
-            return null;
         },
 
         transformIndexHtml(_, ctx) {
+            if (isDevelopment) {
+                // Don't add default stylesheets to index.html on dev
+                return;
+            } 
             let darkThemeLocation, lightThemeLocation;
             for (const [, bundle] of Object.entries(ctx.bundle)) {
                 if (bundle.name === defaultDark) {
@@ -147,7 +227,7 @@ module.exports = function buildThemes(options) {
                     }
                 },
             ];
-        },
+},
 
         generateBundle(_, bundle) {
             const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle);
@@ -169,6 +249,6 @@ module.exports = function buildThemes(options) {
                     source: JSON.stringify(manifest),
                 });
             }
-        }
+        },
     }
 }

scripts/postcss/color.js

@@ -16,8 +16,17 @@ limitations under the License.
 
 const offColor = require("off-color").offColor;
 
-module.exports.derive = function (value, operation, argument) {
+module.exports.derive = function (value, operation, argument, isDark) {
     const argumentAsNumber = parseInt(argument);
+    if (isDark) {
+        // For dark themes, invert the operation
+        if (operation === 'darker') {
+            operation = "lighter";
+        }
+        else if (operation === 'lighter') {
+            operation = "darker";
+        }
+    }
     switch (operation) {
         case "darker": {
             const newColorString = offColor(value).darken(argumentAsNumber / 100).hex();

scripts/postcss/css-compile-variables.js

@@ -33,6 +33,7 @@ const valueParser = require("postcss-value-parser");
 let aliasMap;
 let resolvedMap;
 let baseVariables;
+let isDark;
 
 function getValueFromAlias(alias) {
     const derivedVariable = aliasMap.get(alias);
@@ -78,7 +79,7 @@ function resolveDerivedVariable(decl, derive) {
             if (!value) {
                 throw new Error(`Cannot derive from ${baseVariable} because it is neither defined in config nor is it an alias!`);
             }
-            const derivedValue = derive(value, operation, argument);
+            const derivedValue = derive(value, operation, argument, isDark);
             resolvedMap.set(wholeVariable, derivedValue);
         }
     }
@@ -123,6 +124,7 @@ function populateMapWithDerivedVariables(map, cssFileLocation) {
  * @param {string} value - The base value on which an operation is applied
  * @param {string} operation - The operation to be applied (eg: darker, lighter...)
  * @param {string} argument - The argument for this operation
+ * @param {boolean} isDark - Indicates whether this theme is dark
  */
 /**
  * 
@@ -134,6 +136,8 @@ module.exports = (opts = {}) => {
     aliasMap = new Map();
     resolvedMap = new Map();
     baseVariables = new Map();
+    isDark = false;
+
     return {
         postcssPlugin: "postcss-compile-variables",
 
@@ -143,6 +147,7 @@ module.exports = (opts = {}) => {
                 // If this is a runtime theme, don't derive variables.
                 return;
             }
+            isDark = cssFileLocation.includes("dark=true");
             /*
             Go through the CSS file once to extract all aliases and base variables.
             We use these when resolving derived variables later.
@@ -153,8 +158,13 @@ module.exports = (opts = {}) => {
             if (opts.compiledVariables){
                 populateMapWithDerivedVariables(opts.compiledVariables, cssFileLocation);
             }
-            // Publish both the base-variables and derived-variables to the other postcss-plugins
+            // Also produce a mapping from alias to completely resolved color
-            const combinedMap = new Map([...baseVariables, ...resolvedMap]);
+            const resolvedAliasMap = new Map();
+            aliasMap.forEach((value, key) => {
+                resolvedAliasMap.set(key, resolvedMap.get(value));
+            });
+            // Publish the base-variables, derived-variables and resolved aliases to the other postcss-plugins
+            const combinedMap = new Map([...baseVariables, ...resolvedMap, ...resolvedAliasMap]);
             result.messages.push({
                 type: "resolved-variable-map",
                 plugin: "postcss-compile-variables",

scripts/postcss/css-url-processor.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 const valueParser = require("postcss-value-parser");
 const  resolve = require("path").resolve;
+let cssPath;
 
 function colorsFromURL(url, colorMap) {
     const params = new URL(`file://${url}`).searchParams;
@@ -44,7 +45,6 @@ function processURL(decl, replacer, colorMap) {
         }
         const urlStringNode = node.nodes[0];
         const oldURL = urlStringNode.value;
-        const cssPath = decl.source?.input.file.replace(/[^/]*$/, "");
         const oldURLAbsolute = resolve(cssPath, oldURL);
         const colors  = colorsFromURL(oldURLAbsolute, colorMap);
         if (!colors) {
@@ -68,6 +68,11 @@ module.exports = (opts = {}) => {
         postcssPlugin: "postcss-url-to-variable",
 
         Once(root, {result}) {
+            const cssFileLocation = root.source.input.from;
+            if (cssFileLocation.includes("type=runtime")) {
+                // If this is a runtime theme, don't process urls.
+                return;
+            }
             /*
             postcss-compile-variables should have sent the list of resolved colours down via results
             */
@@ -79,6 +84,7 @@ module.exports = (opts = {}) => {
             Go through each declaration and if it contains an URL, replace the url with the result
             of running replacer(url)
             */
+            cssPath = root.source?.input.file.replace(/[^/]*$/, "");
             root.walkDecls(decl => processURL(decl, opts.replacer, colorMap));
         },
     };

scripts/postcss/svg-colorizer.js

@@ -16,6 +16,14 @@ limitations under the License.
 
 const fs = require("fs");
 const path = require("path");
+const xxhash = require('xxhashjs');
+
+function createHash(content) {
+    const hasher = new xxhash.h32(0);
+    hasher.update(content);
+    return hasher.digest();
+}
+
 /**
  * Builds a new svg with the colors replaced and returns its location.
  * @param {string} svgLocation The location of the input svg file
@@ -30,6 +38,7 @@ module.exports.buildColorizedSVG = function (svgLocation, primaryColor, secondar
         throw new Error("svg-colorizer made no color replacements! The input svg should only contain colors #ff00ff (primary, case-sensitive) and #00ffff (secondary, case-sensitive).");
     }
     const fileName = svgLocation.match(/.+\/(.+\.svg)/)[1];
+    const outputName = `${fileName.substring(0, fileName.length - 4)}-${createHash(coloredSVGCode)}.svg`;
     const outputPath = path.resolve(__dirname, "../../.tmp");
     try {
        fs.mkdirSync(outputPath);
@@ -39,7 +48,7 @@ module.exports.buildColorizedSVG = function (svgLocation, primaryColor, secondar
             throw e;
         }
     }
-    const outputFile = `${outputPath}/${fileName}`;
+    const outputFile = `${outputPath}/${outputName}`;
     fs.writeFileSync(outputFile, coloredSVGCode);
     return outputFile;
 }

scripts/sdk/build.sh

@@ -11,7 +11,11 @@ cp doc/SDK.md target/README.md
 pushd target
 pushd asset-build/assets
 mv main.*.js ../../main.js
-mv index.*.css ../../style.css
+# Create a copy of light theme for backwards compatibility 
+cp theme-element-light.*.css ../../style.css
+# Remove asset hash from css files
+mv theme-element-light.*.css ../../theme-element-light.css
+mv theme-element-dark.*.css ../../theme-element-dark.css
 mv download-sandbox.*.html ../../download-sandbox.html
 rm *.js *.wasm
 mv ./* ../../

src/index.html

@@ -2,8 +2,6 @@
 <!-- this file contains all references to include in the SDK asset build (using vite.sdk-assets-config.js) -->
 <html>
 <head>
-    <link rel="stylesheet" type="text/css" href="./platform/web/ui/css/main.css">
-    <link rel="stylesheet" type="text/css" href="./platform/web/ui/css/themes/element/theme.css">
 </head>
 <body>
     <script type="module">

src/platform/web/index.html

@@ -11,8 +11,7 @@
         <meta name="description" content="A matrix chat application">
         <link rel="apple-touch-icon" href="./assets/icon-maskable.png">
         <link rel="icon" type="image/png" href="assets/icon-maskable.png">
-        <link rel="stylesheet" type="text/css" href="./ui/css/main.css">
+        <script type="module"> import "@theme/default"; </script>
-        <link rel="stylesheet" type="text/css" href="./ui/css/themes/element/theme.css">
     </head>
     <body class="hydrogen">
         <script id="main" type="module">

src/platform/web/ui/css/right-panel.css

@@ -22,6 +22,7 @@
 .RoomDetailsView_label, .RoomDetailsView_row, .RoomDetailsView, .MemberDetailsView, .EncryptionIconView {
     display: flex;
     align-items: center;
+    color: var(--text-color);
 }
 
 .RoomDetailsView_value {

src/platform/web/ui/css/themes/element/element-logo.svg

@@ -1,6 +1,6 @@
 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.28 2.88C17.28 1.28942 18.5694 0 20.16 0C30.7639 0 39.36 8.59613 39.36 19.2C39.36 20.7906 38.0706 22.08 36.48 22.08C34.8894 22.08 33.6 20.7906 33.6 19.2C33.6 11.7773 27.5827 5.76 20.16 5.76C18.5694 5.76 17.28 4.47058 17.28 2.88Z" fill="#0DBD8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.28 2.88C17.28 1.28942 18.5694 0 20.16 0C30.7639 0 39.36 8.59613 39.36 19.2C39.36 20.7906 38.0706 22.08 36.48 22.08C34.8894 22.08 33.6 20.7906 33.6 19.2C33.6 11.7773 27.5827 5.76 20.16 5.76C18.5694 5.76 17.28 4.47058 17.28 2.88Z" fill="#ff00ff"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M30.72 45.12C30.72 46.7106 29.4306 48 27.84 48C17.2361 48 8.64 39.4039 8.64 28.8C8.64 27.2094 9.92942 25.92 11.52 25.92C13.1106 25.92 14.4 27.2094 14.4 28.8C14.4 36.2227 20.4173 42.24 27.84 42.24C29.4306 42.24 30.72 43.5294 30.72 45.12Z" fill="#0DBD8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.72 45.12C30.72 46.7106 29.4306 48 27.84 48C17.2361 48 8.64 39.4039 8.64 28.8C8.64 27.2094 9.92942 25.92 11.52 25.92C13.1106 25.92 14.4 27.2094 14.4 28.8C14.4 36.2227 20.4173 42.24 27.84 42.24C29.4306 42.24 30.72 43.5294 30.72 45.12Z" fill="#ff00ff"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.88 30.72C1.28942 30.72 -5.63623e-08 29.4306 -1.25889e-07 27.84C-5.89399e-07 17.2361 8.59613 8.63997 19.2 8.63997C20.7906 8.63997 22.08 9.92939 22.08 11.52C22.08 13.1106 20.7906 14.4 19.2 14.4C11.7773 14.4 5.76 20.4173 5.76 27.84C5.76 29.4306 4.47058 30.72 2.88 30.72Z" fill="#0DBD8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.88 30.72C1.28942 30.72 -5.63623e-08 29.4306 -1.25889e-07 27.84C-5.89399e-07 17.2361 8.59613 8.63997 19.2 8.63997C20.7906 8.63997 22.08 9.92939 22.08 11.52C22.08 13.1106 20.7906 14.4 19.2 14.4C11.7773 14.4 5.76 20.4173 5.76 27.84C5.76 29.4306 4.47058 30.72 2.88 30.72Z" fill="#ff00ff"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M45.12 17.28C46.7106 17.28 48 18.5694 48 20.16C48 30.7639 39.4039 39.36 28.8 39.36C27.2094 39.36 25.92 38.0706 25.92 36.48C25.92 34.8894 27.2094 33.6 28.8 33.6C36.2227 33.6 42.24 27.5827 42.24 20.16C42.24 18.5694 43.5294 17.28 45.12 17.28Z" fill="#0DBD8B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M45.12 17.28C46.7106 17.28 48 18.5694 48 20.16C48 30.7639 39.4039 39.36 28.8 39.36C27.2094 39.36 25.92 38.0706 25.92 36.48C25.92 34.8894 27.2094 33.6 28.8 33.6C36.2227 33.6 42.24 27.5827 42.24 20.16C42.24 18.5694 43.5294 17.28 45.12 17.28Z" fill="#ff00ff"/>
 </svg>

src/platform/web/ui/css/themes/element/icons/chevron-down.svg

@@ -16,7 +16,7 @@
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M 8.20723,2.70711 C 8.59775,3.09763 8.59878,3.73182 8.20952,4.1236 L 3.27581,9.08934 8.22556,14.0391 c 0.39052,0.3905 0.39155,1.0247 0.00229,1.4165 -0.38926,0.3918 -1.0214,0.3928 -1.41192,0.0023 L 1.15907,9.80101 C 0.768549,9.41049 0.767523,8.7763 1.15678,8.38452 L 6.79531,2.70939 C 7.18457,2.31761 7.8167,2.31658 8.20723,2.70711 Z"
-       fill="#8d99a5"
+       fill="#ff00ff"
        id="path830" />
   </g>
   <defs

src/platform/web/ui/css/themes/element/icons/chevron-left.svg

@@ -1,6 +1,6 @@
 <svg width="9" height="17" viewBox="0 0 9 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.20723 2.70711C8.59775 3.09763 8.59878 3.73182 8.20952 4.1236L3.27581 9.08934L8.22556 14.0391C8.61608 14.4296 8.61711 15.0638 8.22785 15.4556C7.83859 15.8474 7.20645 15.8484 6.81593 15.4579L1.15907 9.80101C0.768549 9.41049 0.767523 8.7763 1.15678 8.38452L6.79531 2.70939C7.18457 2.31761 7.8167 2.31658 8.20723 2.70711Z" fill="#8D99A5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.20723 2.70711C8.59775 3.09763 8.59878 3.73182 8.20952 4.1236L3.27581 9.08934L8.22556 14.0391C8.61608 14.4296 8.61711 15.0638 8.22785 15.4556C7.83859 15.8474 7.20645 15.8484 6.81593 15.4579L1.15907 9.80101C0.768549 9.41049 0.767523 8.7763 1.15678 8.38452L6.79531 2.70939C7.18457 2.31761 7.8167 2.31658 8.20723 2.70711Z" fill="#ff00ff"/>
 </g>
 <defs>
 <clipPath id="clip0">

src/platform/web/ui/css/themes/element/icons/chevron-right.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 18L15 12L9 6" stroke="#8D99A5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 18L15 12L9 6" stroke="#ff00ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/platform/web/ui/css/themes/element/icons/chevron-small.svg

@@ -1,3 +1,3 @@
 <svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.96967 10.7197C0.676777 10.4268 0.676007 9.95117 0.967952 9.65733L4.66823 5.93303L0.955922 2.22072C0.663029 1.92782 0.662259 1.45218 0.954204 1.15834C1.24615 0.864504 1.72025 0.863737 2.01315 1.15663L6.25579 5.39927C6.54868 5.69216 6.54945 6.1678 6.2575 6.46164L2.02861 10.718C1.73667 11.0118 1.26256 11.0126 0.96967 10.7197Z" fill="#737D8C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.96967 10.7197C0.676777 10.4268 0.676007 9.95117 0.967952 9.65733L4.66823 5.93303L0.955922 2.22072C0.663029 1.92782 0.662259 1.45218 0.954204 1.15834C1.24615 0.864504 1.72025 0.863737 2.01315 1.15663L6.25579 5.39927C6.54868 5.69216 6.54945 6.1678 6.2575 6.46164L2.02861 10.718C1.73667 11.0118 1.26256 11.0126 0.96967 10.7197Z" fill="#ff00ff"/>
 </svg>

src/platform/web/ui/css/themes/element/icons/chevron-thin-left.svg

@@ -1,3 +1,3 @@
 <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.5 6L7.5 9L10.5 12" stroke="#8D99A5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.5 6L7.5 9L10.5 12" stroke="#ff00ff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/platform/web/ui/css/themes/element/icons/clear.svg

@@ -1,4 +1,4 @@
 <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.33313 1.33313L6.66646 6.66646" stroke="#8D99A5" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M1.33313 1.33313L6.66646 6.66646" stroke="#ff00ff" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M6.66699 1.33313L1.33366 6.66646" stroke="#8D99A5" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M6.66699 1.33313L1.33366 6.66646" stroke="#ff00ff" stroke-width="1.5" stroke-linecap="round"/>
 </svg>

src/platform/web/ui/css/themes/element/icons/disable-grid.svg

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4ZM1.5 4.75C1.5 4.19772 1.94772 3.75 2.5 3.75H3.5C4.05228 3.75 4.5 4.19772 4.5 4.75V11.25C4.5 11.8023 4.05228 12.25 3.5 12.25H2.5C1.94772 12.25 1.5 11.8023 1.5 11.25V4.75ZM7 3.75C6.44772 3.75 6 4.19772 6 4.75V11.25C6 11.8023 6.44772 12.25 7 12.25H13.5C14.0523 12.25 14.5 11.8023 14.5 11.25V4.75C14.5 4.19772 14.0523 3.75 13.5 3.75H7Z" fill="#8D99A5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4ZM1.5 4.75C1.5 4.19772 1.94772 3.75 2.5 3.75H3.5C4.05228 3.75 4.5 4.19772 4.5 4.75V11.25C4.5 11.8023 4.05228 12.25 3.5 12.25H2.5C1.94772 12.25 1.5 11.8023 1.5 11.25V4.75ZM7 3.75C6.44772 3.75 6 4.19772 6 4.75V11.25C6 11.8023 6.44772 12.25 7 12.25H13.5C14.0523 12.25 14.5 11.8023 14.5 11.25V4.75C14.5 4.19772 14.0523 3.75 13.5 3.75H7Z" fill="#ff00ff"/>
 </svg>

src/platform/web/ui/css/themes/element/icons/dismiss.svg

@@ -1,4 +1,4 @@
 <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.33313 1.33313L6.66646 6.66646" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M1.33313 1.33313L6.66646 6.66646" stroke="#ff00ff" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M6.66699 1.33313L1.33366 6.66646" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M6.66699 1.33313L1.33366 6.66646" stroke="#ff00ff" stroke-width="1.5" stroke-linecap="round"/>
 </svg>

src/platform/web/ui/css/themes/element/icons/e2ee-disabled.svg

@@ -1,5 +1,5 @@
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.38 12.27C15.76 11.42 16 10.43 16 9.27V3.05L8.99997 1L5.21997 2.11L15.38 12.27Z" fill="white"/>
+<path d="M15.38 12.27C15.76 11.42 16 10.43 16 9.27V3.05L8.99997 1L5.21997 2.11L15.38 12.27Z" fill="#ff00ff"/>
-<path d="M2.21 2.98999L2 3.04999V9.26999C2 15.63 9 17 9 17C9 17 11.71 16.47 13.76 14.53L2.21 2.98999Z" fill="white"/>
+<path d="M2.21 2.98999L2 3.04999V9.26999C2 15.63 9 17 9 17C9 17 11.71 16.47 13.76 14.53L2.21 2.98999Z" fill="#ff00ff"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.46967 0.46967C0.762563 0.176777 1.23744 0.176777 1.53033 0.46967L16.7203 15.6597C17.0132 15.9526 17.0132 16.4274 16.7203 16.7203C16.4274 17.0132 15.9526 17.0132 15.6597 16.7203L0.46967 1.53033C0.176777 1.23744 0.176777 0.762563 0.46967 0.46967Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.46967 0.46967C0.762563 0.176777 1.23744 0.176777 1.53033 0.46967L16.7203 15.6597C17.0132 15.9526 17.0132 16.4274 16.7203 16.7203C16.4274 17.0132 15.9526 17.0132 15.6597 16.7203L0.46967 1.53033C0.176777 1.23744 0.176777 0.762563 0.46967 0.46967Z" fill="#ff00ff"/>
 </svg>

src/platform/web/ui/css/themes/element/icons/e2ee-normal.svg

@@ -1,3 +1,3 @@
 <svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M2 9.27V3.05L9 1L16 3.05V9.27C16 15.63 9 17 9 17C9 17 2 15.63 2 9.27Z" fill="white"/>
+    <path d="M2 9.27V3.05L9 1L16 3.05V9.27C16 15.63 9 17 9 17C9 17 2 15.63 2 9.27Z" fill="#ff00ff"/>
 </svg>

src/platform/web/ui/css/themes/element/icons/enable-grid.svg

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C1.79086 0 0 1.79086 0 4V12C0 14.2091 1.79086 16 4 16H12C14.2091 16 16 14.2091 16 12V4C16 1.79086 14.2091 0 12 0H4ZM2.5 3.75C1.94772 3.75 1.5 4.19772 1.5 4.75V11.25C1.5 11.8023 1.94772 12.25 2.5 12.25H3.5C4.05228 12.25 4.5 11.8023 4.5 11.25V4.75C4.5 4.19772 4.05228 3.75 3.5 3.75H2.5ZM11 9.75C11 9.19771 11.4477 8.75 12 8.75H13.5C14.0523 8.75 14.5 9.19772 14.5 9.75V11.25C14.5 11.8023 14.0523 12.25 13.5 12.25H12C11.4477 12.25 11 11.8023 11 11.25V9.75ZM7 8.75C6.44772 8.75 6 9.19771 6 9.75V11.25C6 11.8023 6.44772 12.25 7 12.25H8.5C9.05228 12.25 9.5 11.8023 9.5 11.25V9.75C9.5 9.19772 9.05229 8.75 8.5 8.75H7ZM11 4.75C11 4.19772 11.4477 3.75 12 3.75H13.5C14.0523 3.75 14.5 4.19772 14.5 4.75V6.25C14.5 6.80228 14.0523 7.25 13.5 7.25H12C11.4477 7.25 11 6.80228 11 6.25V4.75ZM7 3.75C6.44772 3.75 6 4.19772 6 4.75V6.25C6 6.80228 6.44772 7.25 7 7.25H8.5C9.05228 7.25 9.5 6.80228 9.5 6.25V4.75C9.5 4.19772 9.05229 3.75 8.5 3.75H7Z" fill="#8D99A5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C1.79086 0 0 1.79086 0 4V12C0 14.2091 1.79086 16 4 16H12C14.2091 16 16 14.2091 16 12V4C16 1.79086 14.2091 0 12 0H4ZM2.5 3.75C1.94772 3.75 1.5 4.19772 1.5 4.75V11.25C1.5 11.8023 1.94772 12.25 2.5 12.25H3.5C4.05228 12.25 4.5 11.8023 4.5 11.25V4.75C4.5 4.19772 4.05228 3.75 3.5 3.75H2.5ZM11 9.75C11 9.19771 11.4477 8.75 12 8.75H13.5C14.0523 8.75 14.5 9.19772 14.5 9.75V11.25C14.5 11.8023 14.0523 12.25 13.5 12.25H12C11.4477 12.25 11 11.8023 11 11.25V9.75ZM7 8.75C6.44772 8.75 6 9.19771 6 9.75V11.25C6 11.8023 6.44772 12.25 7 12.25H8.5C9.05228 12.25 9.5 11.8023 9.5 11.25V9.75C9.5 9.19772 9.05229 8.75 8.5 8.75H7ZM11 4.75C11 4.19772 11.4477 3.75 12 3.75H13.5C14.0523 3.75 14.5 4.19772 14.5 4.75V6.25C14.5 6.80228 14.0523 7.25 13.5 7.25H12C11.4477 7.25 11 6.80228 11 6.25V4.75ZM7 3.75C6.44772 3.75 6 4.19772 6 4.75V6.25C6 6.80228 6.44772 7.25 7 7.25H8.5C9.05228 7.25 9.5 6.80228 9.5 6.25V4.75C9.5 4.19772 9.05229 3.75 8.5 3.75H7Z" fill="#ff00ff"/>
 </svg>

src/platform/web/ui/css/themes/element/icons/encryption-status.svg

@@ -1,3 +1,3 @@
 <svg width="25" height="24" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9 19C9 19 18 15.2 18 9.50002V2.85001L9 1.52588e-05L0 2.85001L0 9.50002C0 15.2 9 19 9 19Z" fill="#C1C6CD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 19C9 19 18 15.2 18 9.50002V2.85001L9 1.52588e-05L0 2.85001L0 9.50002C0 15.2 9 19 9 19Z" fill="#ff00ff"/>
 </svg>

src/platform/web/ui/css/themes/element/icons/info.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10C12.8284 10 13.5 9.32843 13.5 8.5C13.5 7.67157 12.8284 7 12 7C11.1716 7 10.5 7.67157 10.5 8.5C10.5 9.32843 11.1716 10 12 10ZM11 13C10.4477 13 10 12.5523 10 12C10 11.4477 10.4477 11 11 11H12C12.5523 11 13 11.4477 13 12V15.5H13.5C14.0523 15.5 14.5 15.9477 14.5 16.5C14.5 17.0523 14.0523 17.5 13.5 17.5H12C11.4477 17.5 11 17.0523 11 16.5L11 13Z" fill="#8d99a5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10C12.8284 10 13.5 9.32843 13.5 8.5C13.5 7.67157 12.8284 7 12 7C11.1716 7 10.5 7.67157 10.5 8.5C10.5 9.32843 11.1716 10 12 10ZM11 13C10.4477 13 10 12.5523 10 12C10 11.4477 10.4477 11 11 11H12C12.5523 11 13 11.4477 13 12V15.5H13.5C14.0523 15.5 14.5 15.9477 14.5 16.5C14.5 17.0523 14.0523 17.5 13.5 17.5H12C11.4477 17.5 11 17.0523 11 16.5L11 13Z" fill="#ff00ff"/>
 </svg>

src/platform/web/ui/css/themes/element/icons/paperclip.svg

@@ -1,3 +1,3 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.099 9.51084L10.4407 17.1692C8.48696 19.1229 5.31938 19.1229 3.36567 17.1692C1.41196 15.2155 1.41196 12.0479 3.36567 10.0942L11.024 2.43584C12.3265 1.13337 14.4382 1.13337 15.7407 2.43584C17.0431 3.73831 17.0431 5.85003 15.7407 7.1525L8.074 14.8108C7.42277 15.4621 6.36691 15.4621 5.71567 14.8108C5.06444 14.1596 5.06444 13.1037 5.71567 12.4525L12.7907 5.38584" stroke="#61708B" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.099 9.51084L10.4407 17.1692C8.48696 19.1229 5.31938 19.1229 3.36567 17.1692C1.41196 15.2155 1.41196 12.0479 3.36567 10.0942L11.024 2.43584C12.3265 1.13337 14.4382 1.13337 15.7407 2.43584C17.0431 3.73831 17.0431 5.85003 15.7407 7.1525L8.074 14.8108C7.42277 15.4621 6.36691 15.4621 5.71567 14.8108C5.06444 14.1596 5.06444 13.1037 5.71567 12.4525L12.7907 5.38584" stroke="#ff00ff" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/platform/web/ui/css/themes/element/icons/plus.svg

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.74986 3.55554C8.74986 3.14133 8.41408 2.80554 7.99986 2.80554C7.58565 2.80554 7.24986 3.14133 7.24986 3.55554V7.24999L3.55542 7.24999C3.14121 7.24999 2.80542 7.58577 2.80542 7.99999C2.80542 8.4142 3.14121 8.74999 3.55542 8.74999L7.24987 8.74999V12.4444C7.24987 12.8586 7.58565 13.1944 7.99987 13.1944C8.41408 13.1944 8.74987 12.8586 8.74987 12.4444V8.74999L12.4443 8.74999C12.8585 8.74999 13.1943 8.4142 13.1943 7.99999C13.1943 7.58577 12.8585 7.24999 12.4443 7.24999L8.74986 7.24999V3.55554Z" fill="#8E99A4"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.74986 3.55554C8.74986 3.14133 8.41408 2.80554 7.99986 2.80554C7.58565 2.80554 7.24986 3.14133 7.24986 3.55554V7.24999L3.55542 7.24999C3.14121 7.24999 2.80542 7.58577 2.80542 7.99999C2.80542 8.4142 3.14121 8.74999 3.55542 8.74999L7.24987 8.74999V12.4444C7.24987 12.8586 7.58565 13.1944 7.99987 13.1944C8.41408 13.1944 8.74987 12.8586 8.74987 12.4444V8.74999L12.4443 8.74999C12.8585 8.74999 13.1943 8.4142 13.1943 7.99999C13.1943 7.58577 12.8585 7.24999 12.4443 7.24999L8.74986 7.24999V3.55554Z" fill="#ff00ff"/>
 </svg>

src/platform/web/ui/css/themes/element/icons/room-members.svg

@@ -2,6 +2,6 @@
 <mask id="path-1-inside-1" fill="white">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M18.1502 21.1214C16.3946 22.3074 14.2782 23 12 23C9.52367 23 7.23845 22.1817 5.4 20.8008C2.72821 18.794 1 15.5988 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 15.797 21.0762 19.1446 18.1502 21.1214ZM12 12.55C13.8225 12.55 15.3 10.9494 15.3 8.975C15.3 7.00058 13.8225 5.4 12 5.4C10.1775 5.4 8.7 7.00058 8.7 8.975C8.7 10.9494 10.1775 12.55 12 12.55ZM12 20.8C14.3782 20.8 16.536 19.8566 18.1197 18.3237C17.1403 15.9056 14.7693 14.2 12 14.2C9.23066 14.2 6.85969 15.9056 5.88028 18.3237C7.46399 19.8566 9.62183 20.8 12 20.8Z"/>
 </mask>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.1502 21.1214C16.3946 22.3074 14.2782 23 12 23C9.52367 23 7.23845 22.1817 5.4 20.8008C2.72821 18.794 1 15.5988 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 15.797 21.0762 19.1446 18.1502 21.1214ZM12 12.55C13.8225 12.55 15.3 10.9494 15.3 8.975C15.3 7.00058 13.8225 5.4 12 5.4C10.1775 5.4 8.7 7.00058 8.7 8.975C8.7 10.9494 10.1775 12.55 12 12.55ZM12 20.8C14.3782 20.8 16.536 19.8566 18.1197 18.3237C17.1403 15.9056 14.7693 14.2 12 14.2C9.23066 14.2 6.85969 15.9056 5.88028 18.3237C7.46399 19.8566 9.62183 20.8 12 20.8Z" fill="#C1C6CD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.1502 21.1214C16.3946 22.3074 14.2782 23 12 23C9.52367 23 7.23845 22.1817 5.4 20.8008C2.72821 18.794 1 15.5988 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 15.797 21.0762 19.1446 18.1502 21.1214ZM12 12.55C13.8225 12.55 15.3 10.9494 15.3 8.975C15.3 7.00058 13.8225 5.4 12 5.4C10.1775 5.4 8.7 7.00058 8.7 8.975C8.7 10.9494 10.1775 12.55 12 12.55ZM12 20.8C14.3782 20.8 16.536 19.8566 18.1197 18.3237C17.1403 15.9056 14.7693 14.2 12 14.2C9.23066 14.2 6.85969 15.9056 5.88028 18.3237C7.46399 19.8566 9.62183 20.8 12 20.8Z" fill="#ff00ff"/>
-<path d="M18.1502 21.1214L18.9339 22.2814L18.1502 21.1214ZM5.4 20.8008L4.55919 21.9202H4.55919L5.4 20.8008ZM18.1197 18.3237L19.0934 19.3296L19.7717 18.6731L19.4173 17.7981L18.1197 18.3237ZM5.88028 18.3237L4.58268 17.7981L4.22829 18.6731L4.90659 19.3296L5.88028 18.3237ZM12 24.4C14.5662 24.4 16.9541 23.619 18.9339 22.2814L17.3665 19.9613C15.835 20.9959 13.9902 21.6 12 21.6V24.4ZM4.55919 21.9202C6.63176 23.477 9.21011 24.4 12 24.4V21.6C9.83723 21.6 7.84514 20.8865 6.24081 19.6814L4.55919 21.9202ZM-0.399998 12C-0.399998 16.0577 1.55052 19.6603 4.55919 21.9202L6.24081 19.6814C3.90591 17.9276 2.4 15.1399 2.4 12H-0.399998ZM12 -0.399998C5.15167 -0.399998 -0.399998 5.15167 -0.399998 12H2.4C2.4 6.69807 6.69807 2.4 12 2.4V-0.399998ZM24.4 12C24.4 5.15167 18.8483 -0.399998 12 -0.399998V2.4C17.3019 2.4 21.6 6.69807 21.6 12H24.4ZM18.9339 22.2814C22.2288 20.0554 24.4 16.2815 24.4 12H21.6C21.6 15.3124 19.9236 18.2337 17.3665 19.9613L18.9339 22.2814ZM13.9 8.975C13.9 10.2838 12.9459 11.15 12 11.15V13.95C14.6991 13.95 16.7 11.615 16.7 8.975H13.9ZM12 6.8C12.9459 6.8 13.9 7.66616 13.9 8.975H16.7C16.7 6.335 14.6991 4 12 4V6.8ZM10.1 8.975C10.1 7.66616 11.0541 6.8 12 6.8V4C9.30086 4 7.3 6.335 7.3 8.975H10.1ZM12 11.15C11.0541 11.15 10.1 10.2838 10.1 8.975H7.3C7.3 11.615 9.30086 13.95 12 13.95V11.15ZM17.146 17.3178C15.8129 18.6081 14.0004 19.4 12 19.4V22.2C14.756 22.2 17.2591 21.1051 19.0934 19.3296L17.146 17.3178ZM12 15.6C14.1797 15.6 16.0494 16.9415 16.8221 18.8493L19.4173 17.7981C18.2312 14.8697 15.359 12.8 12 12.8V15.6ZM7.17788 18.8493C7.95058 16.9415 9.8203 15.6 12 15.6V12.8C8.64102 12.8 5.7688 14.8697 4.58268 17.7981L7.17788 18.8493ZM12 19.4C9.99963 19.4 8.18709 18.6081 6.85397 17.3178L4.90659 19.3296C6.74088 21.1051 9.24402 22.2 12 22.2V19.4Z" fill="#C1C6CD" mask="url(#path-1-inside-1)"/>
+<path d="M18.1502 21.1214L18.9339 22.2814L18.1502 21.1214ZM5.4 20.8008L4.55919 21.9202H4.55919L5.4 20.8008ZM18.1197 18.3237L19.0934 19.3296L19.7717 18.6731L19.4173 17.7981L18.1197 18.3237ZM5.88028 18.3237L4.58268 17.7981L4.22829 18.6731L4.90659 19.3296L5.88028 18.3237ZM12 24.4C14.5662 24.4 16.9541 23.619 18.9339 22.2814L17.3665 19.9613C15.835 20.9959 13.9902 21.6 12 21.6V24.4ZM4.55919 21.9202C6.63176 23.477 9.21011 24.4 12 24.4V21.6C9.83723 21.6 7.84514 20.8865 6.24081 19.6814L4.55919 21.9202ZM-0.399998 12C-0.399998 16.0577 1.55052 19.6603 4.55919 21.9202L6.24081 19.6814C3.90591 17.9276 2.4 15.1399 2.4 12H-0.399998ZM12 -0.399998C5.15167 -0.399998 -0.399998 5.15167 -0.399998 12H2.4C2.4 6.69807 6.69807 2.4 12 2.4V-0.399998ZM24.4 12C24.4 5.15167 18.8483 -0.399998 12 -0.399998V2.4C17.3019 2.4 21.6 6.69807 21.6 12H24.4ZM18.9339 22.2814C22.2288 20.0554 24.4 16.2815 24.4 12H21.6C21.6 15.3124 19.9236 18.2337 17.3665 19.9613L18.9339 22.2814ZM13.9 8.975C13.9 10.2838 12.9459 11.15 12 11.15V13.95C14.6991 13.95 16.7 11.615 16.7 8.975H13.9ZM12 6.8C12.9459 6.8 13.9 7.66616 13.9 8.975H16.7C16.7 6.335 14.6991 4 12 4V6.8ZM10.1 8.975C10.1 7.66616 11.0541 6.8 12 6.8V4C9.30086 4 7.3 6.335 7.3 8.975H10.1ZM12 11.15C11.0541 11.15 10.1 10.2838 10.1 8.975H7.3C7.3 11.615 9.30086 13.95 12 13.95V11.15ZM17.146 17.3178C15.8129 18.6081 14.0004 19.4 12 19.4V22.2C14.756 22.2 17.2591 21.1051 19.0934 19.3296L17.146 17.3178ZM12 15.6C14.1797 15.6 16.0494 16.9415 16.8221 18.8493L19.4173 17.7981C18.2312 14.8697 15.359 12.8 12 12.8V15.6ZM7.17788 18.8493C7.95058 16.9415 9.8203 15.6 12 15.6V12.8C8.64102 12.8 5.7688 14.8697 4.58268 17.7981L7.17788 18.8493ZM12 19.4C9.99963 19.4 8.18709 18.6081 6.85397 17.3178L4.90659 19.3296C6.74088 21.1051 9.24402 22.2 12 22.2V19.4Z" fill="#ff00ff" mask="url(#path-1-inside-1)"/>
 </svg>

src/platform/web/ui/css/themes/element/icons/search.svg

@@ -1,3 +1,3 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1333 6.06667C10.1333 8.31262 8.31262 10.1333 6.06667 10.1333C3.82071 10.1333 2 8.31262 2 6.06667C2 3.82071 3.82071 2 6.06667 2C8.31262 2 10.1333 3.82071 10.1333 6.06667ZM10.9992 9.59936C11.7131 8.60443 12.1333 7.38463 12.1333 6.06667C12.1333 2.71614 9.41719 0 6.06667 0C2.71614 0 0 2.71614 0 6.06667C0 9.41719 2.71614 12.1333 6.06667 12.1333C7.38457 12.1333 8.60431 11.7131 9.59922 10.9993C9.62742 11.0369 9.65861 11.0729 9.6928 11.1071L12.2928 13.7071C12.6833 14.0977 13.3165 14.0977 13.707 13.7071C14.0975 13.3166 14.0975 12.6834 13.707 12.2929L11.107 9.69292C11.0728 9.65874 11.0368 9.62756 10.9992 9.59936Z" fill="#8D99A5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1333 6.06667C10.1333 8.31262 8.31262 10.1333 6.06667 10.1333C3.82071 10.1333 2 8.31262 2 6.06667C2 3.82071 3.82071 2 6.06667 2C8.31262 2 10.1333 3.82071 10.1333 6.06667ZM10.9992 9.59936C11.7131 8.60443 12.1333 7.38463 12.1333 6.06667C12.1333 2.71614 9.41719 0 6.06667 0C2.71614 0 0 2.71614 0 6.06667C0 9.41719 2.71614 12.1333 6.06667 12.1333C7.38457 12.1333 8.60431 11.7131 9.59922 10.9993C9.62742 11.0369 9.65861 11.0729 9.6928 11.1071L12.2928 13.7071C12.6833 14.0977 13.3165 14.0977 13.707 13.7071C14.0975 13.3166 14.0975 12.6834 13.707 12.2929L11.107 9.69292C11.0728 9.65874 11.0368 9.62756 10.9992 9.59936Z" fill="#ff00ff"/>
 </svg>

src/platform/web/ui/css/themes/element/icons/send.svg

@@ -1,3 +1,3 @@
 <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.7372 8.96458L1.89656 15.8816C0.963879 16.3478 -0.00645849 15.3477 0.449387 14.4353C0.449387 14.4353 2.16481 10.9711 2.63665 10.0637C3.10849 9.15633 3.64864 8.99926 8.6646 8.35098C8.85021 8.32697 9.00215 8.1869 9.00215 7.99982C9.00215 7.81307 8.85021 7.67301 8.6646 7.649C3.64864 7.00071 3.10849 6.84364 2.63665 5.93624C2.16481 5.02918 0.449387 1.56465 0.449387 1.56465C-0.00645849 0.65258 0.963879 -0.347862 1.89656 0.118344L15.7372 7.03573C16.5319 7.43257 16.5319 8.5674 15.7372 8.96458Z" fill="white"/>
+<path d="M15.7372 8.96458L1.89656 15.8816C0.963879 16.3478 -0.00645849 15.3477 0.449387 14.4353C0.449387 14.4353 2.16481 10.9711 2.63665 10.0637C3.10849 9.15633 3.64864 8.99926 8.6646 8.35098C8.85021 8.32697 9.00215 8.1869 9.00215 7.99982C9.00215 7.81307 8.85021 7.67301 8.6646 7.649C3.64864 7.00071 3.10849 6.84364 2.63665 5.93624C2.16481 5.02918 0.449387 1.56465 0.449387 1.56465C-0.00645849 0.65258 0.963879 -0.347862 1.89656 0.118344L15.7372 7.03573C16.5319 7.43257 16.5319 8.5674 15.7372 8.96458Z" fill="#ff00ff"/>
 </svg>

src/platform/web/ui/css/themes/element/icons/settings.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.3625 9.2875C19.5625 9.8125 20.075 10.1625 20.6375 10.1625C21.3875 10.1625 22 10.775 22 11.525V12.475C22 13.225 21.3875 13.8375 20.6375 13.8375C20.075 13.8375 19.5625 14.1875 19.3625 14.7125C19.346 14.7538 19.3294 14.7958 19.3128 14.838C19.2538 14.9876 19.1932 15.1413 19.125 15.2875C18.8875 15.8 19 16.4 19.4 16.8C19.9375 17.325 19.9375 18.1875 19.4 18.725L18.725 19.4C18.2 19.9375 17.3375 19.9375 16.8 19.4C16.4125 19 15.8 18.8875 15.2875 19.125C15.1 19.2125 14.9125 19.2875 14.7125 19.3625C14.1875 19.5625 13.8375 20.075 13.8375 20.6375C13.8375 21.3875 13.225 22 12.475 22H11.525C10.775 22 10.1625 21.3875 10.1625 20.6375C10.1625 20.075 9.8125 19.5625 9.2875 19.3625C9.24617 19.346 9.20423 19.3294 9.16195 19.3128C9.01243 19.2538 8.85867 19.1932 8.7125 19.125C8.2 18.8875 7.6 19 7.2 19.4C6.675 19.9375 5.8125 19.9375 5.275 19.4L4.6 18.725C4.0625 18.2 4.0625 17.3375 4.6 16.8C5 16.4125 5.1125 15.8 4.875 15.2875C4.7875 15.1 4.7125 14.9125 4.6375 14.7125C4.4375 14.1875 3.925 13.8375 3.3625 13.8375C2.6125 13.8375 2 13.225 2 12.475V11.525C2 10.775 2.6125 10.1625 3.3625 10.1625C3.925 10.1625 4.4375 9.8125 4.6375 9.2875C4.67694 9.16129 4.72634 9.04005 4.77627 8.91751C4.80546 8.84587 4.83483 8.77379 4.8625 8.7C5.1 8.1875 4.9875 7.5875 4.5875 7.1875C4.05 6.6625 4.05 5.8 4.5875 5.2625L5.275 4.6C5.8 4.0625 6.6625 4.0625 7.2 4.6C7.5875 5 8.2 5.1125 8.7125 4.875C8.9 4.7875 9.0875 4.7 9.2875 4.6375C9.8125 4.4375 10.1625 3.925 10.1625 3.3625C10.1625 2.6125 10.775 2 11.525 2H12.475C13.225 2 13.8375 2.6125 13.8375 3.3625C13.8375 3.9375 14.1875 4.4375 14.7125 4.6375C14.7538 4.65403 14.7958 4.67056 14.838 4.68723C14.9876 4.74617 15.1413 4.80679 15.2875 4.875C15.8 5.1125 16.4 5 16.8 4.6C17.325 4.0625 18.1875 4.0625 18.725 4.6L19.4 5.275C19.9375 5.8 19.9375 6.6625 19.4 7.2C19 7.5875 18.8875 8.2 19.125 8.7125C19.2125 8.9 19.2875 9.0875 19.3625 9.2875ZM12 17C9.2375 17 7 14.7625 7 12C7 9.2375 9.2375 7 12 7C14.7625 7 17 9.2375 17 12C17 14.7625 14.7625 17 12 17Z" fill="#8D99A5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.3625 9.2875C19.5625 9.8125 20.075 10.1625 20.6375 10.1625C21.3875 10.1625 22 10.775 22 11.525V12.475C22 13.225 21.3875 13.8375 20.6375 13.8375C20.075 13.8375 19.5625 14.1875 19.3625 14.7125C19.346 14.7538 19.3294 14.7958 19.3128 14.838C19.2538 14.9876 19.1932 15.1413 19.125 15.2875C18.8875 15.8 19 16.4 19.4 16.8C19.9375 17.325 19.9375 18.1875 19.4 18.725L18.725 19.4C18.2 19.9375 17.3375 19.9375 16.8 19.4C16.4125 19 15.8 18.8875 15.2875 19.125C15.1 19.2125 14.9125 19.2875 14.7125 19.3625C14.1875 19.5625 13.8375 20.075 13.8375 20.6375C13.8375 21.3875 13.225 22 12.475 22H11.525C10.775 22 10.1625 21.3875 10.1625 20.6375C10.1625 20.075 9.8125 19.5625 9.2875 19.3625C9.24617 19.346 9.20423 19.3294 9.16195 19.3128C9.01243 19.2538 8.85867 19.1932 8.7125 19.125C8.2 18.8875 7.6 19 7.2 19.4C6.675 19.9375 5.8125 19.9375 5.275 19.4L4.6 18.725C4.0625 18.2 4.0625 17.3375 4.6 16.8C5 16.4125 5.1125 15.8 4.875 15.2875C4.7875 15.1 4.7125 14.9125 4.6375 14.7125C4.4375 14.1875 3.925 13.8375 3.3625 13.8375C2.6125 13.8375 2 13.225 2 12.475V11.525C2 10.775 2.6125 10.1625 3.3625 10.1625C3.925 10.1625 4.4375 9.8125 4.6375 9.2875C4.67694 9.16129 4.72634 9.04005 4.77627 8.91751C4.80546 8.84587 4.83483 8.77379 4.8625 8.7C5.1 8.1875 4.9875 7.5875 4.5875 7.1875C4.05 6.6625 4.05 5.8 4.5875 5.2625L5.275 4.6C5.8 4.0625 6.6625 4.0625 7.2 4.6C7.5875 5 8.2 5.1125 8.7125 4.875C8.9 4.7875 9.0875 4.7 9.2875 4.6375C9.8125 4.4375 10.1625 3.925 10.1625 3.3625C10.1625 2.6125 10.775 2 11.525 2H12.475C13.225 2 13.8375 2.6125 13.8375 3.3625C13.8375 3.9375 14.1875 4.4375 14.7125 4.6375C14.7538 4.65403 14.7958 4.67056 14.838 4.68723C14.9876 4.74617 15.1413 4.80679 15.2875 4.875C15.8 5.1125 16.4 5 16.8 4.6C17.325 4.0625 18.1875 4.0625 18.725 4.6L19.4 5.275C19.9375 5.8 19.9375 6.6625 19.4 7.2C19 7.5875 18.8875 8.2 19.125 8.7125C19.2125 8.9 19.2875 9.0875 19.3625 9.2875ZM12 17C9.2375 17 7 14.7625 7 12C7 9.2375 9.2375 7 12 7C14.7625 7 17 9.2375 17 12C17 14.7625 14.7625 17 12 17Z" fill="#ff00ff"/>
 </svg>

src/platform/web/ui/css/themes/element/icons/vertical-ellipsis.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.154 16.662C13.154 16.158 12.776 15.836 12.272 15.836C11.754 15.836 11.39 16.158 11.39 16.662C11.39 17.152 11.754 17.488 12.272 17.488C12.776 17.502 13.154 17.152 13.154 16.662ZM13.154 12C13.154 11.496 12.776 11.16 12.272 11.16C11.754 11.174 11.39 11.496 11.39 11.986C11.39 12.476 11.754 12.826 12.272 12.826C12.776 12.84 13.154 12.49 13.154 12ZM13.154 7.338C13.154 6.82 12.776 6.498 12.272 6.498C11.754 6.498 11.39 6.834 11.39 7.324C11.39 7.814 11.754 8.164 12.272 8.164C12.776 8.164 13.154 7.828 13.154 7.338Z" fill="#454545"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.154 16.662C13.154 16.158 12.776 15.836 12.272 15.836C11.754 15.836 11.39 16.158 11.39 16.662C11.39 17.152 11.754 17.488 12.272 17.488C12.776 17.502 13.154 17.152 13.154 16.662ZM13.154 12C13.154 11.496 12.776 11.16 12.272 11.16C11.754 11.174 11.39 11.496 11.39 11.986C11.39 12.476 11.754 12.826 12.272 12.826C12.776 12.84 13.154 12.49 13.154 12ZM13.154 7.338C13.154 6.82 12.776 6.498 12.272 6.498C11.754 6.498 11.39 6.834 11.39 7.324C11.39 7.814 11.754 8.164 12.272 8.164C12.776 8.164 13.154 7.828 13.154 7.338Z" fill="#ff00ff"/>
 </svg>

src/platform/web/ui/css/themes/element/manifest.json

@@ -0,0 +1,45 @@
+{
+	"version": 1,
+	"name": "element",
+	"values": {
+		"font-faces": [
+			{
+				"font-family": "Inter",
+				"src": [{"asset": "/fonts/Inter.ttf", "format": "ttf"}]
+			}
+		],
+		"variants": {
+			"light": {
+				"base": true,
+				"default": true,
+				"name": "Light",
+				"variables": {
+					"background-color-primary": "#fff",
+                    "background-color-secondary": "#f6f6f6",
+					"text-color": "#2E2F32",
+                    "accent-color": "#03b381",
+                    "error-color": "#FF4B55",
+                    "fixed-white": "#fff",
+                    "room-badge": "#61708b",
+                    "link-color": "#238cf5"
+				}
+			},
+			"dark": {
+				"dark": true,
+				"default": true,
+				"name": "Dark",
+				"variables": {
+					"background-color-primary": "#21262b",
+                    "background-color-secondary": "#2D3239",
+					"text-color": "#fff",
+                    "accent-color": "#03B381",
+                    "error-color": "#FF4B55",
+                    "fixed-white": "#fff",
+                    "room-badge": "#61708b",
+                    "link-color": "#238cf5"
+				}
+			}
+		}
+	}
+}
+

src/platform/web/ui/css/themes/element/theme.css

@@ -15,17 +15,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+@import url('../../main.css');
 @import url('inter.css');
 @import url('timeline.css');
 
 :root {
     font-size: 10px;
+    /* Theme aliases */
+    --icon-color: var(--background-color-secondary--darker-40);
+    --light-border: var(--background-color-secondary--darker-5);
+    --light-text-color: var(--background-color-secondary--darker-55);
+    --timeline-time-text-color: var(--background-color-secondary--darker-35);
+    --icon-background: var(--background-color-secondary--darker-7);
+    --right-panel-text-color: var(--background-color-secondary--darker-35);
 }
 
 .hydrogen {
     font-family: 'Inter', sans-serif, 'emoji';
-    background-color: white;
+    background-color: var(--background-color-primary);
-    color: #2e2f32;
+    color: var(--text-color);
     font-size: 1.4rem;
     --usercolor1: #368BD6;
     --usercolor2: #AC3BA8;
@@ -43,8 +51,8 @@ limitations under the License.
 
 .avatar {
     border-radius: 100%;
-    background: #fff;
+    background: var(--background-color-primary);
-    color: white;
+    color: var(--fixed-white);
 }
 
 .hydrogen .avatar.usercolor1 { background-color: var(--usercolor1); }
@@ -59,7 +67,7 @@ limitations under the License.
 .logo {
     height: 48px;
     min-width: 48px;
-    background-image: url('element-logo.svg');
+    background-image: url('element-logo.svg?primary=accent-color');
     background-repeat: no-repeat;
     background-position: center;
 }
@@ -82,6 +90,8 @@ limitations under the License.
 
 .form-row.text textarea {
     font-family: "Inter", sans-serif;
+    background-color: var(--background-color-secondary);
+    color: inherit;
 }
 
 .form-group {
@@ -94,11 +104,13 @@ limitations under the License.
 
 .form-row.text > input, .form-row.text > textarea {
     padding: 12px;
-    border: 1px solid rgba(141, 151, 165, 0.15);
+    border: 1px solid var(--light-border);
     border-radius: 8px;
     margin-top: 5px;
     font-size: 1em;
     resize: vertical;
+    background-color: var(--background-color-secondary);
+    color: inherit;
 }
 
 .form-row.check {
@@ -113,7 +125,7 @@ limitations under the License.
 
 .form-row .form-row-description {
     font-size: 1rem;
-    color: #777;
+    color: var(--light-text-color);
     margin: 8px 0 0 0;
 }
 
@@ -129,26 +141,26 @@ a.button-action {
 
 
 .button-action.secondary {
-    color: #03B381;
+    color: var(--accent-color);
 }
 
 .button-action.primary {
-    background-color: #03B381;
+    background-color: var(--accent-color);
     border-radius: 8px;
-    color: white;
+    color: var(--fixed-white);
     font-weight: bold;
 }
 
 .button-action.primary:disabled {
-    color: #fffa;
+    color: var(--fixed-white--darker-10);
 }
 
 .button-action.primary.destructive {
-    background-color: #FF4B55;
+    background-color: var(--error-color);
 }
 
 .button-action.secondary.destructive {
-    color: #FF4B55;
+    color: var(--error-color);
 }
 
 .button-action {
@@ -163,7 +175,7 @@ a.button-action {
     width: 32px;
     height: 32px;
     background-position: center;
-    background-color: #e1e3e6;
+    background-color: var(--icon-background);
     background-repeat: no-repeat;
     border: none;
     border-radius: 100%;
@@ -171,26 +183,26 @@ a.button-action {
 }
 
 .button-utility.grid {
-    background-image: url('icons/enable-grid.svg');
+    background-image: url('icons/enable-grid.svg?primary=icon-color');
 }
 
 .button-utility.settings {
-    background-image: url('icons/settings.svg');
+    background-image: url('icons/settings.svg?primary=icon-color');
 }
 
 .button-utility.create {
-    background-image: url('icons/plus.svg');
+    background-image: url('icons/plus.svg?primary=icon-color');
 }
 
 .button-utility.grid.on {
-    background-image: url('icons/disable-grid.svg');
+    background-image: url('icons/disable-grid.svg?primary=icon-color');
 }
 
 .FilterField {
-    background-image: url('icons/search.svg');
+    background-image: url('icons/search.svg?primary=icon-color');
     background-repeat: no-repeat;
     background-position: 8px center;
-    background-color: #e1e3e6;
+    background-color: var(--icon-background);
     /* to prevent jumps when adding a border on focus */
     border: 1px solid transparent;
     border-radius: 16px;
@@ -201,11 +213,12 @@ a.button-action {
 }
 
 .FilterField:focus-within {
-    border: 1px #e1e3e6 solid;
+    border: 1px var(--icon-background) solid;
-    background-color: white;
+    background-color: var(--background-color-primary);
 }
+
 .FilterField:focus-within button {
-    border-color: white;
+    border-color: var(--background-color-primary);
 }
 
 /*.FilterField:not(:focus-within) button {
@@ -221,15 +234,16 @@ a.button-action {
     border: none;
     background-color: transparent;
     height: 100%;
+    color: var(--text-color);
 }
 
 .FilterField button {
     width: 30px; /* 32 - 1 (top) - 1 (bottom) */
     height: 30px; /* 32 - 1 (top) - 1 (bottom) */
     background-position: center;
-    background-color: #e1e3e6;
+    background-color: var(--icon-background);
     background-repeat: no-repeat;
-    background-image: url('icons/clear.svg');
+    background-image: url('icons/clear.svg?primary=icon-color');
     border: 7px solid transparent; /* 8 - 1 */
     border-radius: 100%;
     box-sizing: border-box;
@@ -249,12 +263,12 @@ a.button-action {
 }
 
 .StartSSOLoginView_button {
-    border: 1px solid #03B381;
+    border: 1px solid var(--accent-color);
     border-radius: 8px;
 }
 
 .LoginView_back {
-    background-image: url("./icons/chevron-left.svg");
+    background-image: url("./icons/chevron-left.svg?primary=icon-color");
     background-color: transparent;
 }
 
@@ -266,7 +280,7 @@ a.button-action {
 .LoginView_forwardInfo {
     font-size: 0.9em;
     margin-left: 1em;
-    color: #777;
+    color: var(--light-text-color);
 }
 
 .CompleteSSOView_title {
@@ -275,6 +289,7 @@ a.button-action {
 
 @media screen and (min-width: 600px) {
     .PreSessionScreen {
+        /* needs transparency support */
         box-shadow: 0px 6px 32px rgba(0, 0, 0, 0.1);
         border-radius: 8px;
     }
@@ -286,7 +301,7 @@ a.button-action {
 }
 
 .LeftPanel {
-    background: rgba(245, 245, 245, 0.90);
+    background: var(--background-color-secondary);
     font-size: 1.5rem;
     padding: 12px 8px 0 8px;
 }
@@ -300,7 +315,7 @@ a.button-action {
 }
 
 .LeftPanel .filter {
-    border-bottom: 1px solid rgba(245, 245, 245, 0.90);
+    border-bottom: 1px solid var(--background-color-secondary);
 }
 
 .LeftPanel .filter input {
@@ -335,7 +350,7 @@ a.button-action {
 }
 
 .RoomList li.active {
-    background: rgba(141, 151, 165, 0.1);
+    background: var(--background-color-secondary--darker-7);
     border-radius: 5px;
 }
 
@@ -357,8 +372,8 @@ a.button-action {
     border-radius: 1.6rem;
     box-sizing: border-box;
     padding: 0.1rem 0.3rem;
-    background-color: #61708b;
+    background-color: var(--room-badge);
-    color: white;
+    color: var(--fixed-white);
     font-weight: bold;
     font-size: 1rem;
     line-height: 1.4rem;
@@ -366,7 +381,7 @@ a.button-action {
 }
 
 .RoomList .badge.highlighted {
-    background-color: #ff4b55;
+    background-color: var(--error-color);
 }
 
 a {
@@ -376,8 +391,8 @@ a {
 .SessionStatusView {
     padding: 4px;
     min-height: 22px;
-    background-color: #03B381;
+    background-color: var(--accent-color);
-    color: white;
+    color: var(--fixed-white);
     align-items: center;
 }
 
@@ -386,7 +401,7 @@ a {
     text-align: left;
 }
 
-.SessionStatusView > .end {
+.SessionStatusView>.end {
     flex: 1;
     display: flex;
     justify-content: flex-end;
@@ -397,7 +412,7 @@ a {
 .SessionStatusView .dismiss {
     border: none;
     background: none;
-    background-image: url('icons/dismiss.svg');
+    background-image: url('icons/dismiss.svg?primary=background-color-primary');
     background-position: center;
     background-repeat: no-repeat;
     width: 32px;
@@ -418,9 +433,9 @@ a {
 .SessionPickerView .session-info {
     text-decoration: none;
     padding: 12px;
-    border: 1px solid rgba(141, 151, 165, 0.15);
+    border: 1px solid var(--light-border);
     border-radius: 8px;
-    background-image: url('icons/chevron-right.svg');
+    background-image: url('./icons/chevron-right.svg?primary=icon-color');
     background-position: center right 30px;
     background-repeat: no-repeat;
     font-weight: 500;
@@ -445,12 +460,12 @@ a {
 }
 
 .SessionPickerView button.destructive {
-    color: #FF4B55;
+    color: var(--error-color);
 }
 
 .RoomGridView > div.container {
-    border-right: 1px solid rgba(245, 245, 245, 0.90);
+    border-right: 1px solid var(--background-color-secondary);
-    border-bottom: 1px solid rgba(245, 245, 245, 0.90);
+    border-bottom: 1px solid var(--background-color-secondary);
 }
 
 .RoomGridView > .focused > .room-placeholder .unfocused {
@@ -462,21 +477,21 @@ a {
 }
 
 .room-placeholder .unfocused {
-    color: #8D99A5;
+    color: var(--right-panel-text-color);
 }
 
 
 .RoomGridView > div.focus-ring {
-    border: 2px solid rgba(134, 193, 165, 1);
+    border: 2px solid var(--accent-color--darker-5);
     border-radius: 12px;
 }
 
 .middle-header {
     box-sizing: border-box;
     flex: 0 0 56px; /* 12 + 32 + 12 to align with filter field + margin */
-    background: white;
+    background: var(--background-color-primary);
     padding: 0 16px;
-    border-bottom: 1px solid rgba(245, 245, 245, 0.90);
+    border-bottom: 1px solid var(--background-color-secondary);
 }
 
 .middle-header h2 {
@@ -492,7 +507,7 @@ a {
 }
 
 .close-middle, .close-session {
-    background-image: url('icons/chevron-left.svg');
+    background-image: url('icons/chevron-left.svg?primary=icon-color');
     background-position-x: 10px;
 }
 
@@ -501,15 +516,11 @@ a {
 }
 
 .RoomHeader .room-options {
-    background-image: url("./icons/vertical-ellipsis.svg");
+    background-image: url("./icons/vertical-ellipsis.svg?primary=icon-color");
-}
-
-.RoomHeader .room-info {
-    background-image: url("./icons/info.svg");
 }
 
 .RoomView_error {
-    color: red;
+    color: var(--error-color);
 }
 
 .MessageComposer_replyPreview .Timeline_message {
@@ -520,9 +531,9 @@ a {
 }
 
 .MessageComposer_replyPreview {
-    background: rgba(245, 245, 245, 0.90);
+    background: var(--background-color-secondary);
     margin: 0px 10px 10px 10px;
-    box-shadow: 0px 0px 5px #91919169;
+    box-shadow: 0px 0px 5px var(--background-color-secondary--darker-15);
     border-radius: 5px;
 }
 
@@ -546,7 +557,7 @@ a {
     white-space: nowrap;
     overflow: hidden;
     background-color: transparent;
-    background-image: url('icons/clear.svg');
+    background-image: url('icons/clear.svg?primary=icon-color');
     background-repeat: no-repeat;
     background-position: center;
     background-size: 18px;
@@ -554,7 +565,7 @@ a {
 }
 
 .MessageComposer_input:first-child {
-    border-top: 1px solid rgba(245, 245, 245, 0.90);
+    border-top: 1px solid var(--background-color-secondary);
 }
 
 .MessageComposer_input > :not(:first-child) {
@@ -564,7 +575,8 @@ a {
 .MessageComposer_input > textarea {
     border: none;
     border-radius: 24px;
-    background: #F6F6F6;
+    background: var(--background-color-secondary);
+    color: inherit;
     font-size: 14px;
     font-family: "Inter", sans-serif;
     resize: none;
@@ -586,8 +598,8 @@ a {
     text-indent: 200%;
     overflow: hidden;
 
-    background-color: #03B381;
+    background-color: var(--accent-color);
-    background-image: url('icons/send.svg');
+    background-image: url('icons/send.svg?primary=background-color-primary');
     background-repeat: no-repeat;
     background-position: center;
     align-self: end;
@@ -603,7 +615,7 @@ a {
     white-space: nowrap;
     overflow: hidden;
     background-color: transparent;
-    background-image: url('icons/paperclip.svg');
+    background-image: url('icons/paperclip.svg?primary=icon-color');
     background-repeat: no-repeat;
     background-position: center;
 }
@@ -682,7 +694,7 @@ a {
 }
 
 .error {
-    color: red;
+    color: var(--error-color);
     font-weight: 600;
 }
 
@@ -694,21 +706,23 @@ button.link {
     cursor: pointer;
     margin: -12px;
     padding: 12px;
+    color: inherit;
 }
 
 .Settings a, .Settings .link {
-    color: #03B381;
+    color: var(--accent-color);
     font-weight: 600;
 }
 
 .lightbox {
-    background-color: rgba(0,0,0,0.75);
+    /* needs transparency support */
+    background-color: rgba(0, 0, 0, 0.75);
     display: grid;
     grid-template:
         "content close"   auto
         "content details" 1fr /
         1fr      auto;
-    color: white;
+    color: var(--background-color-primary);
     padding: 4px;
 }
 
@@ -752,7 +766,7 @@ button.link {
     display: block;
     grid-area: close;
     justify-self: end;
-    background-image: url('icons/dismiss.svg');
+    background-image: url('icons/dismiss.svg?primary=fixed-white');
     background-position: center;
     background-size: 16px;
     background-repeat: no-repeat;
@@ -770,9 +784,10 @@ button.link {
 
 .menu {
     border-radius: 8px;
+    /* needs transparency support */
     box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
     padding: 4px;
-    background-color: white;
+    background-color: var(--background-color-primary);
     list-style: none;
     margin: 0;
 }
@@ -781,6 +796,10 @@ button.link {
     margin-bottom: 10px;
 }
 
+.menu .menu-item {
+    color: var(--text-color);
+}
+
 .menu button {
     border-radius: 4px;
     border: none;
@@ -793,7 +812,7 @@ button.link {
 }
 
 .menu .destructive button {
-    color: #FF4B55;
+    color: var(--error-color);
 }
 
 .menu .quick-reactions {
@@ -842,7 +861,7 @@ button.link {
     grid-area: description;
     font-size: 1.2rem;
     margin: 0;
-    color: #777;
+    color: var(--light-text-color);
 }
 
 .InviteView_roomAvatar {
@@ -877,7 +896,7 @@ button.link {
 
 .RoomArchivedView {
     padding: 12px;
-    background-color: rgba(245, 245, 245, 0.90);
+    background-color: var(--background-color-secondary);
 }
 
 .RoomArchivedView h3 {
@@ -914,7 +933,7 @@ button.link {
 /* Right Panel */
 
 .RightPanelView {
-    background: rgba(245, 245, 245, 0.90);
+    background: var(--background-color-secondary);
 }
 
 .RoomDetailsView {
@@ -923,7 +942,7 @@ button.link {
 }
 
 .RoomDetailsView_id, .MemberDetailsView_id {
-    color: #737D8C;
+    color: var(--right-panel-text-color);
     font-size: 12px;
 }
 
@@ -952,7 +971,7 @@ button.RoomDetailsView_row {
 }
 
 button.RoomDetailsView_row::after {
-    content: url("./icons/chevron-small.svg");
+    content: url("./icons/chevron-small.svg?primary=icon-color");
     margin-left: 12px;
 }
 
@@ -972,16 +991,16 @@ button.RoomDetailsView_row::after {
 }
 
 .RoomDetailsView_value {
-    color: #737D8C;
+    color: var(--right-panel-text-color);
     flex: 1;
 }
 
 .MemberCount::before {
-    content: url("./icons/room-members.svg");
+    content: url("./icons/room-members.svg?primary=icon-color");
 }
 
 .EncryptionStatus::before {
-    content: url("./icons/encryption-status.svg");
+    content: url("./icons/encryption-status.svg?primary=icon-color");
 }
 
 /* Encryption icon next to avatar */
@@ -990,8 +1009,8 @@ button.RoomDetailsView_row::after {
     width: 52px;
     height: 52px;
     border-radius: 100%;
-    background: #737D8C;
+    background: var(--right-panel-text-color);
-    border: 3px solid #F2F5F8;
+    border: 3px solid var(--background-color-secondary);
     margin-left: -16px;
 }
 
@@ -1001,11 +1020,11 @@ button.RoomDetailsView_row::after {
 }
 
 .EncryptionIconView_encrypted {
-    content: url("./icons/e2ee-normal.svg");
+    content: url("./icons/e2ee-normal.svg?primary=fixed-white");
 }
 
 .EncryptionIconView_unencrypted {
-    content: url("./icons/e2ee-disabled.svg");
+    content: url("./icons/e2ee-disabled.svg?primary=fixed-white");
 }
 
 .RightPanelView_buttons .button-utility {
@@ -1014,11 +1033,11 @@ button.RoomDetailsView_row::after {
 }
 
 .RightPanelView_buttons .close {
-    background-image: url("./icons/clear.svg");
+    background-image: url("./icons/clear.svg?primary=icon-color");
 }
 
 .RightPanelView_buttons .back {
-    background-image: url("./icons/chevron-thin-left.svg");
+    background-image: url("./icons/chevron-thin-left.svg?primary=icon-color");
 }
 
 /* Memberlist Panel */
@@ -1059,7 +1078,7 @@ button.RoomDetailsView_row::after {
 .MemberDetailsView_label {
     font-size: 12px;
     font-weight: 600;
-    color: #8d99a5;
+    color: var(--right-panel-text-color);
     text-transform: uppercase;
 }
 
@@ -1075,7 +1094,7 @@ button.RoomDetailsView_row::after {
 }
 
 .MemberDetailsView_options a, .MemberDetailsView_options button {
-    color: #0dbd8b;
+    color: var(--accent-color);
     text-decoration: none;
     margin: 0 0 3px 0;
     padding: 0;
@@ -1130,8 +1149,8 @@ button.RoomDetailsView_row::after {
     width: 64px;
     height: 64px;
     border-radius: 100%;
-    background-color: #e1e3e6;
+    background-color: var(--icon-background);
-    background-image: url('icons/plus.svg');
+    background-image: url('icons/plus.svg?primary=icon-color');
     background-repeat: no-repeat;
     background-position: center;
     background-size: 36px;

src/platform/web/ui/css/themes/element/timeline.css

@@ -21,10 +21,10 @@ limitations under the License.
     bottom: 16px;
     right: 32px;
     border-radius: 100%;
-    border: 1px solid #8d99a5;
+    border: 1px solid var(--background-color-secondary--darker-7);
-    background-image: url("./icons/chevron-down.svg");
+    background-image: url("./icons/chevron-down.svg?primary=icon-color");
     background-position: center;
-    background-color: white;
+    background-color: var(--background-color-primary--darker-10);
     background-repeat: no-repeat;
     cursor: pointer;
 }
@@ -77,6 +77,7 @@ limitations under the License.
 }
 
 .Timeline_message:hover:not(.disabled), .Timeline_message.selected, .Timeline_message.menuOpen {
+    /* needs transparency support */
     background-color: rgba(141, 151, 165, 0.1);
     border-radius: 4px;
 }
@@ -119,10 +120,11 @@ limitations under the License.
     margin-top: -12px;
     margin-right: 4px;
     /* button visuals */
-    border: #ccc 1px solid;
+    border: var(--background-color-primary--darker-10) 1px solid;
     height: 24px;
     width: 24px;
-    background-color: #fff;
+    background-color: var(--background-color-primary);
+    color: inherit;
     border-radius: 4px;
     padding: 0;
     text-align: center;
@@ -142,12 +144,12 @@ limitations under the License.
 .Timeline_messageBody time, .Timeline_messageTime {
     font-size: 0.8em;
     line-height: normal;
-    color: #aaa;
+    color: var(--timeline-time-text-color);
 }
 
 .Timeline_messageBody.statusMessage {
     font-style: italic;
-    color: #777;
+    color: var(--light-text-color);
 }
 
 .Timeline_messageBody {
@@ -190,7 +192,7 @@ limitations under the License.
 }
 
 .Timeline_messageBody a.link {
-    color: #238cf5;
+    color: var(--link-color);
     text-decoration: none;
 }
 
@@ -221,6 +223,7 @@ so the timeline doesn't jump when the image loads */
     border-radius: 4px;
     display: block;
 }
+
 /* stretch the image (to the spacer) on platforms
 where we can trust the spacer to always have the correct height,
 otherwise the image starts with  height 0 and with loading=lazy
@@ -249,21 +252,24 @@ only loads when the top comes into view*/
 
 .Timeline_messageBody .media > time,
 .Timeline_messageBody .media > .sendStatus {
-    color: #2e2f32;
+    color: var(--text-color);
     display: block;
     padding: 2px;
     margin: 4px;
+    /* needs transparency support */
     background-color: rgba(255, 255, 255, 0.75);
     border-radius: 4px;
 }
+
 .Timeline_messageBody .media > .spacer {
     /* TODO: can we implement this with a pseudo element? or perhaps they are not grid items? */
     width: 100%;
     /* don't stretch height as it is a spacer, just in case it doesn't match with image height */
     align-self: start;
 }
+
 .Timeline_messageBody code, .Timeline_messageBody pre {
-    background-color: #f8f8f8;
+    background-color: var(--background-color-secondary);
     font-family: monospace;
     font-size: 0.9em;
 }
@@ -275,13 +281,13 @@ only loads when the top comes into view*/
 }
 
 .Timeline_messageBody pre {
-    border: 1px solid rgb(229, 229, 229);
+    border: 1px solid var(--light-border);
     padding: 0.5em;
     max-height: 30em;
     overflow: auto;
 }
 
-.Timeline_messageBody pre > code {
+.Timeline_messageBody pre>code {
     background-color: unset;
     border-radius: unset;
     display: block;
@@ -291,17 +297,17 @@ only loads when the top comes into view*/
 .Timeline_messageBody blockquote {
     margin-left: 0;
     padding-left: 20px;
-    border-left: 4px solid rgb(229, 229, 229);
+    border-left: 4px solid var(--light-border);
 }
 
 .Timeline_messageBody table {
-    border: 1px solid rgb(206, 206, 206);
+    border: 1px solid var(--background-color-secondary--darker-15);
     border-radius: 2px;
     border-spacing: 0;
 }
 
 .Timeline_messageBody thead th {
-    border-bottom: 1px solid rgb(206, 206, 206);
+    border-bottom: 1px solid var(--background-color-secondary--darker-15);
 }
 
 .Timeline_messageBody td, .Timeline_messageBody th {
@@ -309,14 +315,14 @@ only loads when the top comes into view*/
 }
 
 .Timeline_messageBody tbody tr:nth-child(2n) {
-    background-color: #f6f6f6;
+    background-color: var(--background-color-secondary);
 }
 
 .Timeline_messageBody .pill {
     padding: 0px 5px;
     border-radius: 15px;
-    background-color: #f6f6f6;
+    background-color: var(--background-color-secondary);
-    border: 1px solid rgb(206, 206, 206);
+    border: 1px solid var(--background-color-secondary--darker-10);
     text-decoration: none;
     display: inline-flex;
     align-items: center;
@@ -331,11 +337,11 @@ only loads when the top comes into view*/
 }
 
 .Timeline_message.unsent .Timeline_messageBody {
-    color: #ccc;
+    color: var(--light-text-color);
 }
 
 .Timeline_message.unverified .Timeline_messageBody {
-    color: #ff4b55;
+    color: var(--error-color);
 }
 
 .Timeline_messageReactions {
@@ -348,22 +354,28 @@ only loads when the top comes into view*/
     line-height: 2.0rem;
     margin-right: 6px;
     padding: 1px 6px;
-    border: 1px solid #e9edf1;
+    border: 1px solid var(--light-border);
     border-radius: 10px;
-    background-color: #f3f8fd;
+    background-color: var(--background-color-secondary);
+    color: inherit;
     cursor: pointer;
     user-select: none;
     vertical-align: middle;
 }
 
 .Timeline_messageReactions button.active {
-    background-color: #e9fff9;
+    background-color: var(--background-color-secondary);
-    border-color: #0DBD8B;
+    border-color: var(--accent-color);
 }
 
 @keyframes glow-reaction-border {
-    0% {   border-color: #e9edf1; }
+    0% {
-    100% { border-color: #0DBD8B; }
+        border-color: var(--background-color-secondary);
+    }
+
+    100% {
+        border-color: var(--accent-color);
+    }
 }
 
 .Timeline_messageReactions button.active.pending {
@@ -377,8 +389,8 @@ only loads when the top comes into view*/
 .Timeline_locationLink {
     padding: 0px 8px;
     border-radius: 16px;
-    border: 1px solid #e9edf1;
+    border: 1px solid var(--light-border);
-    background-color: #f3f8fd;
+    background-color: var(--background-color-secondary);
     text-decoration: none;
     display: inline-block;
     line-height: 2rem;
@@ -394,7 +406,7 @@ only loads when the top comes into view*/
 .AnnouncementView > div {
     margin: 0 auto;
     padding: 10px 20px;
-    background-color: rgba(245, 245, 245, 0.90);
+    background-color: var(--background-color-secondary);
     text-align: center;
     border-radius: 10px;
 }

vite.common-config.js

@@ -1,9 +1,15 @@
 const cssvariables = require("postcss-css-variables");
 const flexbugsFixes = require("postcss-flexbugs-fixes");
+const compileVariables = require("./scripts/postcss/css-compile-variables");
+const urlVariables = require("./scripts/postcss/css-url-to-variables");
+const urlProcessor = require("./scripts/postcss/css-url-processor");
 const fs = require("fs");
 const path = require("path");
 const manifest = require("./package.json");
 const version = manifest.version;
+const compiledVariables = new Map();
+const derive = require("./scripts/postcss/color").derive;
+const replacer = require("./scripts/postcss/svg-colorizer").buildColorizedSVG;
 
 const commonOptions = {
     logLevel: "warn",
@@ -32,11 +38,14 @@ const commonOptions = {
     css: {
         postcss: {
             plugins: [
-                cssvariables({
+                compileVariables({derive, compiledVariables}),
-                    preserve: (declaration) => {
+                urlVariables({compileVariables}),
-                        return declaration.value.indexOf("var(--ios-") == 0;
+                urlProcessor({replacer}),
-                    }
+                // cssvariables({
-                }),
+                //     preserve: (declaration) => {
+                //         return declaration.value.indexOf("var(--ios-") == 0;
+                //     }
+                // }),
                 // the grid option creates some source fragment that causes the vite warning reporter to crash because
                 // it wants to log a warning on a line that does not exist in the source fragment.
                 // autoprefixer({overrideBrowserslist: ["IE 11"], grid: "no-autoplace"}),
@@ -46,4 +55,4 @@ const commonOptions = {
     }
 };
 
-module.exports = commonOptions;
+module.exports = { commonOptions, compiledVariables };

vite.config.js

@@ -1,8 +1,9 @@
 const injectWebManifest = require("./scripts/build-plugins/manifest");
 const {injectServiceWorker, createPlaceholderValues} = require("./scripts/build-plugins/service-worker");
+const themeBuilder = require("./scripts/build-plugins/rollup-plugin-build-themes");
 const {defineConfig} = require('vite');
 const mergeOptions = require('merge-options').bind({concatArrays: true});
-const commonOptions = require("./vite.common-config.js");
+const {commonOptions, compiledVariables} = require("./vite.common-config.js");
 
 export default defineConfig(({mode}) => {
     const definePlaceholders = createPlaceholderValues(mode);
@@ -15,6 +16,13 @@ export default defineConfig(({mode}) => {
             sourcemap: true,
         },
         plugins: [
+            themeBuilder({
+                themeConfig: {
+                    themes: {"element": "./src/platform/web/ui/css/themes/element"},
+                    default: "element",
+                },
+                compiledVariables
+            }),
             // important this comes before service worker
             // otherwise the manifest and the icons it refers to won't be cached
             injectWebManifest("assets/manifest.json"),

vite.sdk-assets-config.js

@@ -1,6 +1,7 @@
 const path = require("path");
 const mergeOptions = require('merge-options');
-const commonOptions = require("./vite.common-config.js");
+const themeBuilder = require("./scripts/build-plugins/rollup-plugin-build-themes");
+const {commonOptions, compiledVariables} = require("./vite.common-config.js");
 
 export default mergeOptions(commonOptions, {
     root: "src/",
@@ -8,4 +9,13 @@ export default mergeOptions(commonOptions, {
     build: {
         outDir: "../target/asset-build/",
     },
+    plugins: [
+        themeBuilder({
+            themeConfig: {
+                themes: { element: "./src/platform/web/ui/css/themes/element" },
+                default: "element",
+            },
+            compiledVariables,
+        }),
+    ],
 });

vite.sdk-lib-config.js

@@ -1,6 +1,6 @@
 const path = require("path");
 const mergeOptions = require('merge-options');
-const commonOptions = require("./vite.common-config.js");
+const {commonOptions} = require("./vite.common-config.js");
 const manifest = require("./package.json");
 
 const externalDependencies = Object.keys(manifest.dependencies)