Theme Global Base Styles

src/styles/theme/colors/background.js

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file Provides theme background colors.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.2.0
+ */
+
+import nord from "./nord";
+import { MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "../constants";
+
+const base = {
+  [MODE_BRIGHT_SNOW_FLURRY]: "#fff",
+  [MODE_DARK_NIGHT_FROST]: nord.nord0
+};
+
+const background = { base };
+
+export default background;

src/styles/theme/colors/font.js

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file Provides theme font colors.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.2.0
+ */
+
+import nord from "./nord";
+import { MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "../constants";
+
+const base = {
+  [MODE_BRIGHT_SNOW_FLURRY]: nord.nord3,
+  [MODE_DARK_NIGHT_FROST]: nord.nord6
+};
+
+const font = { base };
+
+export default font;

src/styles/theme/colors/index.js

@@ -14,10 +14,14 @@
  * @since 0.2.0
  */
 
+import background from "./background";
+import font from "./font";
 import nord from "./nord";
 import palettes from "./palettes";
 
 const colors = {
+  background,
+  font,
   ...nord,
   ...palettes
 };

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;
   }
 `;