diff --git a/CHANGELOG.md b/CHANGELOG.md
index c914be6..12d2e50 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `config.extra.show_share_button` confog variable for enabling share button in articles (#73).
 - Add `external` class to comment timestamp.
 - Add `h1` with page/section title by default.
+- Add ability to set accent color per page/section.
+- Add ability to set default theme per page/section.
 - Add active state to footer's "Powered by" links.
 - Add active state to footnotes' go back button.
 - Add active state to slider thumb.
diff --git a/templates/base.html b/templates/base.html
index cd4ebd7..4a605da 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -8,7 +8,7 @@
 {%- set rtl_languages = ["ar", "arc", "az", "dv", "ff", "he", "ku", "nqo", "fa", "rhg", "syc", "ur"] -%}
 
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" {% if lang in rtl_languages %}dir="rtl"{% endif %} lang="{{ lang }}" {% if config.extra.default_theme %}data-theme="{{config.extra.default_theme}}"{% endif %}>
+<html xmlns="http://www.w3.org/1999/xhtml" {% if lang in rtl_languages %}dir="rtl"{% endif %} lang="{{ lang }}" {% include "partials/default_theme.html" %}>
 {% include "partials/head.html" %}
 <body>
 {% block body %}
diff --git a/templates/partials/default_theme.html b/templates/partials/default_theme.html
new file mode 100644
index 0000000..2362727
--- /dev/null
+++ b/templates/partials/default_theme.html
@@ -0,0 +1,7 @@
+{%- if page.extra.default_theme -%}
+    data-theme="{{ page.extra.default_theme }}"
+{%- elif section.extra.default_theme -%}
+    data-theme="{{ section.extra.default_theme }}"
+{%- elif config.extra.default_theme -%}
+    data-theme="{{ config.extra.default_theme }}"
+{%- endif -%}
diff --git a/templates/partials/head.html b/templates/partials/head.html
index 2fbcfb9..c67cbc1 100644
--- a/templates/partials/head.html
+++ b/templates/partials/head.html
@@ -38,44 +38,7 @@
 		<link rel="alternate" type={% if config.feed_filenames[0] == "atom.xml" %}"application/atom+xml"{% else %}"application/rss+xml"{% endif %} title="{{ config.title }}" href="{{ get_url(path=config.feed_filenames[0]) | safe }}" />
 	{%- endif %}
 
-	<style type="text/css">
-		:root {
-			--accent-color: {{ config.extra.accent_color | default(value="#6f8396") | safe }};
-			--contrast-color: {% if config.extra.fix_contrast %}rgb(0 0 0 / 80%){% else %}#fff{% endif %};
-		}
-
-		{%- if config.extra.accent_color_dark %}
-			[data-theme="dark"] {
-				--accent-color: {{ config.extra.accent_color_dark | safe }};
-			}
-
-			@media (prefers-color-scheme: dark) {
-				:root:not([data-theme="light"]) {
-					--accent-color: {{ config.extra.accent_color_dark | safe }};
-				}
-			}
-		{%- endif %}
-
-		{%- if config.extra.fix_contrast_dark %}
-			[data-theme="dark"] {
-				--contrast-color: rgb(0 0 0 / 80%);
-			}
-
-			@media (prefers-color-scheme: dark) {
-				:root:not([data-theme="light"]) {
-					--contrast-color: rgb(0 0 0 / 80%);
-				}
-			}
-		{%- endif %}
-
-		{%- if config.extra.debug_layout -%}
-			*,
-			*::before,
-			*::after {
-				outline: solid 1px var(--accent-color);
-			}
-		{%- endif -%}
-	</style>
+	{%- include "partials/variables.html" %}
 
 	{%- set styles = [ "style.css" ] %}
 
diff --git a/templates/partials/variables.html b/templates/partials/variables.html
new file mode 100644
index 0000000..7380d2e
--- /dev/null
+++ b/templates/partials/variables.html
@@ -0,0 +1,73 @@
+<style type="text/css">
+	:root {
+		{%- if page.extra.accent_color -%}
+			--accent-color: {{ page.extra.accent_color | safe }};
+		{%- elif section.extra.accent_color -%}
+			--accent-color: {{ section.extra.accent_color | safe }};
+		{%- else -%}
+			--accent-color: {{ config.extra.accent_color | default(value="#6f8396") | safe }};
+		{%- endif -%}
+
+		{%- if page.extra.fix_contrast -%}
+			--contrast-color: rgb(0 0 0 / 80%);
+		{%- elif section.extra.fix_contrast -%}
+			--contrast-color: rgb(0 0 0 / 80%);
+		{%- elif config.extra.fix_contrast -%}
+			--contrast-color: rgb(0 0 0 / 80%);
+		{%- else -%}
+			--contrast-color: #fff;
+		{%- endif -%}
+	}
+
+	{%- if page.extra.accent_color_dark -%}
+		[data-theme="dark"] {
+			--accent-color: {{ page.extra.accent_color_dark | safe }};
+		}
+
+		@media (prefers-color-scheme: dark) {
+			:root:not([data-theme="light"]) {
+				--accent-color: {{ page.extra.accent_color_dark | safe }};
+			}
+		}
+	{%- elif section.extra.accent_color_dark -%}
+		[data-theme="dark"] {
+			--accent-color: {{ section.extra.accent_color_dark | safe }};
+		}
+
+		@media (prefers-color-scheme: dark) {
+			:root:not([data-theme="light"]) {
+				--accent-color: {{ section.extra.accent_color_dark | safe }};
+			}
+		}
+	{%- elif config.extra.accent_color_dark -%}
+		[data-theme="dark"] {
+			--accent-color: {{ config.extra.accent_color_dark | safe }};
+		}
+
+		@media (prefers-color-scheme: dark) {
+			:root:not([data-theme="light"]) {
+				--accent-color: {{ config.extra.accent_color_dark | safe }};
+			}
+		}
+	{%- endif -%}
+
+	{%- if page.extra.fix_contrast_dark or section.extra.fix_contrast_dark or config.extra.fix_contrast_dark -%}
+		[data-theme="dark"] {
+			--contrast-color: rgb(0 0 0 / 80%);
+		}
+
+		@media (prefers-color-scheme: dark) {
+			:root:not([data-theme="light"]) {
+				--contrast-color: rgb(0 0 0 / 80%);
+			}
+		}
+	{%- endif -%}
+
+	{%- if page.extra.debug_layout or section.extra.debug_layout or config.extra.debug_layout -%}
+		*,
+		*::before,
+		*::after {
+			outline: solid 1px var(--accent-color);
+		}
+	{%- endif -%}
+</style>
