Add dark mode for widgets

matrix-org · Dec 22, 2023 · 98d312f · 98d312f
1 parent a58febf
commit 98d312f
Show file tree

Hide file tree

Showing 14 changed files with 70 additions and 29 deletions.
diff --git a/web/components/ConnectionCard.module.scss b/web/components/ConnectionCard.module.scss
@@ -1,9 +1,7 @@
-.card {
-    /* Compound/Light/Background */
-    background: #FFFFFF;
 
-    /* Compound/Light/Quinary Content */
-    border: 1px solid #E3E8F0;
+.card {
+    background: var(--cpd-color-bg-subtle-secondary);
+    border: 1px solid var(--cpd-color-border-interactive-secondary);
     box-sizing: border-box;
     border-radius: 8px;
 
@@ -15,6 +13,13 @@
 
     cursor: pointer;
 
+
+    @media (prefers-color-scheme: dark) {
+        img.invert {
+            filter: invert(100%);
+        }
+    }
+
     img {
         width: 52px;
         height: 52px;

diff --git a/web/components/ConnectionCard.tsx b/web/components/ConnectionCard.tsx
@@ -2,6 +2,7 @@ import style from "./ConnectionCard.module.scss";
 
 interface IProps {
     imageSrc: string;
+    darkImage?: boolean;
     serviceName: string;
     description: string;
     key: string;
@@ -10,7 +11,7 @@ interface IProps {
 
 export function ConnectionCard(props: IProps) {
     return <div className={style.card} onClick={props.onClick}>
-        <img alt="" src={props.imageSrc} />
+        <img alt="" src={props.imageSrc} className={props.darkImage ? style.invert : ''} />
         <div>
             <span>{props.serviceName}</span>
             <p>{props.description}</p>

diff --git a/web/components/RoomConfigView.tsx b/web/components/RoomConfigView.tsx
@@ -37,6 +37,7 @@ interface IConnectionProps {
     displayName: string,
     description: string,
     icon: string,
+    darkIcon?: true,
     component: BridgeConfig,
 }
 
@@ -51,6 +52,7 @@ const connections: Record<ConnectionType, IConnectionProps> = {
         displayName: 'Github',
         description: "Connect the room to a GitHub project",
         icon: GitHubIcon,
+        darkIcon: true,
         component: GithubRepoConfig,
     },
     [ConnectionType.Gitlab]: {
@@ -69,6 +71,7 @@ const connections: Record<ConnectionType, IConnectionProps> = {
         displayName: 'Generic Webhook',
         description: "Create a webhook which can be used to connect any service to Matrix",
         icon: WebhookIcon,
+        darkIcon: true,
         component: GenericWebhookConfig,
     },
 };
@@ -97,6 +100,7 @@ export default function RoomConfigView(props: IProps) {
                         description={connection.description}
                         key={connectionType}
                         imageSrc={connection.icon}
+                        darkImage={connection.darkIcon}
                         onClick={() => setActiveConnectionType(connectionType)}
                     />
                 })}

diff --git a/web/components/ServiceCard.module.scss b/web/components/ServiceCard.module.scss
@@ -1,9 +1,16 @@
-.icon {
-    width: 48px;
-}
 
 .serviceCard {
     display: grid !important;
     grid-template-columns: 0.6fr 1fr 1fr;
     padding: 0.5rem;
+
+    img {
+        width: 48px;
+        @media (prefers-color-scheme: dark) {
+            &.invert {
+                filter: invert(100%);
+            }
+        }
+    }
+
 }
diff --git a/web/components/ServiceCard.tsx b/web/components/ServiceCard.tsx
@@ -4,7 +4,7 @@ import style from "./ServiceCard.module.scss";
 
 export const ServiceCard: FunctionComponent<{serviceName: string, iconUrl: string, onConfigure: () => void}> = ({ serviceName, iconUrl, onConfigure }) => {
     return <div className={`card ${style.serviceCard}`}>
-        <img className={style.icon} src={iconUrl} />
+        <img className={style.invert} src={iconUrl} />
         <div>
             <span>{serviceName}</span>
             <button onClick={onConfigure}>Configure</button>

diff --git a/web/components/elements/Card.module.scss b/web/components/elements/Card.module.scss
@@ -1,9 +1,6 @@
 .card {
-  /* Compound/Light/Background */
-  background: #FFFFFF;
-
-  /* Compound/Light/Quinary Content */
-  border: 1px solid #E3E8F0;
+  background: var(--cpd-color-bg-subtle-secondary);
+  border: 1px solid var(--cpd-color-border-interactive-secondary);
   box-sizing: border-box;
   border-radius: 8px;
 

diff --git a/web/components/elements/DropdownSearch.module.scss b/web/components/elements/DropdownSearch.module.scss
@@ -24,7 +24,7 @@
 
 .value {
     font-weight: 400;
-    color: var(--light-color);
+    color: var(--cpd-color-text-primary);
 }
 
 .hasImg {

diff --git a/web/components/elements/InputField.module.scss b/web/components/elements/InputField.module.scss
@@ -17,8 +17,7 @@
         text-overflow: ellipsis;
         max-width: calc(100% - 20px);
         padding: 0 2px;
-        color:  var(--light-color);
-        background: var(--background-color);
+        color:  var(--cpd-color-text-primary);
     }
 
     > ul {
@@ -37,23 +36,24 @@
     }
 
     input[type="text"],input[type="search"] {
-        border: 1px solid #E3E8F0;
+        border: 1px solid var(--cpd-color-border-interactive-primary);
         box-sizing: border-box;
         border-radius: 8px;
         width: 100%;
         font-size: 14px;
         padding: 8px 12px;
-        color:  var(--light-color);
+        color:  var(--cpd-color-text-primary);
+        background: var(--cpd-color-bg-subtle-primary); 
     }
 
     select {
-        border: 1px solid #E3E8F0;
+        border: 1px solid var(--cpd-color-border-interactive-primary);
         box-sizing: border-box;
         border-radius: 8px;
         width: 100%;
         font-size: 14px;
-        background: var(--background-color); 
         padding: 8px 12px;
-        color:  var(--light-color);
+        color:  var(--cpd-color-text-primary);
+        background: var(--cpd-color-bg-subtle-primary); 
     }
 }
diff --git a/web/components/roomConfig/GenericWebhookConfig.tsx b/web/components/roomConfig/GenericWebhookConfig.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent, createRef } from "preact";
-import { useCallback, useState } from "preact/hooks"
+import { useCallback, useEffect, useState } from "preact/hooks"
 import CodeMirror from '@uiw/react-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { BridgeConfig } from "../../BridgeAPI";
@@ -48,6 +48,21 @@ const ConnectionConfiguration: FunctionComponent<ConnectionConfigurationProps<Se
         });
     }, [canEdit, onSave, nameRef, transFn, existingConnection, transFnEnabled, waitForComplete]);
 
