Skip to content

Commit 4ad3403

Browse files
benbowlerbenbowler
committed
Dark mode accomodations for email template for testing.
1 parent a6869f4 commit 4ad3403

12 files changed

Lines changed: 164 additions & 40 deletions

File tree

‎assets/images/email-development/1.171.0/email-report/site-kit-logo-dark.png‎

4.21 KB
Loading

‎includes/Core/Email_Reporting/templates/email-report/parts/header.php‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
* @var callable $get_asset_url Function to generate asset URLs.
1313
*/
1414

15-
$logo_url = $get_asset_url( 'site-kit-logo.png' );
15+
$logo_light_url = $get_asset_url( 'site-kit-logo.png' );
16+
$logo_dark_url = $get_asset_url( 'site-kit-logo-dark.png' );
1617
$shooting_stars_url = $get_asset_url( 'shooting-stars-graphic.png' );
1718
?>
1819
<table role="presentation" width="100%">
@@ -21,7 +22,12 @@
2122
<table role="presentation" width="100%">
2223
<tr>
2324
<td style="vertical-align:top;" width="79">
24-
<img src="<?php echo esc_url( $logo_url ); ?>" alt="<?php echo esc_attr__( 'Site Kit by Google', 'google-site-kit' ); ?>" width="79" height="22" style="display:block; margin-top: 12px;" />
25+
<?php /* Light mode logo (default) */ ?>
26+
<img class="light-logo" src="<?php echo esc_url( $logo_light_url ); ?>" alt="<?php echo esc_attr__( 'Site Kit by Google', 'google-site-kit' ); ?>" width="79" height="22" style="display:block; margin-top: 12px;" />
27+
<?php /* Dark mode logo (hidden by default, shown in dark mode via CSS) */ ?>
28+
<!--[if !mso]><!-->
29+
<img class="dark-logo" src="<?php echo esc_url( $logo_dark_url ); ?>" alt="<?php echo esc_attr__( 'Site Kit by Google', 'google-site-kit' ); ?>" width="79" height="22" style="display:none; margin-top: 12px; mso-hide:all;" />
30+
<!--<![endif]-->
2531
</td>
2632
<?php /* Extra centering for Outlook. */ ?>
2733
<td style="vertical-align:top; text-align:center;" align="center">
@@ -33,10 +39,10 @@
3339
</tr>
3440
<tr>
3541
<td style="text-align:center; vertical-align:middle; font-size:13px; color: #161B18;" colspan="3">
36-
<h1 style="font-weight: 400; font-size: 22px; line-height: 28px; margin: 0"><?php echo esc_html__( 'Your performance at a glance', 'google-site-kit' ); ?></h1>
37-
<div style="font-weight: 500; size: 14px; line-height: 20px; margin: 0; margin-top: 2px;"><?php echo esc_html( $date_label ); ?></div>
42+
<h1 class="dm-text-primary" style="font-weight: 400; font-size: 22px; line-height: 28px; margin: 0; color: #161B18;"><?php echo esc_html__( 'Your performance at a glance', 'google-site-kit' ); ?></h1>
43+
<div class="dm-text-primary" style="font-weight: 500; size: 14px; line-height: 20px; margin: 0; margin-top: 2px; color: #161B18;"><?php echo esc_html( $date_label ); ?></div>
3844
<?php /* This domain is linked so that we can enforce our styles within email clients which otherwise detect it as a link and add their own styles. */ ?>
39-
<div style="font-weight: 400; font-size: 14px; line-height: 20px; margin: 0; margin-top: 4px;"><a href="<?php echo esc_url( '//' . $site_domain ); ?>" style="color: #6C726E; text-decoration: none;"><?php echo esc_html( $site_domain ); ?></a></div>
45+
<div style="font-weight: 400; font-size: 14px; line-height: 20px; margin: 0; margin-top: 4px;"><a class="dm-text-secondary" href="<?php echo esc_url( '//' . $site_domain ); ?>" style="color: #6C726E; text-decoration: none;"><?php echo esc_html( $site_domain ); ?></a></div>
4046
</td>
4147
</tr>
4248
</table>

