diff --git a/book/installation-and-setup/user_types.md b/book/installation-and-setup/user_types.md
index cdebe1b..b776305 100644
--- a/book/installation-and-setup/user_types.md
+++ b/book/installation-and-setup/user_types.md
@@ -9,6 +9,7 @@ Different types of users will interact with the website or the Jupyter Books dif
 name: usertype1
 width: 300px
 align: center
+:class: dark-light
 ---
 
 ```
@@ -26,6 +27,7 @@ There are multiple tools of providing feedback in the built book:
 name: usertype2
 width: 300px
 align: center
+:class: dark-light
 ---
 
 ```
@@ -39,6 +41,7 @@ In a similar manner as students, colleagues and team members can leave content-r
 name: usertype3
 width: 300px
 align: center
+:class: dark-light
 ---
 
 ```
@@ -52,6 +55,7 @@ This type of user requires only very basic knowledge in GitLab/GitHub in order t
 name: usertype4
 width: 300px
 align: center
+:class: dark-light
 ---
 
 ```
@@ -65,6 +69,7 @@ User 4 is a hybrid between type 3 and 5. Basically this user is making changes b
 name: usertype5
 width: 300px
 align: center
+:class: dark-light
 ---
 
 ```
diff --git a/book/intro/next.md b/book/intro/next.md
index 4fb2a20..274bbf7 100644
--- a/book/intro/next.md
+++ b/book/intro/next.md
@@ -9,6 +9,7 @@ In this manual we explain how to get going depending on the way you want to use
 name: usertype1
 width: 300px
 align: center
+:class: dark-light
 ---
 User type 3
 ```
diff --git a/book/intro/template.md b/book/intro/template.md
index c45f4e1..dbb7ad1 100644
--- a/book/intro/template.md
+++ b/book/intro/template.md
@@ -5,6 +5,7 @@
 name: template
 width: 150px
 align: right
+:class: dark-light
 ```
 
 Now that you've been introduced to the basics of a Jupyter Book, let's make one! The TeachBooks Team has put together a set of tools to make the book-creation process as smooth and automatic as possible. This page guides you through the process of creating a book, followed by a series of exercises that are designed to help you get used to the syntax and structure of a Jupyter Book, as well as the tools and essential workflows associated with the editing, checking and review processes.
@@ -35,6 +36,7 @@ The exercises can be found in your book at `https://<username or organiszation_n
 name: exercises
 width: 200px
 align: center
+:class: dark-light
 ```
 
 
diff --git a/book/intro/workflow.md b/book/intro/workflow.md
index bc0c038..3d0aa47 100644
--- a/book/intro/workflow.md
+++ b/book/intro/workflow.md
@@ -9,6 +9,7 @@ Assuming you have a book (well make that happen soon!) and you're ready to colla
 ---
 width: 70px
 align: right
+:class: dark-light
 ```
 You have an idea to improve a book or add some content! Let's make that happen! Share you idea with the book-authors to let them know you're starting something! Maybe someone else has some ideas on it as well. Later on, you can use GitHub `Issues`, `Projects` and `Milestones` to keep track of this.
 
@@ -17,6 +18,7 @@ You have an idea to improve a book or add some content! Let's make that happen!
 ---
 width: 100px
 align: right
+:class: dark-light
 ```
 Let's create a space for you idea to form. You can create your own version of the book, visible for everyone to see. On GitHub, you'll use `branches` or `forks`.
 
@@ -25,6 +27,7 @@ Let's create a space for you idea to form. You can create your own version of th
 ---
 width: 100px
 align: right
+:class: dark-light
 ```
 Creativity activated, let's start adding content to your book! You'll add text, images, videos, math, interactive quizes, coding, widgets, etc. As editing the book is not directly done in a graphical interface with buttons like Microsoft Word, you'll need to learn a bit of syntax. The [MyST syntax cheat sheet](https://jupyterbook.org/en/stable/reference/cheatsheet.html) will be added to your bookmarks. The changes you'll make have to be added to the GitHub version control system, creating `commits` on the your git `branch`.
 
@@ -33,6 +36,7 @@ Creativity activated, let's start adding content to your book! You'll add text,
 ---
 width: 100px
 align: right
+:class: dark-light
 ```
 You've made a change, how does is look like? Your raw file have to be parsed. You can do that yourself or use the tooling provided by use in a GitHub `Action`. As soon as you uploaded (`pushed` in Git language) your changes to GitHub, it'll create a nice looking website for you!
 
@@ -41,6 +45,7 @@ You've made a change, how does is look like? Your raw file have to be parsed. Yo
 ---
 width: 100px
 align: right
+:class: dark-light
 ```
 You'll make mistakes and you'll want to alter content... many, many times... As long as your idea is not ready to be shared with other, keep iterating step 3 and 4 until it's perfect!
 
@@ -49,6 +54,7 @@ You'll make mistakes and you'll want to alter content... many, many times... As
 ---
 width: 100px
 align: right
+:class: dark-light
 ```
 You're done! Great! Now let's see what others think of your contribution. You'll submit your changes to the original book, in GitHub language this is called a `Pull request`. Other will be able to review, adapt and eventually `merge` your version into the book!