+    const [codeMirrorTheme, setCodeMirrorTheme] = useState<"light"|"dark">("light");
+    useEffect(() => {
+        if (!transFnEnabled) {
+            return;
+        }
+        const mm = window.matchMedia('(prefers-color-scheme: dark)');
+        const fn = (event: MediaQueryListEvent) => {
+            console.log('media change!');
+            setCodeMirrorTheme(event.matches ? "dark" : "light");
+        };
+        mm.addEventListener('change', fn);
+        setCodeMirrorTheme(mm.matches ? "dark" : "light");
+        return () => mm.removeEventListener('change', fn);
+    }, [transFnEnabled]);
+
     return <form onSubmit={handleSave}>
         <InputField visible={!existingConnection} label="Friendly name" noPadding={true}>
             <input ref={nameRef} disabled={!canEdit} placeholder="My webhook" type="text" value={existingConnection?.config.name} />
@@ -69,6 +84,7 @@ const ConnectionConfiguration: FunctionComponent<ConnectionConfigurationProps<Se
         <InputField visible={transFnEnabled} noPadding={true}>
             <CodeMirror
                 value={transFn}
+                theme={codeMirrorTheme}
                 extensions={CODE_MIRROR_EXTENSIONS}
                 onChange={setTransFn}
             />
@@ -98,6 +114,7 @@ const RoomConfigListItemFunc = (c: GenericHookResponseItem) => c.config.name;
 export const GenericWebhookConfig: BridgeConfig = ({ api, roomId, showHeader }) => {
     return <RoomConfig<ServiceConfig, GenericHookResponseItem, GenericHookConnectionState>
         headerImg={WebhookIcon}
+        darkHeaderImg={true}
         showHeader={showHeader}
         api={api}
         roomId={roomId}

diff --git a/web/components/roomConfig/GithubRepoConfig.tsx b/web/components/roomConfig/GithubRepoConfig.tsx
@@ -197,6 +197,7 @@ export const GithubRepoConfig: BridgeConfig = ({ api, roomId, showHeader }) => {
 
     return <RoomConfig<never, GitHubRepoResponseItem, GitHubRepoConnectionState>
         headerImg={GitHubIcon}
+        darkHeaderImg={true}
         showHeader={showHeader}
         api={api}
         roomId={roomId}

diff --git a/web/components/roomConfig/RoomConfig.module.scss b/web/components/roomConfig/RoomConfig.module.scss
@@ -8,6 +8,12 @@
         height: 52px;
     }
 
+    @media (prefers-color-scheme: dark) {
+        img.invert {
+            filter: invert(100%);
+        }
+    }
+
     h1 {
         margin-left: 10px;
         font-weight: 600;

diff --git a/web/components/roomConfig/RoomConfig.tsx b/web/components/roomConfig/RoomConfig.tsx
@@ -35,6 +35,7 @@ interface IRoomConfigProps<SConfig, ConnectionType extends GetConnectionsRespons
     type: string;
     showAuthPrompt?: boolean;
     showHeader: boolean;
+    darkHeaderImg?: boolean;
     headerImg: string;
     text: IRoomConfigText;
     connectionEventType: string;
@@ -52,6 +53,7 @@ export const RoomConfig = function<SConfig, ConnectionType extends GetConnection
         roomId,
         type,
         showAuthPrompt = false,
+        darkHeaderImg,
         headerImg,
         showHeader,
         text,
@@ -156,7 +158,7 @@ export const RoomConfig = function<SConfig, ConnectionType extends GetConnection
         <main>
             { showHeader &&
                 <header className={style.header}>
-                    <img alt="" src={headerImg} />
+                    <img alt="" className={darkHeaderImg ? style.invert : undefined} src={headerImg} />
                     <h1>{text.header}</h1>
                 </header>
             }

diff --git a/web/index.html b/web/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>GitHub Bridge Widget</title>
   </head>
-  <body class="cpd-theme-light">
+  <body>
     <main id="root"></main>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <script type="module" src="/index.tsx"></script>

diff --git a/web/styling.scss b/web/styling.scss
@@ -1,7 +1,6 @@
 :root {
   --background-color: #FFFFFF;
   --foreground-color: #17191C;
-  --light-color: #737D8C;
   --primary-color: #0DBD8B;
   --primary-color-disabled: #0dbd8baf;
 
@@ -29,6 +28,8 @@ a:visited {
 
 body {
   margin: 0;
+  height: fit-content;
+  block-size: fit-content !important;
 }
 
 
@@ -56,13 +57,13 @@ button {
 
 .chevron.down::before {
 	transform: rotate(-225deg);
-  border-color: var(--light-color);
+  border-color: var(--cpd-color-text-primary);
   float: right;
 }
 
 
 .chevron.up::before {
 	transform: rotate(-45deg);
-  border-color: var(--light-color);
+  border-color: var(--cpd-color-text-primary);
   float: right;
 }