From 563bb9587d9a510c6d94d628b9d2e4484355a8fe Mon Sep 17 00:00:00 2001 From: Izac Cavalheiro Date: Fri, 13 Feb 2026 14:08:10 -0300 Subject: [PATCH] [DEV-286248] add support for dark/light theme on react-web-app --- react-web-app/public/index.html | 15 +++++++++++++++ react-web-app/src/SelectBankCard.js | 20 +++++++++++++++++--- 2 files changed, 32 insertions(+), 3 deletions(-) diff --git a/react-web-app/public/index.html b/react-web-app/public/index.html index af0d194..8579b9d 100644 --- a/react-web-app/public/index.html +++ b/react-web-app/public/index.html @@ -24,6 +24,21 @@ --> Trustly Starter App + diff --git a/react-web-app/src/SelectBankCard.js b/react-web-app/src/SelectBankCard.js index 8e40c30..be6fa8b 100644 --- a/react-web-app/src/SelectBankCard.js +++ b/react-web-app/src/SelectBankCard.js @@ -1,9 +1,23 @@ import { useEffect } from 'react'; import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; -import { Typography } from '@mui/material'; +import { Typography, useMediaQuery } from '@mui/material'; export default function SelectBankCard(props) { + const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); + + const cardStyles = { + minWidth: 275, + maxWidth: 550, + margin: 5, + backgroundColor: prefersDarkMode ? '#000000' : '#ffffff' + }; + + const typographyStyles = { + fontSize: 14, + color: prefersDarkMode ? '#ffffff' : '#000000' + }; + useEffect(() => { const { establishData, TrustlyOptions } = props; @@ -14,9 +28,9 @@ export default function SelectBankCard(props) { }, [props]); return ( - + - + Example of the Select Bank Widget