Integrate basic font and background colors in global CSS theme styles

This includes a `transition` for both attributes to ensure a smooth
theme mode transition.

Associated epic: GH-51
GH-59

src/styles/theme/globals.js

@@ -16,7 +16,21 @@
 
 import { css } from "styled-components";
 
+import colors from "./colors";
+import { speed } from "./motion";
 import typography from "./typography";
+import { themedMode } from "./utils";
+import { MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "./constants";
+
+const baseBackgroundColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.background.base[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.background.base[MODE_DARK_NIGHT_FROST]
+});
+
+const baseFontColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.font.base[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.font.base[MODE_DARK_NIGHT_FROST]
+});
 
 const globals = css`
   html {
@@ -28,6 +42,10 @@ const globals = css`
     font-size: ${typography.sizes.msBase}rem;
     font-weight: ${typography.sizes.weight};
     line-height: ${typography.sizes.lineHeight};
+    color: ${baseFontColor};
+    background-color: ${baseBackgroundColor};
+    transition: color ${speed.duration.transition.base.themeModeSwitch}s ease-in-out,
+      background-color ${speed.duration.transition.base.themeModeSwitch}s ease-in-out;
     scroll-behavior: smooth;
   }
 `;