‎includes/Core/Email_Reporting/templates/email-report/parts/section-conversions-metric-part.php‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,14 @@
3636
?>
3737
</td>
3838
<td>
39-
<div style="font-size:16px; line-height:24px; font-weight:500; margin-bottom:5px;">
39+
<div class="dm-text-primary" style="font-size:16px; line-height:24px; font-weight:500; margin-bottom:5px;">
4040
<?php echo esc_html( $label ); ?>
4141
</div>
4242

43-
<table role="presentation" width="100%"
43+
<table role="presentation" width="100%" class="dm-border"
4444
style="padding-bottom: 10px; border-bottom: 1px solid #EBEEF0; margin-bottom: 10px;">
4545
<tr>
46-
<td style="font-size:12px; font-weight:500; color:#6C726E; text-align: left; padding-bottom: 8px;">
46+
<td class="dm-text-secondary" style="font-size:12px; font-weight:500; color:#6C726E; text-align: left; padding-bottom: 8px;">
4747
<?php
4848
printf(
4949
/* translators: %s: Event name (e.g., "Purchase") */
@@ -53,14 +53,14 @@
5353
);
5454
?>
5555
</td>
56-
<td width="110"
56+
<td class="dm-text-secondary" width="110"
5757
style="font-size:12px; font-weight:500; color:#6C726E; text-align: right; width: 110px; padding-bottom: 10px;">
5858
<?php echo esc_html( $change_context ); ?>
5959
</td>
6060
</tr>
6161
<tr>
6262
<td>
63-
<div style="font-size:14px; line-height:20px; font-weight:500;">
63+
<div class="dm-text-primary" style="font-size:14px; line-height:20px; font-weight:500;">
6464
<?php echo esc_html( $value ); ?>
6565
</div>
6666
</td>
@@ -78,10 +78,10 @@
7878
</table>
7979

8080
<?php if ( ! empty( $dimension ) ) : ?>
81-
<div style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E; margin-bottom:4px;">
81+
<div class="dm-text-secondary" style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E; margin-bottom:4px;">
8282
<?php esc_html_e( 'Top traffic channel driving the most conversions', 'google-site-kit' ); ?>
8383
</div>
84-
<div style="font-size:14px; line-height:20px; font-weight:500;">
84+
<div class="dm-text-primary" style="font-size:14px; line-height:20px; font-weight:500;">
8585
<?php echo esc_html( $dimension_value ); ?>
8686
</div>
8787
<?php endif; ?>

‎includes/Core/Email_Reporting/templates/email-report/parts/section-conversions.php‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
?>
2323
<table role="presentation" width="100%" style="margin-bottom:24px;">
2424
<tr>
25-
<td style="background-color: #FFFFFF; border-radius: 16px; padding: 16px;">
25+
<td class="dm-card" style="background-color: #FFFFFF; border-radius: 16px; padding: 16px;">
2626
<?php
2727
// Render section header.
2828
$icon_url = $get_asset_url( 'icon-' . esc_html( $section_icon ) . '.png' );
@@ -39,15 +39,15 @@
3939
?>
4040
<table role="presentation" width="100%" style="margin-bottom:16px;">
4141
<tr>
42-
<td style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E;">
42+
<td class="dm-text-secondary" style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E;">
4343
<?php echo esc_html( $section_parts['total_conversion_events']['data']['label'] ); ?>
4444
</td>
45-
<td width="110" style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E; text-align: right; width: 110px;">
45+
<td class="dm-text-secondary" width="110" style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E; text-align: right; width: 110px;">
4646
<?php echo esc_html( $section_parts['total_conversion_events']['data']['change_context'] ); ?>
4747
</td>
4848
</tr>
4949
<tr>
50-
<td style="font-size:14px; line-height:20px; font-weight:500;">
50+
<td class="dm-text-primary" style="font-size:14px; line-height:20px; font-weight:500;">
5151
<?php echo esc_html( $section_parts['total_conversion_events']['data']['value'] ); ?>
5252
</td>
5353
<td style="text-align: right; padding: 6px 0;">

