Skip to content

PoC Dark mode accommodations for email template for testing. #12119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
benbowler wants to merge 1 commit into from
Closed

PoC Dark mode accommodations for email template for testing. #12119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/images/email-development/1.171.0/email-report/site-kit-logo-dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 11 additions & 5 deletions includes/Core/Email_Reporting/templates/email-report/parts/header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
* @var callable $get_asset_url Function to generate asset URLs.
*/

$logo_url = $get_asset_url( 'site-kit-logo.png' );
$logo_light_url = $get_asset_url( 'site-kit-logo.png' );
$logo_dark_url = $get_asset_url( 'site-kit-logo-dark.png' );
$shooting_stars_url = $get_asset_url( 'shooting-stars-graphic.png' );
?>
<table role="presentation" width="100%">
Expand All @@ -21,7 +22,12 @@
<table role="presentation" width="100%">
<tr>
<td style="vertical-align:top;" width="79">
<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;" />
<?php /* Light mode logo (default) */ ?>
<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;" />
<?php /* Dark mode logo (hidden by default, shown in dark mode via CSS) */ ?>
<!--[if !mso]><!-->
<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;" />
<!--<![endif]-->
</td>
<?php /* Extra centering for Outlook. */ ?>
<td style="vertical-align:top; text-align:center;" align="center">
Expand All @@ -33,10 +39,10 @@
</tr>
<tr>
<td style="text-align:center; vertical-align:middle; font-size:13px; color: #161B18;" colspan="3">
<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>
<div style="font-weight: 500; size: 14px; line-height: 20px; margin: 0; margin-top: 2px;"><?php echo esc_html( $date_label ); ?></div>
<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>
<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>
<?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. */ ?>
<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>
<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>
</td>
</tr>
</table>
Expand Down
14 changes: 7 additions & 7 deletions ...des/Core/Email_Reporting/templates/email-report/parts/section-conversions-metric-part.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,14 @@
?>
</td>
<td>
<div style="font-size:16px; line-height:24px; font-weight:500; margin-bottom:5px;">
<div class="dm-text-primary" style="font-size:16px; line-height:24px; font-weight:500; margin-bottom:5px;">
<?php echo esc_html( $label ); ?>
</div>

<table role="presentation" width="100%"
<table role="presentation" width="100%" class="dm-border"
style="padding-bottom: 10px; border-bottom: 1px solid #EBEEF0; margin-bottom: 10px;">
<tr>
<td style="font-size:12px; font-weight:500; color:#6C726E; text-align: left; padding-bottom: 8px;">
<td class="dm-text-secondary" style="font-size:12px; font-weight:500; color:#6C726E; text-align: left; padding-bottom: 8px;">
<?php
printf(
/* translators: %s: Event name (e.g., "Purchase") */
Expand All @@ -53,14 +53,14 @@
);
?>
</td>
<td width="110"
<td class="dm-text-secondary" width="110"
style="font-size:12px; font-weight:500; color:#6C726E; text-align: right; width: 110px; padding-bottom: 10px;">
<?php echo esc_html( $change_context ); ?>
</td>
</tr>
<tr>
<td>
<div style="font-size:14px; line-height:20px; font-weight:500;">
<div class="dm-text-primary" style="font-size:14px; line-height:20px; font-weight:500;">
<?php echo esc_html( $value ); ?>
</div>
</td>
Expand All @@ -78,10 +78,10 @@
</table>

