Using ColdFusion Custom Tags To Create An HTML Email DSL In Lucee CFML 5.3.7.47, Part V

Body.cfm

<!--- Import custom tag libraries. --->
<cfimport prefix="core" taglib="../core/" />
<cfimport prefix="html" taglib="../core/html/" />

<!--- // ------------------------------------------------------------------------- // --->
<!--- // ------------------------------------------------------------------------- // --->

<cfswitch expression="#thistag.executionMode#">
	<cfcase value="start">
		<cfoutput>

			<cfset theme = getBaseTagData( "cf_email" ).theme />
			<cfset theme.importUrls.append( "https://fonts.googleapis.com/css?family=Poppins:100,200,300,500|Roboto:100,200,300,400,500,600,700" ) />

			<!--- Update the base fonts for the custom font-family import. --->
			<core:HtmlEntityTheme entity="h1, h2, h3, h4, h5, th">
				font-family: Poppins, BlinkMacSystemFont, helvetica, arial, sans-serif ;
				font-weight: 500 ; <!--- Highest that Poppins goes. --->
			</core:HtmlEntityTheme>
			<core:HtmlEntityTheme entity="blockquote, img, li, p, td">
				font-family: Roboto, BlinkMacSystemFont, helvetica, arial, sans-serif ;
			</core:HtmlEntityTheme>
			<!---
				Since MSO / Outlook clients won't load remote fonts, we have to define a
				solid fallback font family and weight.
			--->
			<core:HeaderContent>
				<core:IfMso>
					<style type="text/css">
						h1, h2, h3, h4, h5, th {
							font-family: helvetica, arial, sans-serif !important ;
							font-weight: 800 !important ;
						}
						blockquote, body, img, li, p, td {
							font-family: helvetica, arial, sans-serif !important ;
						}
					</style>
				</core:IfMso>
			</core:HeaderContent>
			<!--- Setup the dark mode color overrides. --->
			<core:DarkModeStyles>
				.html-entity-blockquote,
				.html-entity-h1,
				.html-entity-h2,
				.html-entity-h3,
				.html-entity-h4,
				.html-entity-h5,
				.html-entity-img,
				.html-entity-li,
				.html-entity-p,
				.html-entity-td,
				.html-entity-th {
					color: cyan ;
				}

				.html-entity-blockquote {
					border-left-color: ##666666 ;
				}

				.html-entity-a {
					color: #theme.dark.primary# ;
				}
			</core:DarkModeStyles>

		</cfoutput>
	</cfcase>
	<cfcase value="end">
		<cfoutput>

			<core:HtmlEntityTheme entity="table" class="e6-body">
				border: 1px solid ##ebecee ;
				border-width: 0px 1px 1px 1px ;
			</core:HtmlEntityTheme>
			<core:HtmlEntityTheme entity="td" class="e6-body-top-border">
				background-color: ##ff3366 ;
				font-size: 1px ;
				height: 2px ;
				line-height: 2px ;
			</core:HtmlEntityTheme>
			<core:HtmlEntityTheme entity="td" class="e6-body-content">
				padding: 45px 0px 30px 0px ;
			</core:HtmlEntityTheme>
			<core:HtmlEntityTheme entity="td" class="e6-body-footer">
				background-color: ##f8f8fa ;
				border-top: 1px solid ##ebecee ;
				color: ##6c7689 ;
				font-size: 12px ;
				font-weight: 400 ;
				line-height: 17px ;
				padding: 20px 0px 20px 0px ;
			</core:HtmlEntityTheme>
			<core:HtmlEntityTheme entity="a" class="e6-body-footer-link">
				color: ##276ee5 ;
			</core:HtmlEntityTheme>
			<!--- Setup responsive styles. --->
			<core:MaxWidthStyles>
				.e6-body {
					border-width: 0px 0px 0px 0px ;
					width: 100% ;
				}

				.e6-body-gutter {
					width: 20px ;
				}

				.e6-body-content {
					padding: 20px 0px 20px 0px ;
				}
			</core:MaxWidthStyles>
			<!--- Setup the dark mode color overrides. --->
			<core:DarkModeStyles>
				.e6-body {
					border-color: ##666666 ;
				}

				.e6-body-footer {
					background-color: ##333333 ;
					border-top-color: ##666666 ;
					color: ##cccccc ;
				}

				.e6-body-footer-link {
					color: ##ffffff ;
				}
			</core:DarkModeStyles>


			<html:table width="#theme.width#" class="e6-body">
			<html:tr>
				<html:td colspan="3" class="e6-body-top-border">
					<br />
				</html:td>
			</html:tr>
			<html:tr>
				<html:td width="60" class="e6-body-gutter">
					<!--- Left margin. ---><br />
				</html:td>
				<html:td class="e6-body-content">

					#thistag.generatedContent#

				</html:td>
				<html:td width="60" class="e6-body-gutter">
					<!--- Right margin. ---><br />
				</html:td>
			</html:tr>
			<html:tr>
				<html:td colspan="3" align="center" class="e6-body-footer">

					Questions?
					<html:a href="https://www.bennadel.com" decoration="false" class="e6-body-footer-link">I'm here to help.</html:a>

				</html:td>
			</html:tr>
			</html:table>

			<!--- Reset the generated content since we're overriding the output. --->
			<cfset thistag.generatedContent = "" />

		</cfoutput>
	</cfcase>