‎includes/Core/Email_Reporting/templates/email-report/parts/section-header.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@
2828
</tr>
2929
<tr>
3030
<td style="vertical-align:top;">
31-
<div style="font-size:18px; line-height:24px; font-weight:500;">
31+
<div class="dm-text-primary" style="font-size:18px; line-height:24px; font-weight:500;">
3232
<?php echo esc_html( $title ); ?>
3333
</div>
34-
<div style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E;">
34+
<div class="dm-text-secondary" style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E;">
3535
<?php echo esc_html( $subtitle ); ?>
3636
</div>
3737
</td>

‎includes/Core/Email_Reporting/templates/email-report/parts/section-metrics.php‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
?>
2727
<table role="presentation" width="100%" style="margin-bottom:24px;">
2828
<tr>
29-
<td style="background-color: #FFFFFF; border-radius: 16px; padding: 16px;">
29+
<td class="dm-card" style="background-color: #FFFFFF; border-radius: 16px; padding: 16px;">
3030
<?php
3131
// Render section header.
3232
$icon_url = $get_asset_url( 'icon-' . esc_html( $section_icon ) . '.png' );
@@ -43,7 +43,7 @@
4343
<table role="presentation" width="100%" style="margin-bottom:12px;">
4444
<tr>
4545
<td>&nbsp;</td>
46-
<td width="110"
46+
<td class="dm-text-secondary" width="110"
4747
style="text-align: right; font-size:12px; line-height:16px; font-weight:500; color:#6C726E; width: 110px;">
4848
<?php echo esc_html( $subtitle ); ?>
4949
</td>
@@ -64,17 +64,17 @@
6464
}
6565
?>
6666
<tr>
67-
<td
67+
<td class="dm-border"
6868
style="vertical-align: top; border-bottom: <?php echo esc_attr( $border_style ); ?>; padding: 12px 0;">
69-
<div
69+
<div class="dm-text-secondary"
7070
style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E; margin-bottom:4px;">
7171
<?php echo esc_html( $data['label'] ); ?>
7272
</div>
73-
<div style="font-size:14px; line-height:20px; font-weight:500;">
73+
<div class="dm-text-primary" style="font-size:14px; line-height:20px; font-weight:500;">
7474
<?php echo esc_html( $data['value'] ); ?>
7575
</div>
7676
</td>
77-
<td
77+
<td class="dm-border"
7878
style="text-align: right; vertical-align: middle; border-bottom: <?php echo esc_attr( $border_style ); ?>; padding: 12px 0;">
7979
<?php
8080
$render_shared_part(

‎includes/Core/Email_Reporting/templates/email-report/parts/section-page-metrics.php‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
?>
3030
<table role="presentation" width="100%" style="margin-bottom:24px;">
3131
<tr>
32-
<td style="background-color: #FFFFFF; border-radius: 16px; padding: 16px;">
32+
<td class="dm-card" style="background-color: #FFFFFF; border-radius: 16px; padding: 16px;">
3333
<?php
3434
// Render section header.
3535
$icon_url = $get_asset_url( 'icon-' . esc_html( $section_icon ) . '.png' );
@@ -56,12 +56,12 @@
5656
?>
5757
<table role="presentation" width="100%" style="margin-bottom:16px;">
5858
<tr>
59-
<td style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E; padding-bottom:8px;">
59+
<td class="dm-text-secondary" style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E; padding-bottom:8px;">
6060
<div style="width: 160px;">
6161
<?php echo esc_html( $part_label ); ?>
6262
</div>
6363
</td>
64-
<td
64+
<td class="dm-text-secondary"
6565
style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E; text-align:right; padding-bottom:8px; text-align:right; width: 110px;">
6666
<?php echo esc_html( $change_context ); ?>
6767
</td>
@@ -79,23 +79,23 @@
7979
}
8080
?>
8181
<tr>
82-
<td colspan="2"
82+
<td class="dm-border" colspan="2"
8383
style="border-bottom: <?php echo esc_attr( $border_style ); ?>; padding: 5px 0; <?php echo $is_last && ! $is_last_section_part ? 'padding-bottom: 16px;' : ''; ?>">
8484
<?php // Nested table required to ensure truncation works correctly for longer labels. ?>
8585
<table role="presentation" width="100%">
8686
<tr>
87-
<td
87+
<td class="dm-text-primary"
8888
style="font-size:14px; line-height:20px; font-weight:500; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
8989
<?php if ( $has_url ) : ?>
90-
<a href="<?php echo esc_url( $entity_url ); ?>"
90+
<a class="dm-text-primary" href="<?php echo esc_url( $entity_url ); ?>"
9191
style="color:#161B18; text-decoration:underline;">
9292
<?php echo esc_html( $item['label'] ); ?>
9393
</a>
9494
<?php else : ?>
9595
<?php echo esc_html( $item ); ?>
9696
<?php endif; ?>
9797
</td>
98-
<td
98+
<td class="dm-text-primary"
9999
style="font-size:14px; line-height:20px; font-weight:500; text-align:right; width:80px;">
100100
<?php echo esc_html( $data['values'][ $index ] ?? 0 ); ?>
101101
</td>