<?php if ( ! empty( $dimension ) ) : ?>
<div style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E; margin-bottom:4px;">
<div class="dm-text-secondary" style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E; margin-bottom:4px;">
<?php esc_html_e( 'Top traffic channel driving the most conversions', 'google-site-kit' ); ?>
</div>
<div style="font-size:14px; line-height:20px; font-weight:500;">
<div class="dm-text-primary" style="font-size:14px; line-height:20px; font-weight:500;">
<?php echo esc_html( $dimension_value ); ?>
</div>
<?php endif; ?>
Expand Down
8 changes: 4 additions & 4 deletions includes/Core/Email_Reporting/templates/email-report/parts/section-conversions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
?>
<table role="presentation" width="100%" style="margin-bottom:24px;">
<tr>
<td style="background-color: #FFFFFF; border-radius: 16px; padding: 16px;">
<td class="dm-card" style="background-color: #FFFFFF; border-radius: 16px; padding: 16px;">
<?php
// Render section header.
$icon_url = $get_asset_url( 'icon-' . esc_html( $section_icon ) . '.png' );
Expand All @@ -39,15 +39,15 @@
?>
<table role="presentation" width="100%" style="margin-bottom:16px;">
<tr>
<td style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E;">
<td class="dm-text-secondary" style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E;">
<?php echo esc_html( $section_parts['total_conversion_events']['data']['label'] ); ?>
</td>
<td width="110" style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E; text-align: right; width: 110px;">
<td class="dm-text-secondary" width="110" style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E; text-align: right; width: 110px;">
<?php echo esc_html( $section_parts['total_conversion_events']['data']['change_context'] ); ?>
</td>
</tr>
<tr>
<td style="font-size:14px; line-height:20px; font-weight:500;">
<td class="dm-text-primary" style="font-size:14px; line-height:20px; font-weight:500;">
<?php echo esc_html( $section_parts['total_conversion_events']['data']['value'] ); ?>
</td>
<td style="text-align: right; padding: 6px 0;">
Expand Down
4 changes: 2 additions & 2 deletions includes/Core/Email_Reporting/templates/email-report/parts/section-header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@
</tr>
<tr>
<td style="vertical-align:top;">
<div style="font-size:18px; line-height:24px; font-weight:500;">
<div class="dm-text-primary" style="font-size:18px; line-height:24px; font-weight:500;">
<?php echo esc_html( $title ); ?>
</div>
<div style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E;">
<div class="dm-text-secondary" style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E;">
<?php echo esc_html( $subtitle ); ?>
</div>
</td>
Expand Down
12 changes: 6 additions & 6 deletions includes/Core/Email_Reporting/templates/email-report/parts/section-metrics.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
?>
<table role="presentation" width="100%" style="margin-bottom:24px;">
<tr>
<td style="background-color: #FFFFFF; border-radius: 16px; padding: 16px;">
<td class="dm-card" style="background-color: #FFFFFF; border-radius: 16px; padding: 16px;">
<?php
// Render section header.
$icon_url = $get_asset_url( 'icon-' . esc_html( $section_icon ) . '.png' );
Expand All @@ -43,7 +43,7 @@
<table role="presentation" width="100%" style="margin-bottom:12px;">
<tr>
<td>&nbsp;</td>
<td width="110"
<td class="dm-text-secondary" width="110"
style="text-align: right; font-size:12px; line-height:16px; font-weight:500; color:#6C726E; width: 110px;">
<?php echo esc_html( $subtitle ); ?>
</td>
Expand All @@ -64,17 +64,17 @@
}
?>
<tr>
<td
<td class="dm-border"
style="vertical-align: top; border-bottom: <?php echo esc_attr( $border_style ); ?>; padding: 12px 0;">
<div
<div class="dm-text-secondary"
style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E; margin-bottom:4px;">
<?php echo esc_html( $data['label'] ); ?>
</div>
<div style="font-size:14px; line-height:20px; font-weight:500;">
<div class="dm-text-primary" style="font-size:14px; line-height:20px; font-weight:500;">
<?php echo esc_html( $data['value'] ); ?>
</div>
</td>
<td
<td class="dm-border"
style="text-align: right; vertical-align: middle; border-bottom: <?php echo esc_attr( $border_style ); ?>; padding: 12px 0;">
<?php
$render_shared_part(
Expand Down
14 changes: 7 additions & 7 deletions includes/Core/Email_Reporting/templates/email-report/parts/section-page-metrics.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
?>
<table role="presentation" width="100%" style="margin-bottom:24px;">
<tr>
<td style="background-color: #FFFFFF; border-radius: 16px; padding: 16px;">
<td class="dm-card" style="background-color: #FFFFFF; border-radius: 16px; padding: 16px;">
<?php
// Render section header.
$icon_url = $get_asset_url( 'icon-' . esc_html( $section_icon ) . '.png' );
Expand All @@ -56,12 +56,12 @@
?>
<table role="presentation" width="100%" style="margin-bottom:16px;">
<tr>
<td style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E; padding-bottom:8px;">
<td class="dm-text-secondary" style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E; padding-bottom:8px;">
<div style="width: 160px;">
<?php echo esc_html( $part_label ); ?>
</div>
</td>
<td
<td class="dm-text-secondary"
style="font-size:12px; line-height:16px; font-weight:500; color:#6C726E; text-align:right; padding-bottom:8px; text-align:right; width: 110px;">
<?php echo esc_html( $change_context ); ?>
</td>
Expand All @@ -79,23 +79,23 @@
}
?>
<tr>
<td colspan="2"
<td class="dm-border" colspan="2"
style="border-bottom: <?php echo esc_attr( $border_style ); ?>; padding: 5px 0; <?php echo $is_last && ! $is_last_section_part ? 'padding-bottom: 16px;' : ''; ?>">
<?php // Nested table required to ensure truncation works correctly for longer labels. ?>
<table role="presentation" width="100%">
<tr>
<td
<td class="dm-text-primary"
style="font-size:14px; line-height:20px; font-weight:500; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
<?php if ( $has_url ) : ?>
<a href="<?php echo esc_url( $entity_url ); ?>"
<a class="dm-text-primary" href="<?php echo esc_url( $entity_url ); ?>"
style="color:#161B18; text-decoration:underline;">
<?php echo esc_html( $item['label'] ); ?>
</a>
<?php else : ?>
<?php echo esc_html( $item ); ?>
<?php endif; ?>
</td>
<td
<td class="dm-text-primary"
style="font-size:14px; line-height:20px; font-weight:500; text-align:right; width:80px;">
<?php echo esc_html( $data['values'][ $index ] ?? 0 ); ?>
</td>
Expand Down
2 changes: 1 addition & 1 deletion includes/Core/Email_Reporting/templates/email-report/parts/view-more-in-dashboard.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<table role="presentation" width="100%">
<tr>
<td style="text-align:right; height: 16px;" height="16">
<a href="<?php echo esc_url( $url ); ?>" style="font-size:12px; line-height:16px; font-weight:500; color:#108080; text-decoration:none;">
<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;">
<?php echo esc_html( $label ); ?>
<img src="<?php echo esc_url( $arrow_url ); ?>" alt="" width="10" height="10" style="vertical-align:middle; margin-left:4px; margin-bottom: 2px;" />
</a>
Expand Down
118 changes: 117 additions & 1 deletion includes/Core/Email_Reporting/templates/email-report/template.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<?php /* Enable dark mode support in email clients that honor these meta tags. */ ?>
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
<?php /* Outlook requires this VML to prevent visual bugs when DPI is scaled on Windows. */ ?>
<!--[if gte mso 9]>
<xml>
Expand All @@ -44,7 +47,7 @@
<title><?php echo esc_html( $subject ); ?></title>
<style>
:root {
color-scheme: light;
color-scheme: light dark;
}