</cfswitch>

DarkModeStyles.cfm

<!--- Import custom tag libraries. --->
<cfimport prefix="core" taglib="./" />

<!--- Define custom tag attributes. --->
<cfparam name="attributes.injectImportant" type="boolean" default="true" />

<!--- // ------------------------------------------------------------------------- // --->
<!--- // ------------------------------------------------------------------------- // --->

<cfswitch expression="#thistag.executionMode#">
	<cfcase value="end">
		<cfoutput>

			<cfset theme = getBaseTagData( "cf_email" ).theme />
			<cfset theme.enableDarkModeSupport = true />

			<core:MediaQueryStyles
				name="prefers-color-scheme"
				value="dark"
				injectImportant="#attributes.injectImportant#">
				#thistag.generatedContent#
			</core:MediaQueryStyles>

			<!--- Reset the generated content since we're overriding the output. --->
			<cfset thistag.generatedContent = "" />

		</cfoutput>
	</cfcase>
</cfswitch>

example6.cfm

<!--- Import custom tag libraries. --->
<cfimport prefix="core" taglib="./core/" />
<cfimport prefix="ex6" taglib="./ex6/" />
<cfimport prefix="html" taglib="./core/html/" />

<!--- // ------------------------------------------------------------------------- // --->
<!--- // ------------------------------------------------------------------------- // --->

<core:Email
	subject="Playing with media queries"
	teaser="Seeing if dark mode works.">
	<ex6:Body>

		<html:h1>
			Trying to formulate ideas around dark mode.
		</html:h1>

		<html:blockquote>
			<html:p>
				Our deepest fear is not that we are inadequate. Our deepest fear is
				that we are powerful beyond measure. It is our light, not our darkness,
				that most frightens us. Your playing small does not serve the world.
				There is nothing enlightened about shrinking so that other people won't
				feel insecure around you. We are all meant to shine as children do. It's
				not just in some of us; it is in everyone. And as we let our own lights
				shine, we unconsciously give other people permission to do the same. As
				we are liberated from our own fear, our presence automatically liberates
				others.
			</html:p>
		</html:blockquote>

		<html:p>
			&mdash; <html:strong>Marianne Williamson</html:strong>
		</html:p>

	</ex6:Body>
</core:Email>

snippet-1.cfm

<!--- ... truncated content. ... --->

<cfif theme.enableDarkModeSupport>
	<meta name="color-scheme" content="light dark" />
	<meta name="supported-color-schemes" content="light dark" />
</cfif>

<!--- ... truncated content. ... --->

<cfif theme.enableDarkModeSupport>

	<style type="text/css">
		:root {
			color-scheme: light dark ;
			supported-color-schemes: light dark ;
		}
	</style>

</cfif>

<!--- ... truncated content. ... --->