Fix dark mode support for blog posts

The Rust blog has a light/dark mode switcher people are relying on.
Right now, generating a blog post and copying it as-is makes those
blog posts unreadable when dark mode is enabled.

Eric Huss fixed that manually for the September and October updates:

rust-lang/blog.rust-lang.org@823ab65

This is using that same fix at the source.

Author: tomassedovic

templates/goal_card.hbs

@@ -7,7 +7,7 @@
 
 <!-- Goal Information Table -->
 
-<table style="width: 100%; border-collapse: collapse; background: white;">
+<table style="width: 100%; border-collapse: collapse; background: var(--body-background-color);">
 <tr style="border-bottom: 1px solid #eee;">
 <td style="padding: 8px 16px; font-weight: bold; width: 80px; color: #666;">Progress</td>
 <td style="padding: 8px 16px;">{{>progress is_closed=is_closed progress=progress}}</td>
@@ -32,15 +32,15 @@
 
 <!-- TL;DR Section -->
 {{#if tldr}}
-<div style="padding: 12px 16px; background: #f8f9fa; border-bottom: 1px solid #eee;">
+<div style="padding: 12px 16px; background: var(--blockquote-bg-color); border-bottom: 1px solid #eee;">
 <strong>TL;DR.</strong> {{{markdown_to_html tldr}}}
 </div>
 {{/if}}
 
 <!-- Help Wanted Section -->
 {{#if has_help_wanted}}
 {{#each help_wanted}}
-<div style="padding: 12px 16px; background: #fff3cd; border-bottom: 1px solid #eee; border-left: 4px solid #ffc107;">
+<div style="padding: 12px 16px; background: #fff3cd; border-bottom: 1px solid #eee; border-left: 4px solid #ffc107; color: black;">
 <strong>Help wanted:</strong> {{{markdown_to_html text}}}
 </div>
 {{/each}}
@@ -49,14 +49,14 @@
 <!-- Updates Section -->
 {{#if comments}}
 <details style="border-top: 1px solid #eee;">
-<summary style="padding: 10px 16px; background: #f5f5f5; cursor: pointer; list-style: none; outline: none;">
+<summary style="padding: 10px 16px; background: var(--blockquote-bg-color); cursor: pointer; list-style: none; outline: none;">
 <span style="font-weight: bold;">{{{markdown_to_html details_summary}}}</span>
 </summary>
-<div style="padding: 12px 16px; background: white;">
+<div style="padding: 12px 16px; background: var(--body-background-color);">
 {{#each comments}}
 <div style="margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f0f0f0;">
 <a href="{{url}}" style="color: #0366d6; font-weight: 500; text-decoration: none;">Comment by {{author}} posted on {{created_at}}:</a>
-<div style="margin-top: 8px; padding: 12px; background: #f8f9fa; border-left: 4px solid #e1e4e8; border-radius: 0 6px 6px 0;">
+<div style="margin-top: 8px; padding: 12px; background: var(--blockquote-bg-color); border-left: 4px solid #e1e4e8; border-radius: 0 6px 6px 0;">
 {{{markdown_to_html body}}}
 </div>
 </div>
@@ -65,7 +65,7 @@
 </details>
 {{else}}
 <details style="border-top: 1px solid #eee;">
-<summary style="padding: 10px 16px; background: #f5f5f5; cursor: pointer; list-style: none; outline: none;">
+<summary style="padding: 10px 16px; background: var(--blockquote-bg-color); cursor: pointer; list-style: none; outline: none;">
 <span style="font-weight: bold;">{{details_summary}}</span>
 </summary>
 </details>