diff --git a/book/_config.yml b/book/_config.yml
index 8c6fa4e..e1f3110 100644
--- a/book/_config.yml
+++ b/book/_config.yml
@@ -43,6 +43,10 @@ sphinx:
     html_static_path: ["images"]
     bibtex_default_style: myapastyle
     bibtex_reference_style: author_year_round
+    mathjax3_config:
+      tex:
+        macros:
+          "newcolor": ['\definecolor{newcolor}{RGB}{111, 29, 119}{\color{newcolor}#1}',1]
   local_extensions:
     apastyle: _ext/
     bracket_citation_style: _ext/
diff --git a/book/_static/color.css b/book/_static/color.css
new file mode 100644
index 0000000..8717fb4
--- /dev/null
+++ b/book/_static/color.css
@@ -0,0 +1,19 @@
+:root {
+    --newcolor-light: rgb(111, 29, 119);
+    --newcolor-dark: rgb(255, 167, 255);
+    --newcolor: var(--newcolor-light);
+}
+
+html[data-theme="dark"] {
+    --newcolor: var(--newcolor-dark);
+}
+
+.newcolor {color: var(--newcolor);}
+
+.newcolor-same {color: var(--newcolor-light);}
+
+.newcolor-filter {color: var(--newcolor-light);}
+
+html[data-theme="dark"] .newcolor-filter {
+    filter:  invert(1) hue-rotate(180deg) saturate(1.5);
+}
\ No newline at end of file
diff --git a/book/_toc.yml b/book/_toc.yml
index 79151fd..790c6d2 100644
--- a/book/_toc.yml
+++ b/book/_toc.yml
@@ -78,6 +78,7 @@ parts:
       - file: external/Sphinx-TUDelft-theme/README.md
       - file: external/teachbooks-sphinx-tippy/README.md
       - file: features/apa
+      - file: features/custom_colors.md
     - file: features/students
       sections:
       - file: external/annotater/README.md
diff --git a/book/features/custom_colors.md b/book/features/custom_colors.md
new file mode 100644
index 0000000..e004f9b
--- /dev/null
+++ b/book/features/custom_colors.md
@@ -0,0 +1,169 @@
+# Custom colors
+
+```{admonition} User types
+:class: tip
+This page is useful for user type 4 and 5.
+```
+
+Within these online books sometimes extra/new colors are wished for. In this page is shown how this can be achieved.
+
+## Using `definecolor`
+
+::::{warning}
+This method only works for $\LaTeX$  colors.
+::::
+
+::::{warning}
+In this case the color remains the same in ligt and dark mode.
+::::
+
+### Code in `_config.yml`
+
+```yaml
+sphinx:
+  config:
+    mathjax3_config:
+      tex:
+        macros:
+          "newcolor": ['\definecolor{newcolor}{RGB}{111, 29, 119}{\color{newcolor}#1}',1]
+```
+
+### Code in content
+
+```latex
+:::{math}
+\newcolor{\LaTeX}
+:::
+```
+
+### Result
+
+:::{math}
+\newcolor{\LaTeX}
+:::
+
+## Using CSS
+
+In this case one has three options:
+
+1. Light and dark mode the same color
+1. Light and dark mode different colors using two color definitions
+1. Light and dark mode different colors using a color filter
+
+### Light and dark mode the same color
+
+::::{note}
+This method has the benefit that the custom color can be used also within html and css elements.
+::::
+
+#### Code in `_static/color.css` 
+
+```css
+:root {
+    --newcolor: rgb(111, 29, 119);
+}
+
+.newcolor {color: var(--newcolor);}
+```
+
+#### Code in content
+
+```latex
+:::{math}
+\class{newcolor}{\LaTeX}
+:::
+```
+
+```html
+<div class="newcolor">HTML text</div>
+```
+
+#### Result
+
+:::{math}
+\class{newcolor-same}{\LaTeX}
+:::
+
+<div class="newcolor-same">HTML text</div>
+
+### Light and dark mode different colors using two color definitions
+
+::::{note}
+This method has the benefit that the custom colors can be used also within html and css elements with automatic changes when the mode changes from Light to dark or vice versa. 
+::::
+
+
+#### Code in `_static/color.css` 
+
+```css
+:root {
+    --newcolor: rgb(111, 29, 119);
+}
+
+html[data-theme="dark"] {
+    --newcolor: rgb(255, 167, 255)
+}
+
+.newcolor {color: var(--newcolor);}
+```
+
+#### Code in content
+
+```latex
+:::{math}
+\class{newcolor}{\LaTeX}
+:::
+```
+
+```html
+<div class="newcolor">HTML text</div>
+```
+
+#### Result
+
+:::{math}
+\class{newcolor}{\LaTeX}
+:::
+
+<div class="newcolor">HTML text</div>
+
+### Light and dark mode different colors using a color filter
+
+::::{warning}
+This method has the drawback that the custom colors can only be used as a class.
+::::
+
+#### Code in `_static/color.css` 
+
+```css
+:root {
+    --newcolor: rgb(111, 29, 119);
+}
+
+.newcolor {color: var(--newcolor);}
+
+html[data-theme="dark"] .newcolor {
+  filter:  invert(1) hue-rotate(180deg) saturate(1.5);
+}
+
+```
+
+#### Code in content
+
+```latex
+:::{math}
+\class{newcolor}{\LaTeX}
+:::
+```
+
+```html
+<div class="newcolor">HTML text</div>
+```
+
+#### Result
+
+:::{math}
+\class{newcolor-filter}{\LaTeX}
+:::
+
+<div class="newcolor-filter">HTML text</div>