Skip to content

Instantly share code, notes, and snippets.

@1998code
Created April 15, 2022 05:25
Show Gist options
  • Save 1998code/f88c0863766ecd07fc2e34cef45e9a34 to your computer and use it in GitHub Desktop.
Save 1998code/f88c0863766ecd07fc2e34cef45e9a34 to your computer and use it in GitHub Desktop.
Email Demo that handle dark mode for Apple Mail Client
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Dark Mode Test</title>
<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
color: white;
}
}
</style>
</head>
<body class="text-center">
<img width="150px" style="margin:50px;border-radius:25px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Apple_gray_logo.png/800px-Apple_gray_logo.png" />
<h2>Test Message</h2>
<h1>This is Dark Mode</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment