jhaals · jhaals · May 19, 2025 · Apr 28, 2025 · May 1, 2025 · May 14, 2025
diff --git a/.gitignore b/.gitignore
@@ -25,3 +25,5 @@ deploy/aws-lambda/.serverless
 
 website/cypress/videos
 website/cypress/screenshots
+
+.idea
diff --git a/website/.gitignore b/website/.gitignore
@@ -11,6 +11,7 @@ cypress/downloads/
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

diff --git a/website/index.html b/website/index.html
@@ -20,11 +20,14 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+    <link rel="stylesheet" href="/index.css" />
     <title>Yopass: Share Secrets Securely</title>
   </head>
   <body style="margin: 0">
     <noscript> You need to enable JavaScript to run this app. </noscript>
-    <div id="root"></div>
+    <div id="root">
+      <div class="placeholder"></div>
+    </div>
     <script type="module" src="./src/index.tsx"></script>
   </body>
 </html>
diff --git a/website/public/index.css b/website/public/index.css
@@ -0,0 +1,14 @@
+.placeholder {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+
+  background-color: #fff;
+  color: #000;
+}
+@media (prefers-color-scheme: dark) {
+  .placeholder {
+    background-color: #222;
+    color: #fff;
+  }
+}
diff --git a/website/src/App.tsx b/website/src/App.tsx
@@ -1,4 +1,4 @@
-import { Container } from '@mui/material';
+import { Container, CssBaseline } from '@mui/material';
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
 
 import { Header } from './shared/Header';