body {
Expand Down Expand Up @@ -108,6 +111,119 @@
opacity: 0;
overflow: hidden;
}

/* Dark mode logo handling - hide dark logo by default */
.dark-logo {
display: none !important;
}

/* Dark mode styles for email clients that support prefers-color-scheme */
@media (prefers-color-scheme: dark) {
/* Body and container backgrounds */
body,
.body {
background-color: #232824 !important;
}

/* Content card/section backgrounds */
.dm-card {
background-color: #161B18 !important;
}

/* Text colors */
.dm-text-primary {
color: #EBEEF0 !important;
}

.dm-text-secondary {
color: #999F9B !important;
}

/* Logo swap */
.light-logo {
display: none !important;
}

.dark-logo {
display: block !important;
}

/* Link colors */
.dm-link {
color: #93C9A8 !important;
}

/* Button colors */
.dm-button {
background-color: #93C9A8 !important;
color: #161B18 !important;
}

/* Badge adjustments for dark mode - inverted colors for contrast */
.dm-badge-positive {
background-color: #1F4C04 !important;
color: #D8FFC0 !important;
}

.dm-badge-negative {
background-color: #7A1E00 !important;
color: #FFDED3 !important;
}

/* Border color */
.dm-border {
border-color: #2D332F !important;
}
}

/* Outlook app dark mode targeting via data-ogsc attribute */
[data-ogsc] body,
[data-ogsc] .body {
background-color: #232824 !important;
}

[data-ogsc] .dm-card {
background-color: #161B18 !important;
}

[data-ogsc] .dm-text-primary {
color: #EBEEF0 !important;
}

[data-ogsc] .dm-text-secondary {
color: #999F9B !important;
}

[data-ogsc] .light-logo {
display: none !important;
}

[data-ogsc] .dark-logo {
display: block !important;
}

[data-ogsc] .dm-link {
color: #93C9A8 !important;
}

[data-ogsc] .dm-button {
background-color: #93C9A8 !important;
color: #161B18 !important;
}

[data-ogsc] .dm-badge-positive {
background-color: #1F4C04 !important;
color: #D8FFC0 !important;
}

[data-ogsc] .dm-badge-negative {
background-color: #7A1E00 !important;
color: #FFDED3 !important;
}

[data-ogsc] .dm-border {
border-color: #2D332F !important;
}
</style>
</head>
<body>
Expand Down
8 changes: 5 additions & 3 deletions includes/Core/Email_Reporting/templates/parts/change-badge.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,12 @@
$change_value = (float) $value;
$color = '#1F4C04';
$background = '#D8FFC0';
$badge_class = 'dm-badge-positive';

if ( $change_value < 0 ) {
$color = '#7A1E00';
$background = '#FFDED3';
$color = '#7A1E00';
$background = '#FFDED3';
$badge_class = 'dm-badge-negative';
}

$prefix = $change_value > 0 ? '+' : '';
Expand All @@ -32,7 +34,7 @@
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<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;">
<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;">
<?php echo esc_html( $display_value ); ?>
</span>
<!--<![endif]-->
2 changes: 1 addition & 1 deletion includes/Core/Email_Reporting/templates/parts/dashboard-link.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="<?php echo esc_url( $url ); ?>" style="font-size:14px; line-height:20px; font-weight:500; text-decoration:none; display:inline-block; background:#3C7251; color:#ffffff; padding:10px 16px; border-radius:100px; mso-hide:all;" rel="noopener" target="_blank">
<a class="dm-button" href="<?php echo esc_url( $url ); ?>" style="font-size:14px; line-height:20px; font-weight:500; text-decoration:none; display:inline-block; background:#3C7251; color:#ffffff; padding:10px 16px; border-radius:100px; mso-hide:all;" rel="noopener" target="_blank">
<?php echo esc_html( $label ); ?>
</a>
<!--<![endif]-->
Loading