Merge branch 'release' into 30-add-section-on-icons

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/

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);
+}

book/_toc.yml

@@ -79,6 +79,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

book/external/Nested-Books

@@ -1 +1 @@
-Subproject commit 3cf61525f3985916805a59361935764d78e460df
+Subproject commit 51f0ba6754f0a5f95032e09482a7a28145687624

book/external/Sphinx-TUDelft-theme

@@ -1 +1 @@
-Subproject commit 35ecbddad78b567a0b2d1d4bdb513d8b95181348
+Subproject commit 71399c659b037a550a253e38ddacfb33e03cc882

book/external/deploy-book-workflow

@@ -1 +1 @@
-Subproject commit ed2cdc81be5036deb8da244814a946d17ece7708
+Subproject commit 317a9cc8607f74f29957b28a86450eccba6a4e2c

book/external/teachbooks-sphinx-tippy

@@ -1 +1 @@
-Subproject commit a80e7645bc5a377b3c75befdf29eb67934bb9ab7
+Subproject commit 3f9a5c2a72607d5e32c3a99649f37a5e6548e92a

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>