‎includes/Core/Email_Reporting/templates/email-report/parts/view-more-in-dashboard.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<table role="presentation" width="100%">
1919
<tr>
2020
<td style="text-align:right; height: 16px;" height="16">
21-
<a href="<?php echo esc_url( $url ); ?>" style="font-size:12px; line-height:16px; font-weight:500; color:#108080; text-decoration:none;">
21+
<a class="dm-link" href="<?php echo esc_url( $url ); ?>" style="font-size:12px; line-height:16px; font-weight:500; color:#108080; text-decoration:none;">
2222
<?php echo esc_html( $label ); ?>
2323
<img src="<?php echo esc_url( $arrow_url ); ?>" alt="" width="10" height="10" style="vertical-align:middle; margin-left:4px; margin-bottom: 2px;" />
2424
</a>

‎includes/Core/Email_Reporting/templates/email-report/template.php‎

Lines changed: 117 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@
3232
<head>
3333
<meta name="viewport" content="width=device-width" />
3434
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
35+
<?php /* Enable dark mode support in email clients that honor these meta tags. */ ?>
36+
<meta name="color-scheme" content="light dark" />
37+
<meta name="supported-color-schemes" content="light dark" />
3538
<?php /* Outlook requires this VML to prevent visual bugs when DPI is scaled on Windows. */ ?>
3639
<!--[if gte mso 9]>
3740
<xml>
@@ -44,7 +47,7 @@
4447
<title><?php echo esc_html( $subject ); ?></title>
4548
<style>
4649
:root {
47-
color-scheme: light;
50+
color-scheme: light dark;
4851
}
4952