@@ -21,7 +21,8 @@ const App = () => {
   const features = process.env.YOPASS_DISABLE_FEATURES_CARDS !== '1';
   return (
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={theme} defaultMode="system">
+        <CssBaseline />
         <HashRouter>
           <Header />
           <Container maxWidth={'lg'}>

diff --git a/website/src/createSecret/Upload.tsx b/website/src/createSecret/Upload.tsx
@@ -14,12 +14,13 @@ import Result from '../displaySecret/Result';
 import { randomString, uploadFile } from '../utils/utils';
 import { useTranslation } from 'react-i18next';
 import { useForm } from 'react-hook-form';
-import { Grid, Typography } from '@mui/material';
+import { Grid, Typography, useTheme } from '@mui/material';
 
 const Upload = () => {
   const maxSize = 1024 * 500;
   const [error, setError] = useState('');
   const { t } = useTranslation();
+  const { palette } = useTheme();
   const [result, setResult] = useState({
     password: '',
     customPassword: false,
@@ -116,7 +117,7 @@ const Upload = () => {
           </Grid>
           <Grid container justifyContent="center">
             <FontAwesomeIcon
-              color={isDragActive ? 'blue' : 'black'}
+              color={isDragActive ? palette.primary.main : palette.text.primary}
               size="8x"
               icon={faFileUpload}
             />

diff --git a/website/src/displaySecret/DeleteSecret.tsx b/website/src/displaySecret/DeleteSecret.tsx
@@ -68,8 +68,13 @@ const DeleteSecret = ({ url }: { readonly url: string }) => {
 
   return (
     <>
-      <Button color="secondary" onClick={handleConfirmOpen} disabled={deleted}>
-        <FontAwesomeIcon icon={faTrash} /> {t('delete.buttonDelete')}
+      <Button
+        color="secondary"
+        onClick={handleConfirmOpen}
+        disabled={deleted}
+        startIcon={<FontAwesomeIcon icon={faTrash} />}
+      >
+        {t('delete.buttonDelete')}
       </Button>
 
       <Dialog

diff --git a/website/src/displaySecret/Secret.tsx b/website/src/displaySecret/Secret.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCopy } from '@fortawesome/free-solid-svg-icons';
-import { Box, Button, Typography } from '@mui/material';
+import { Box, Button, Paper, Typography, useTheme } from '@mui/material';
 import { useCopyToClipboard } from 'react-use';
 import { saveAs } from 'file-saver';
 import { useEffect, useState } from 'react';
@@ -11,6 +11,7 @@ const RenderSecret = ({ secret }: { readonly secret: string }) => {
   const { t } = useTranslation();
   const [copy, copyToClipboard] = useCopyToClipboard();
   const [showQr, setShowQr] = useState(false);
+  const { palette } = useTheme();
 
   return (
     <div>
@@ -19,27 +20,28 @@ const RenderSecret = ({ secret }: { readonly secret: string }) => {
       <Button
         color={copy.error ? 'secondary' : 'primary'}
         onClick={() => copyToClipboard(secret)}
+        startIcon={<FontAwesomeIcon icon={faCopy} size="xs" />}
       >
-        <FontAwesomeIcon icon={faCopy} /> {t('secret.buttonCopy')}
+        {t('secret.buttonCopy')}
       </Button>
-      <Typography
-        id="pre"
-        data-test-id="preformatted-text-secret"
-        sx={{
-          backgroundColor: '#ecf0f1',
-          padding: '15px',
-          border: '1px solid #cccccc',
-          display: 'block',
-          fontSize: '1rem',
-          borderRadius: '4px',
-          wordWrap: 'break-word',
-          wordBreak: 'break-all',
-          whiteSpace: 'pre-wrap',
-          fontFamily: 'monospace, monospace', // https://github.com/necolas/normalize.css/issues/519#issuecomment-197131966
-        }}
-      >
-        {secret}
-      </Typography>
+      <Paper variant="outlined">
+        <Typography
+          id="pre"
+          data-test-id="preformatted-text-secret"
+          sx={{
+            padding: '15px',
+            display: 'block',
+            fontSize: '1rem',
+            borderRadius: '4px',
+            wordWrap: 'break-word',
+            wordBreak: 'break-all',
+            whiteSpace: 'pre-wrap',
+            fontFamily: 'monospace, monospace', // https://github.com/necolas/normalize.css/issues/519#issuecomment-197131966
+          }}
+        >
+          {secret}
+        </Typography>
+      </Paper>
       <Button onClick={() => setShowQr(!showQr)}>
         {showQr ? t('secret.hideQrCode') : t('secret.showQrCode')}
       </Button>
@@ -51,7 +53,13 @@ const RenderSecret = ({ secret }: { readonly secret: string }) => {
           margin: 5,
         }}
       >
-        <QRCode size={150} style={{ height: 'auto' }} value={secret} />
+        <QRCode
+          bgColor={palette.background.default}
+          fgColor={palette.text.primary}
+          size={150}
+          style={{ height: 'auto' }}
+          value={secret}
+        />
       </Box>
     </div>
   );

diff --git a/website/src/index.tsx b/website/src/index.tsx
@@ -10,7 +10,7 @@ import '@fontsource/roboto/700.css';
 const container = document.getElementById('root');
 const root = createRoot(container!);
 root.render(
-  <Suspense fallback={<div>Loading...</div>}>
+  <Suspense fallback={<div className="placeholder">Loading...</div>}>
     <App />
   </Suspense>,
 );
diff --git a/website/src/shared/Features.tsx b/website/src/shared/Features.tsx
@@ -65,6 +65,7 @@ const Feature = (props: FeatureProps) => {
     <Grid item={true} xs={12} md={4}>
       <Paper
         sx={{
+          backgroundColor: 'unset',
           display: 'flex',
           flexDirection: 'column',
           justifyContent: 'center',
@@ -73,7 +74,7 @@ const Feature = (props: FeatureProps) => {
           padding: '16px',
         }}
       >
-        <FontAwesomeIcon color={'black'} size={'4x'} icon={props.icon} />
+        <FontAwesomeIcon size={'4x'} icon={props.icon} />
         <Typography sx={{ padding: '5px' }} variant="h5">
           {props.title}
         </Typography>

diff --git a/website/src/shared/Header.tsx b/website/src/shared/Header.tsx
@@ -1,6 +1,15 @@
-import { AppBar, Toolbar, Typography, Button, Box, Link } from '@mui/material';
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  Button,
+  Box,
+  Link,
+  Stack,
+} from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
+import { ModeToggle } from './ModeToggle';
 
 export const Header = () => {
   const { t } = useTranslation();
@@ -10,7 +19,7 @@ export const Header = () => {
   const home = base + '/#/';
   const upload = base + '/#/upload';
   return (
-    <AppBar position="static" color="transparent" sx={{ marginBottom: 4 }}>
+    <AppBar position="static" color="default" sx={{ marginBottom: 4 }}>
       <Toolbar>
         <Link href={home} color="inherit" underline="none">
           <Typography variant="h6" component="div">
@@ -29,11 +38,14 @@ export const Header = () => {
             />
           </Typography>
         </Link>
-        <Box
+        <Stack
+          direction="row"
+          gap={2}
           sx={{
             marginLeft: 'auto',
           }}
         >
+          <ModeToggle />
           <Button
             component={Link}
             href={isOnUploadPage ? home : upload}
@@ -42,7 +54,7 @@ export const Header = () => {
           >
             {isOnUploadPage ? t('header.buttonHome') : t('header.buttonUpload')}
           </Button>
-        </Box>
+        </Stack>
       </Toolbar>
     </AppBar>
   );

diff --git a/website/src/shared/ModeToggle.tsx b/website/src/shared/ModeToggle.tsx
@@ -0,0 +1,21 @@
+import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconButton, useTheme } from '@mui/material';
+import { useColorScheme } from '@mui/material/styles';
+
+export const ModeToggle = () => {
+  const { mode, systemMode, setMode } = useColorScheme();
+  const { palette } = useTheme();
+
+  const currentMode = (mode == 'system' ? systemMode : mode) ?? 'light';
+  const isDarkMode = currentMode == 'dark';
+  const nextMode = isDarkMode ? 'light' : 'dark';
+
+  const icon = isDarkMode ? faSun : faMoon;
+
+  return (
+    <IconButton onClick={() => setMode(nextMode)}>
+      <FontAwesomeIcon icon={icon} color={palette.primary.main} width="24px" />
+    </IconButton>
+  );
+};
diff --git a/website/src/theme.ts b/website/src/theme.ts
@@ -2,7 +2,21 @@ import { createTheme } from '@mui/material/styles';
 import { blueGrey } from '@mui/material/colors';
 
 export const theme = createTheme({
-  palette: {
-    primary: blueGrey,
+  colorSchemes: {
+    dark: {
+      palette: {
+        background: {
+          default: '#222',
+        },
+      },
+    },
+    light: {
+      palette: {
+        primary: blueGrey,
+        background: {
+          paper: '#ecf0f1',
+        },
+      },
+    },
   },
 });
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,3 +25,5 @@ deploy/aws-lambda/.serverless

		website/cypress/videos
		website/cypress/screenshots

		.idea