diff --git a/.github/data/iOS.png b/.github/data/iOS.png
new file mode 100644
index 0000000..4475358
Binary files /dev/null and b/.github/data/iOS.png differ
diff --git a/.github/data/iPadOS.png b/.github/data/iPadOS.png
new file mode 100644
index 0000000..777f8d0
Binary files /dev/null and b/.github/data/iPadOS.png differ
diff --git a/.github/data/tvOS.png b/.github/data/tvOS.png
new file mode 100644
index 0000000..e539ba1
Binary files /dev/null and b/.github/data/tvOS.png differ
diff --git a/.github/data/visionOS.png b/.github/data/visionOS.png
new file mode 100644
index 0000000..f9d0d5f
Binary files /dev/null and b/.github/data/visionOS.png differ
diff --git a/Documentation/icons/android-chrome-192x192.png b/Documentation/icons/android-chrome-192x192.png
new file mode 100644
index 0000000..05650ea
Binary files /dev/null and b/Documentation/icons/android-chrome-192x192.png differ
diff --git a/Documentation/icons/android-chrome-256x256.png b/Documentation/icons/android-chrome-256x256.png
new file mode 100644
index 0000000..60bd352
Binary files /dev/null and b/Documentation/icons/android-chrome-256x256.png differ
diff --git a/Documentation/icons/apple-touch-icon.png b/Documentation/icons/apple-touch-icon.png
new file mode 100644
index 0000000..7f0dc4b
Binary files /dev/null and b/Documentation/icons/apple-touch-icon.png differ
diff --git a/Documentation/icons/browserconfig.xml b/Documentation/icons/browserconfig.xml
new file mode 100644
index 0000000..9aa4d43
--- /dev/null
+++ b/Documentation/icons/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/icons/mstile-150x150.png"/>
+            <TileColor>#603cba</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/Documentation/icons/favicon-16x16.png b/Documentation/icons/favicon-16x16.png
new file mode 100644
index 0000000..32dca95
Binary files /dev/null and b/Documentation/icons/favicon-16x16.png differ
diff --git a/Documentation/icons/favicon-32x32.png b/Documentation/icons/favicon-32x32.png
new file mode 100644
index 0000000..c798a0a
Binary files /dev/null and b/Documentation/icons/favicon-32x32.png differ
diff --git a/Documentation/icons/favicon.ico b/Documentation/icons/favicon.ico
new file mode 100644
index 0000000..36c99d4
Binary files /dev/null and b/Documentation/icons/favicon.ico differ
diff --git a/Documentation/icons/mstile-150x150.png b/Documentation/icons/mstile-150x150.png
new file mode 100644
index 0000000..9816692
Binary files /dev/null and b/Documentation/icons/mstile-150x150.png differ
diff --git a/Documentation/icons/site.webmanifest b/Documentation/icons/site.webmanifest
new file mode 100644
index 0000000..090f109
--- /dev/null
+++ b/Documentation/icons/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "ContrastKit",
+    "short_name": "ContrastKit",
+    "icons": [
+        {
+            "src": "/icons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/icons/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/Documentation/index.html b/Documentation/index.html
index 80ca877..3dfdd7e 100644
--- a/Documentation/index.html
+++ b/Documentation/index.html
@@ -1,10 +1,39 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-	<title>ContrastKit: Apple Swift Package</title>
 	<meta charset="UTF-8">
+	<title>ContrastKit: Apple Swift Package</title>
+	<meta name="twitter:title" content="ContrastKit: Apple Swift Package">
+	<meta property="og:title" content="ContrastKit: Apple Swift Package">
+	<meta property="og:site_name" content="ContrastKit: Apple Swift Package">
+	<link rel="canonical" href="https://contrastkit.markbattistella.com">
+	<meta name="twitter:url" content="https://contrastkit.markbattistella.com">
+	<meta property="og:url" content="https://contrastkit.markbattistella.com">
 	<meta name="description" content="ContrastKit is a Swift library designed to facilitate colour contrast handling within iOS, iPadOS, macOS, and tvOS applications. It provides developers with tools to automatically generate colour shades from any base colour and determine the most readable contrast colours according to established accessibility standards (AA Large, AA, and AAA).">
-	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+	<meta name="twitter:description" content="ContrastKit is a Swift library designed to facilitate colour contrast handling within iOS, iPadOS, macOS, and tvOS applications. It provides developers with tools to automatically generate colour shades from any base colour and determine the most readable contrast colours according to established accessibility standards (AA Large, AA, and AAA).">
+	<meta property="og:description" content="ContrastKit is a Swift library designed to facilitate colour contrast handling within iOS, iPadOS, macOS, and tvOS applications. It provides developers with tools to automatically generate colour shades from any base colour and determine the most readable contrast colours according to established accessibility standards (AA Large, AA, and AAA).">
+	<meta name="keywords" content="swift,swiftui,colour,color,ios,macos,visionos,tvos,themes,theming,design,ui">
+	<meta name="copyright" content="Mark Battistella">
+	<meta name="author" content="Mark Battistella">
+	<meta name="language" content="en-au">
+	<meta name="twitter:card" content="summary_large_image">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+	<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png?2024.05">
+	<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png?2024.05">
+	<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png?2024.05">
+	<link rel="manifest" href="/icons/site.webmanifest?2024.05">
+	<meta name="msapplication-TileColor" content="#603cba">
+	<meta name="theme-color" content="#ffffff">
+	<link rel="shortcut icon" href="/icons/favicon.ico?2024.05">
+	<meta name="apple-mobile-web-app-title" content="ContrastKit">
+	<meta name="application-name" content="ContrastKit">
+	<meta name="msapplication-config" content="/icons/browserconfig.xml?2024.05">
+	<meta name="theme-color" content="rgb(17, 17, 17)" media="(prefers-color-scheme: light)">
+	<meta name="theme-color" content="rgb(17, 17, 17)" media="(prefers-color-scheme: dark)">
+	<meta content="546" property="og:image:width">
+	<meta content="400" property="og:image:height">
+	<meta name="twitter:image" content="https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/banner.png">
+	<meta property="og:image" content="https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/banner.png">
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
 	<link rel="stylesheet" href="style.min.css">
 </head>
@@ -12,7 +41,7 @@
 	<div id="app"></div>
 	<script>
 	window.$docsify = {
-		name: 'ZodiacKit',
+		name: 'ContrastKit',
 		repo: 'https://github.com/markbattistella/ContrastKit',
 		homepage: 'https://raw.githubusercontent.com/markbattistella/ContrastKit/main/README.md',
 		auto2top: true,
diff --git a/README.md b/README.md
index 461e131..aac9e24 100644
--- a/README.md
+++ b/README.md
@@ -31,6 +31,7 @@ This package is particularly useful for UI/UX designers and developers focusing
 - [Provided Levels](#provided-levels)
   - [Colour Range](#colour-range)
   - [Contrast](#contrast)
+  - [Dark Mode](#dark-mode-optional)
 - [UITesting folder](#uitesting-folder)
   - [Debugging and Visualisation](#debugging-and-visualisation)
   - [Usage in Xcode](#usage-in-xcode)
@@ -171,33 +172,67 @@ ContrastKit provides two core enums to assist in designing UIs with appropriate
 
 The `ColorLevel` enum defines different levels of lightness for colours, which can be used to generate various shades from a single base colour. These shades range from very light (near white) to very dark (near black), suitable for different UI elements like backgrounds, text, and interactive elements.
 
-| Level    | Lightness | Description                                                         |
-| -------- | --------- | ------------------------------------------------------------------- |
-| level50  | 0.95      | Very light shade, almost white.                                     |
-| level100 | 0.90      | Very light shade.                                                   |
-| level200 | 0.80      | Lighter shade, for subtle backgrounds.                              |
-| level300 | 0.70      | Light shade, good for hover states or secondary buttons.            |
-| level400 | 0.60      | Medium light shade.                                                 |
-| level500 | 0.50      | Neutral base shade, often used for the primary variant of a colour. |
-| level600 | 0.40      | Medium dark shade.                                                  |
-| level700 | 0.30      | Darker shade, suitable for text.                                    |
-| level800 | 0.20      | Very dark shade, often used for text or active elements.            |
-| level900 | 0.10      | Very dark, closer to black.                                         |
-| level950 | 0.05      | Extremely dark, almost black.                                       |
-
-<img src="https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/light-mode.png" width="500" alt="Light Mode range of shades"/>
-
-<img src="https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/dark-mode.png" width="500" alt="Dark Mode range of shades"/>
+| Level      | Lightness | Description                                                         |
+|------------|-----------|---------------------------------------------------------------------|
+| `level50`  | `0.95`    | Very light shade, almost white.                                     |
+| `level100` | `0.90`    | Very light shade.                                                   |
+| `level200` | `0.80`    | Lighter shade, for subtle backgrounds.                              |
+| `level300` | `0.70`    | Light shade, good for hover states or secondary buttons.            |
+| `level400` | `0.60`    | Medium light shade.                                                 |
+| `level500` | `0.50`    | Neutral base shade, often used for the primary variant of a colour. |
+| `level600` | `0.40`    | Medium dark shade.                                                  |
+| `level700` | `0.30`    | Darker shade, suitable for text.                                    |
+| `level800` | `0.20`    | Very dark shade, often used for text or active elements.            |
+| `level900` | `0.10`    | Very dark, closer to black.                                         |
+| `level950` | `0.05`    | Extremely dark, almost black.                                       |
+
+| Light mode | Dark mode |
+|:-:|:-:|
+| ![Light Mode range of shades](https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/light-mode.png) | ![Dark Mode range of shades](https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/dark-mode.png) |
 
 ### Contrast
 
 The `ContrastLevel` enum specifies minimum and maximum contrast ratios for three accessibility standards: AA Large, AA, and AAA. These levels are based on the WCAG guidelines to ensure that text and interactive elements are readable and accessible.
 
-| Level    | Minimum Ratio | Maximum Ratio | Description                                     |
-| -------- | ------------- | ------------- | ----------------------------------------------- |
-| AA Large | 3.0           | 4.49          | Suitable for large text, offering basic readability. |
-| AA       | 4.5           | 6.99          | Standard level for normal text size, providing clear readability. |
-| AAA      | 7.0           | ∞             | Highest contrast level, recommended for the best readability across all contexts. |
+| Level    | Minimum Ratio | Maximum Ratio | Description |
+|----------|---------------|---------------|-------------|
+| AA Large | `3.0`         | `4.49`        | Suitable for large text, offering basic readability. |
+| AA       | `4.5`         | `6.99`        | Standard level for normal text size, providing clear readability. |
+| AAA      | `7.0`         | `.infinity`   | Highest contrast level, recommended for the best readability across all contexts. |
+
+### Dark mode (optional)
+
+ContrastKit also provides an optional dark mode (as pictured above) if you need the colours to adapt dynamically with your UI.
+
+You can do this by passing the `@Environment(\.colorScheme)` directly into the `level(_:scheme:)` function.
+
+```swift
+struct EnvironmentShadeView: View {
+  @Environment(\.colorScheme) private var colorScheme
+  var body: some View {
+    VStack {
+      Color.red.level(.level100, scheme: colorScheme)
+      Color.red.level(.level900, scheme: colorScheme)
+    }
+  }
+}
+```
+
+When the device switches colour schemes, the `ColorLevel` will flip:
+
+| Level      | Light mode | Dark mode equivalent |
+|------------|------------|----------------------|
+| `level50`  | `0.95`     | `0.05`               |
+| `level100` | `0.90`     | `0.10`               |
+| `level200` | `0.80`     | `0.20`               |
+| `level300` | `0.70`     | `0.30`               |
+| `level400` | `0.60`     | `0.40`               |
+| `level500` | `0.50`     | `0.50`               |
+| `level600` | `0.40`     | `0.60`               |
+| `level700` | `0.30`     | `0.70`               |
+| `level800` | `0.20`     | `0.80`               |
+| `level900` | `0.10`     | `0.90`               |
+| `level950` | `0.05`     | `0.95`               |
 
 ## UITesting folder
 
@@ -245,6 +280,16 @@ By modifying the `baseColor` or the `ColorLevel`, developers can experiment with
 
 The `PreviewTesting` file is a crucial tool for developers who are serious about integrating effective contrast handling in their applications, making ContrastKit a practical choice for enhancing UI accessibility.
 
+## Examples
+
+| iOS | iPadOS |
+|:-:|:-:|
+| ![iOS Shades example](https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/iOS.png) | ![iPad Shades example](https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/iPadOS.png) |
+
+| tvOS | visionOS |
+|:-:|:-:|
+| ![tvOS Shades example](https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/tvOS.png) | ![visionOS Shades example](https://raw.githubusercontent.com/markbattistella/ContrastKit/main/.github/data/visionOS.png) |
+
 ## Contributing
 
 Contributions are highly encouraged, as they help make ContrastKit even more useful to the developer community. Feel free to fork the project, submit pull requests, or send suggestions via GitHub issues.
diff --git a/Sources/ContrastKit/UITesting/Example+SwiftUI.swift b/Sources/ContrastKit/UITesting/Example+SwiftUI.swift
index 705781e..3546a05 100644
--- a/Sources/ContrastKit/UITesting/Example+SwiftUI.swift
+++ b/Sources/ContrastKit/UITesting/Example+SwiftUI.swift
@@ -63,6 +63,13 @@ internal struct EnvironmentShadeView: View {
                     ShadeCell(level, shade: shadeColor, contrast: contrastColor, info: contrastInfo)
                 }
             }
+            VStack {
+                baseColor.level(.level100, scheme: colorScheme)
+                baseColor.level(.level900, scheme: colorScheme)
+
+                baseColor.level(.level100, scheme: colorScheme).level900
+                baseColor.level(.level900, scheme: colorScheme).level100
+            }
         }
     }
 }
