fixed readability of security diagrams in dark mode

Author: tobihagemann

docs/security/architecture.md

@@ -121,7 +121,7 @@ wrappedEncryptionMasterKey := aesKeyWrap(encryptionMasterKey, kek)
 wrappedMacMasterKey := aesKeyWrap(macMasterKey, kek)
 ```
 
-<Image src="/img/security/key-derivation.png" srcset="/img/security/key-derivation.png 1x, /img/security/[email protected] 2x" alt="KEK Derivation" width="336" height="71" />
+<Image src="/img/security/key-derivation.png" srcset="/img/security/key-derivation.png 1x, /img/security/key-[email protected] 2x" alt="KEK Derivation" width="336" height="71" style={{backgroundColor: '#ffffff', borderRadius: 'var(--ifm-global-radius)', padding: 'var(--ifm-pre-padding)'}} />
 
 The wrapped keys and the parameters needed to derive the KEK are then stored as integers or Base64-encoded strings in a JSON file named `masterkey.cryptomator`, which is located in the root directory of the vault.
 
@@ -139,4 +139,4 @@ The wrapped keys and the parameters needed to derive the KEK are then stored as
 
 When unlocking a vault the KEK is used to unwrap (i.e. decrypt) the stored masterkeys.
 
-<Image src="/img/security/masterkey-decryption.png" srcset="/img/security/masterkey-decryption.png 1x, /img/security/[email protected] 2x" alt="Masterkey Decryption" width="439" height="200" />
+<Image src="/img/security/masterkey-decryption.png" srcset="/img/security/masterkey-decryption.png 1x, /img/security/masterkey-[email protected] 2x" alt="Masterkey Decryption" width="439" height="200" style={{backgroundColor: '#ffffff', borderRadius: 'var(--ifm-global-radius)', padding: 'var(--ifm-pre-padding)'}} />

docs/security/vault.md

@@ -24,7 +24,7 @@ cleartextPayload := 0xFFFFFFFFFFFFFFFF . contentKey
 ciphertextPayload, tag := aesGcm(cleartextPayload, encryptionMasterKey, headerNonce)
 ```
 
-<Image src="/img/security/file-header-encryption.png" srcset="/img/security/file-header-encryption.png 1x, /img/security/[email protected] 2x" alt="File Header Encryption" width="433" height="199" />
+<Image src="/img/security/file-header-encryption.png" srcset="/img/security/file-header-encryption.png 1x, /img/security/file-[email protected] 2x" alt="File Header Encryption" width="433" height="199" style={{backgroundColor: '#ffffff', borderRadius: 'var(--ifm-global-radius)', padding: 'var(--ifm-pre-padding)'}} />
 
 *Random per file change
 
@@ -54,7 +54,7 @@ for (int i = 0; i < length(cleartextChunks); i++) {
 ciphertextFileContent := join(ciphertextChunks[])
 ```
 
-<Image src="/img/security/file-content-encryption.png" srcset="/img/security/file-content-encryption.png 1x, /img/security/[email protected] 2x" alt="File Content Encryption" width="782" height="195" />
+<Image src="/img/security/file-content-encryption.png" srcset="/img/security/file-content-encryption.png 1x, /img/security/file-[email protected] 2x" alt="File Content Encryption" width="782" height="195" style={{backgroundColor: '#ffffff', borderRadius: 'var(--ifm-global-radius)', padding: 'var(--ifm-pre-padding)'}} />
 
 *Random per chunk change
 
@@ -94,7 +94,7 @@ Cryptomator uses [AES-SIV](https://tools.ietf.org/html/rfc5297) to encrypt names
 The directory ID of the parent folder is passed as associated data.
 This prevents undetected movement of files between directories.
 
-<Image src="/img/security/filename-encryption.png" srcset="/img/security/filename-encryption.png 1x, /img/security/[email protected] 2x" alt="Filename Encryption" width="614" height="220" />
+<Image src="/img/security/filename-encryption.png" srcset="/img/security/filename-encryption.png 1x, /img/security/filename-[email protected] 2x" alt="Filename Encryption" width="614" height="220" style={{backgroundColor: '#ffffff', borderRadius: 'var(--ifm-global-radius)', padding: 'var(--ifm-pre-padding)'}} />
 
 *Unencrypted directory ID of the parent dir [as described above](#directory-ids)
 

src/components/Image.tsx

@@ -9,9 +9,10 @@ interface ImageProps {
   width?: number | string;
   height?: number | string;
   className?: string;
+  style?: React.CSSProperties;
 }
 
-export default function Image({ src, srcset, alt, width, height, className }: ImageProps) {
+export default function Image({ src, srcset, alt, width, height, className, style }: ImageProps) {
   const imageSrc = useBaseUrl(src);
   const isInsideGrid = React.useContext(GridContext);
   const processedSrcset = srcset
@@ -33,7 +34,7 @@ export default function Image({ src, srcset, alt, width, height, className }: Im
       className={className}
       decoding="async"
       loading="lazy"
-      style={{height: 'auto'}}
+      style={{ height: 'auto', ...style }}
     />
   );
   if (isInsideGrid) {