diff --git a/README.md b/README.md
index 22ebd17..6be10d9 100644
--- a/README.md
+++ b/README.md
@@ -65,6 +65,22 @@ or as a partial to your html templates:
 {{ partial "git-heatmap.html" . }}
 ```
 
+You can configure the colors and captions, see the example from my site's configuration below:
+
+```toml
+[params.heatmap]
+caption = "This is my unified git heatmap from my <a href='https://forge.alexselimov.com/aselimov'>Forgejo</a> and <a href='https://github.com/aselimov'>Github</a>"
+color_empty_light = "#e8e4dc"
+color_empty_dark = "#2a2a2a"
+color_max = "#7a5010"
+color_high = "#C47E1A"
+color_mid = "#EF9F27"
+color_low = "#F7C46A"
+swap_colors = true # Optional, defaults to true
+```
+
+The colors swap, `color_low <--> color_max, color_mid <--> color_high` based on the user prefers setting by default. Set `swap_colors = false` to keep the same low-to-max color order in both light and dark modes.
+
 ### Keeping activity in-sync
 
 I host my site (and some other self-hosted stuff) on a Vultr vps.
@@ -74,10 +90,10 @@ To keep my activity in sync, I just set up a cron job that does:
 */30 * * * * go run forge.alexselimov.com/aselimov/hugo-unified-git-activity/get_history@latest -o /var/www/alexselimov.com/activity.json
 ```
 
-If you aren't on a VPS and using actions to deploy your site ([That's how I deploy my personal blog](https://forge.alexselimov.com/aselimov/AlexSelimov.com/src/branch/master/.forgejo/workflows/build_and_deploy_site.yml)), you can just add an action to update your `static/activity.json` and deploy however often you want.
+If you aren't on a VPS and using actions to deploy your site ([that's how I deploy my personal blog](https://forge.alexselimov.com/aselimov/AlexSelimov.com/src/branch/master/.forgejo/workflows/build_and_deploy_site.yml)), you can just add an action to update your `static/activity.json` and deploy however often you want.
 
 ## Important Notes
 
-- I originally wrote it in Typescript but thought go would be better to distribute to Hugo users (since you probably already have go installed) **so the go version is a completely vibed port**. I didn't look at the code, but it's probably fine? I did verify it's not sending credentials anywhere at least haha.
+- I originally wrote it in Typescript but thought go would be better to distribute to Hugo users (since you probably already have go installed) **so the go version is a completely vibed port**. I didn't look at the code, but it's probably fine? I did verify it's not sending credentials anywhere at least.
 - Private repo contributions are tracked, but they are anonymized in the activity.json. It shows up as `"private": "<count>"`.
 - I added Gitlab functionality but I don't use Gitlab so it may have issues. I set up a test account and did a quick test to make sure a new commit showed up, but good likelihood of edge cases.
diff --git a/hugo.toml b/hugo.toml
index b283b66..b05ff36 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -1,9 +1,13 @@
-baseURL = 'https://example.org/'
-locale = 'en-us'
-title = 'My New Hugo Project'
+baseURL = 'http://localhost:1313/'
+languageCode = 'en-us'
+title = 'Heatmap Example'
 
 [params.heatmap]
-color_empty = "#F5F5F5"
-color_low   = "#BDD7EE"
-color_mid   = "#2E86C1"
-color_high  = "#1A5276"
+color_empty_light = "#e8e4dc"
+color_empty_dark  = "#2a2a2a"
+color_low         = "#7a5010"
+color_mid         = "#C47E1A"
+color_high        = "#EF9F27"
+color_max         = "#F7C46A"
+caption           = "Git contributions over the last year"
+swap_colors       = true
diff --git a/layouts/partials/git-heatmap.html b/layouts/partials/git-heatmap.html
index 25c9e79..5a4d98a 100644
--- a/layouts/partials/git-heatmap.html
+++ b/layouts/partials/git-heatmap.html
@@ -1,13 +1,22 @@
 {{ $js := resources.Get "js/build_heatmap.js" }}
 {{ $p := .Site.Params.heatmap }}
+{{ $swapColors := true }}
+{{ if isset $p "swap_colors" }}{{ $swapColors = $p.swap_colors }}{{ end }}
 
 <style>
 :root {
   --color-empty: {{ $p.color_empty_dark }};
+  {{ if $swapColors }}
   --color-l1: {{ $p.color_max }};
   --color-l2: {{ $p.color_high }};
   --color-l3: {{ $p.color_mid }};
   --color-l4: {{ $p.color_low }};
+  {{ else }}
+  --color-l1: {{ $p.color_low }};
+  --color-l2: {{ $p.color_mid }};
+  --color-l3: {{ $p.color_high }};
+  --color-l4: {{ $p.color_max }};
+  {{ end }}
 }
 @media (prefers-color-scheme: light) {
   :root {