5053
body {
@@ -108,6 +111,119 @@
108111
opacity: 0;
109112
overflow: hidden;
110113
}
114+
115+
/* Dark mode logo handling - hide dark logo by default */
116+
.dark-logo {
117+
display: none !important;
118+
}
119+
120+
/* Dark mode styles for email clients that support prefers-color-scheme */
121+
@media (prefers-color-scheme: dark) {
122+
/* Body and container backgrounds */
123+
body,
124+
.body {
125+
background-color: #232824 !important;
126+
}
127+
128+
/* Content card/section backgrounds */
129+
.dm-card {
130+
background-color: #161B18 !important;
131+
}
132+
133+
/* Text colors */
134+
.dm-text-primary {
135+
color: #EBEEF0 !important;
136+
}
137+
138+
.dm-text-secondary {
139+
color: #999F9B !important;
140+
}
141+
142+
/* Logo swap */
143+
.light-logo {
144+
display: none !important;
145+
}
146+
147+
.dark-logo {
148+
display: block !important;
149+
}
150+
151+
/* Link colors */
152+
.dm-link {
153+
color: #93C9A8 !important;
154+
}
155+
156+
/* Button colors */
157+
.dm-button {
158+
background-color: #93C9A8 !important;
159+
color: #161B18 !important;
160+
}
161+
162+
/* Badge adjustments for dark mode - inverted colors for contrast */
163+
.dm-badge-positive {
164+
background-color: #1F4C04 !important;
165+
color: #D8FFC0 !important;
166+
}
167+
168+
.dm-badge-negative {
169+
background-color: #7A1E00 !important;
170+
color: #FFDED3 !important;
171+
}
172+
173+
/* Border color */
174+
.dm-border {
175+
border-color: #2D332F !important;
176+
}
177+
}
178+
179+
/* Outlook app dark mode targeting via data-ogsc attribute */
180+
[data-ogsc] body,
181+
[data-ogsc] .body {
182+
background-color: #232824 !important;
183+
}
184+
185+
[data-ogsc] .dm-card {
186+
background-color: #161B18 !important;
187+
}
188+
189+
[data-ogsc] .dm-text-primary {
190+
color: #EBEEF0 !important;
191+
}
192+
193+
[data-ogsc] .dm-text-secondary {
194+
color: #999F9B !important;
195+
}
196+
197+
[data-ogsc] .light-logo {
198+
display: none !important;
199+
}
200+
201+
[data-ogsc] .dark-logo {
202+
display: block !important;
203+
}
204+
205+
[data-ogsc] .dm-link {
206+
color: #93C9A8 !important;
207+
}
208+
209+
[data-ogsc] .dm-button {
210+
background-color: #93C9A8 !important;
211+
color: #161B18 !important;
212+
}
213+
214+
[data-ogsc] .dm-badge-positive {
215+
background-color: #1F4C04 !important;
216+
color: #D8FFC0 !important;
217+
}
218+
219+
[data-ogsc] .dm-badge-negative {
220+
background-color: #7A1E00 !important;
221+
color: #FFDED3 !important;
222+
}
223+
224+
[data-ogsc] .dm-border {
225+
border-color: #2D332F !important;
226+
}
111227
</style>
112228
</head>
113229
<body>

‎includes/Core/Email_Reporting/templates/parts/change-badge.php‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@
1313
$change_value = (float) $value;
1414
$color = '#1F4C04';
1515
$background = '#D8FFC0';
16+
$badge_class = 'dm-badge-positive';
1617

1718
if ( $change_value < 0 ) {
18-
$color = '#7A1E00';
19-
$background = '#FFDED3';
19+
$color = '#7A1E00';
20+
$background = '#FFDED3';
21+
$badge_class = 'dm-badge-negative';
2022
}
2123

2224
$prefix = $change_value > 0 ? '+' : '';
@@ -32,7 +34,7 @@
3234
</v:roundrect>
3335
<![endif]-->
3436
<!--[if !mso]><!-->
35-
<span style="display:inline-block; padding:4px 8px; border-radius:12px; font-size:12px; font-weight:500; background:<?php echo esc_attr( $background ); ?>; color:<?php echo esc_attr( $color ); ?>; mso-hide:all;">
37+
<span class="<?php echo esc_attr( $badge_class ); ?>" style="display:inline-block; padding:4px 8px; border-radius:12px; font-size:12px; font-weight:500; background:<?php echo esc_attr( $background ); ?>; color:<?php echo esc_attr( $color ); ?>; mso-hide:all;">
3638
<?php echo esc_html( $display_value ); ?>
3739
</span>
3840
<!--<![endif]-->

0 commit comments

Comments
 (0)