diff --git a/docs/content/dark-mode.md b/docs/content/dark-mode.md index 44b2530..78851b8 100644 --- a/docs/content/dark-mode.md +++ b/docs/content/dark-mode.md @@ -12,10 +12,35 @@ Cerberus includes patterns for dark mode using the `prefers-color-scheme` media ## Overview -Cerberus defines dark mode styles in each template’s . These styles can override styles for components (like buttons and text) and create utility classes that can be applied anywhere in a template’s HTML. +Cerberus defines dark mode styles in each template’s `` in the form of immutable utility classes. These utility classes can be applied to HTML tags to override their default light mode CSS styles and apply new styles for dark mode. + +
+ 
<style>
+  @media (prefers-color-scheme: dark) {
+    .my-class {
+      color: white !important;
+    }
+  }
+</style>
+ 
+<p style="color: #000000;" class="my-class">
+  Text that is black in light mode and white in dark mode.
+</p>
+
+
+ +Cerberus provides a few patterns for dark mode, which are meant to be edited and built upon. + + ## Examples +### Changing colors + +In this example, the color of the `

` tag is automatically changed and the background of the `` is changed using a CSS utility class: + 

<!DOCTYPE html>
 <html>
@@ -41,23 +66,59 @@ Cerberus defines dark mode styles in each template’s . These styles can
     </table>
   </body>
 </html>
-
- - - - - -
- Text in light mode - - Text in dark mode -
-
-
- -In this example, the color of the `

` tag is automatically changed and the background of the `` is changed using a utility class. - -Cerberus provides a pattern for creating and applying dark mode styles. These dark mode patterns are meant to be edited and built upon. +

+ + + + + +
+ Text in light mode + + Text in dark mode +
+
+ + +### Swapping images + +Since `.svg` graphics are not well supported in email clients, email relies on raster images like `.png`, `.jpg`, and `.gif`. Since we can't use a single raster image and recolor it based on the color scheme preference, we include two separate image files (one for light mode and one for dark mode) and display one at a time using the `prefers-color-scheme` media feature. + +
+ 
<style>
+  @media (prefers-color-scheme: dark) {
+    .display-only-in-dark-mode {
+      display: inline-block !important;
+    }
+    .display-only-in-light-mode {
+      display: none !important;
+    }
+  }
+</style>
+ 
+<img src="logo-light-mode.png" class="display-only-in-light-mode">
+<!--[if !mso]><!-->
+<img src="logo-dark-mode.png" class="display-only-in-dark-mode">
+<!--<![endif]-->
+
+
+ + + + + +
+ + + +
+
+
+ + + ## Removing Dark Mode diff --git a/docs/content/outlook.md b/docs/content/outlook.md index 0441a27..628b63c 100644 --- a/docs/content/outlook.md +++ b/docs/content/outlook.md @@ -79,7 +79,7 @@ Using Microsoft Office version numbers allows you to target a specific Outlook v Using operators allows you to create conditional expressions for targeting multiple Outlook versions.