diff --git a/_quarto.yml b/_quarto.yml
index 7d9c3bd..0670368 100644
--- a/_quarto.yml
+++ b/_quarto.yml
@@ -52,10 +52,9 @@ website:
       contents: competitions/neurips_2021_docs
 format:
   html:
-    # theme:
-    #   light: [ simplex, theme.scss ]
-    #   dark: [ darkly, theme.scss ]
-    theme: [ simplex, theme.scss ]
+    theme:
+      light: [ simplex, theme.scss, theme-light.scss]
+      dark: [ darkly, theme.scss, theme-dark.scss ]
     css: styles.css
     toc: true
     link-external-newwindow: true
diff --git a/bibliography/index.qmd b/bibliography/index.qmd
index 9e1a00b..67f106d 100644
--- a/bibliography/index.qmd
+++ b/bibliography/index.qmd
@@ -6,7 +6,7 @@ sidebar: false
 page-layout: full
 resources: 
   - "library.bib"
-css: [../styles.css, ../style-hero.css, biblio.css]
+css: [../style-hero.css, biblio.css]
 ---
 
 ```{=html}
diff --git a/competitions/neurips_2021_docs/about_tasks/index.qmd b/competitions/neurips_2021_docs/about_tasks/index.qmd
index 5debba8..ea887f6 100644
--- a/competitions/neurips_2021_docs/about_tasks/index.qmd
+++ b/competitions/neurips_2021_docs/about_tasks/index.qmd
@@ -5,6 +5,7 @@ order: 4
 listing:
   contents: "*.qmd"
   type: default
+css: ../docs.css
 ---
 
 The competition will focus on three tasks. Click on each header to learn more.
diff --git a/competitions/neurips_2021_docs/about_tasks/task1_modality_prediction.qmd b/competitions/neurips_2021_docs/about_tasks/task1_modality_prediction.qmd
index eaae385..1c5b188 100644
--- a/competitions/neurips_2021_docs/about_tasks/task1_modality_prediction.qmd
+++ b/competitions/neurips_2021_docs/about_tasks/task1_modality_prediction.qmd
@@ -3,6 +3,7 @@ title: "Task 1: Modality Prediction"
 description: Predicting the flow of information from DNA to RNA and RNA to Protein
 image: ../images/predict.svg
 order: 2
+css: ../docs.css
 ---
 
 Experimental techniques to measure multiple modalities within the same single cell are increasingly becoming available. The demand for these measurements is driven by the promise to provide a deeper insight into the state of a cell. Yet, the modalities are also intrinsically linked. We know that DNA must be accessible (ATAC data) to produce mRNA (expression data), and mRNA in turn is used as a template to produce protein (protein abundance). These processes are regulated often by the same molecules that they produce: for example, a protein may bind DNA to prevent the production of more mRNA. Understanding these regulatory processes would be transformative for synthetic biology and drug target discovery. Any method that can predict a modality from another must have accounted for these regulatory processes, but the demand for multi-modal data shows that this is not trivial.
diff --git a/competitions/neurips_2021_docs/about_tasks/task2_modality_matching.qmd b/competitions/neurips_2021_docs/about_tasks/task2_modality_matching.qmd
index 61b9f75..971cebf 100644
--- a/competitions/neurips_2021_docs/about_tasks/task2_modality_matching.qmd
+++ b/competitions/neurips_2021_docs/about_tasks/task2_modality_matching.qmd
@@ -3,6 +3,7 @@ title: "Task 2: Modality Matching"
 description: Matching profiles of each cell from different modalities.
 image: ../images/match.svg
 order: 3
+css: ../docs.css
 ---
 
 While joint profiling of two modalities in the same single cell is now possible, most single-cell datasets that exist measure only a *single* modality. These modalities complement each other in their description of cellular state. Yet, it is challenging to analyse uni-modal datasets together when they do not share observations (cells) or a common feature space (genes, proteins, or open chromatin peaks). If we could map observations to one another across modalities, it would be possible to treat separately profiled datasets in the same manner as new multi-modal sequencing data. Mapping these modalities to one another opens up the vast amount of uni-modal single-cell datasets generated in the past years to multi-modal data analysis methods.
diff --git a/competitions/neurips_2021_docs/about_tasks/task3_joint_embedding.qmd b/competitions/neurips_2021_docs/about_tasks/task3_joint_embedding.qmd
index a45e348..4c9942c 100644
--- a/competitions/neurips_2021_docs/about_tasks/task3_joint_embedding.qmd
+++ b/competitions/neurips_2021_docs/about_tasks/task3_joint_embedding.qmd
@@ -3,6 +3,7 @@ title: "Task 3: Joint Embedding"
 description: Learn a joint embedding from multiple modalities
 image: ../images/integrate.svg
 order: 3
+css: ../docs.css
 ---
 
 The functioning of organs, tissues, and whole organisms is determined by the interplay of cells. Cells are characterised into broad types, which in turn can take on different states. Here, a cell state is made up of the sum of all processes that are occurring within the cell. We can gain insight into the state of a cell by different types of measurements: e.g., RNA expression, protein abundance, or chromatin conformation. Combining this information to describe cellular heterogeneity requires the formation of joint embeddings generated from this multimodal data. These embeddings must account for and remove possible batch effects between different measurement batches. The reward for methods that can achieve this is great: a highly resolved description of the underlying biological state of a cell that determines its function, how it interacts with other cells, and thus the cell’s role in the functioning of the whole tissue.
diff --git a/competitions/neurips_2021_docs/data/about_multimodal.qmd b/competitions/neurips_2021_docs/data/about_multimodal.qmd
index f5f99e1..2d2b8d1 100644
--- a/competitions/neurips_2021_docs/data/about_multimodal.qmd
+++ b/competitions/neurips_2021_docs/data/about_multimodal.qmd
@@ -1,6 +1,7 @@
 ---
 title: "About multimodal single-cell data"
 order: 2
+css: ../docs.css
 ---
 The goal for this page is to provide an introduction to multimodal single-cell data and the specific datasets used in the competition. We know that many participants may be encountering this data type for the first time (it's only been around for a couple of years!), and so this page serves as a general introduction. At the end you will find further reading recommendations that you can consult if you'd like to learn more.
 
diff --git a/competitions/neurips_2021_docs/docs.css b/competitions/neurips_2021_docs/docs.css
new file mode 100644
index 0000000..95454c2
--- /dev/null
+++ b/competitions/neurips_2021_docs/docs.css
@@ -0,0 +1,3 @@
+img.img-fluid, img.thumnail-image {
+    background-color: #ffffff;
+}
\ No newline at end of file
diff --git a/competitions/neurips_2021_docs/submission/index.qmd b/competitions/neurips_2021_docs/submission/index.qmd
index 51b33fb..87aacad 100644
--- a/competitions/neurips_2021_docs/submission/index.qmd
+++ b/competitions/neurips_2021_docs/submission/index.qmd
@@ -5,4 +5,5 @@ order:  5
 listing:
   contents: "*.qmd"
   type: default
+css: ../docs.css
 ---
diff --git a/competitions/neurips_2021_docs/submission/starter_kit_contents.qmd b/competitions/neurips_2021_docs/submission/starter_kit_contents.qmd
index 24b9310..80349a6 100644
--- a/competitions/neurips_2021_docs/submission/starter_kit_contents.qmd
+++ b/competitions/neurips_2021_docs/submission/starter_kit_contents.qmd
@@ -1,6 +1,7 @@
 ---
 title: "Starter kit contents"
 order: 20
+css: ../docs.css
 ---
 
 
diff --git a/images/logo.png b/images/logo.png
index d22640d..c5e664d 100644
Binary files a/images/logo.png and b/images/logo.png differ
diff --git a/results/batch_integration_embed/index.qmd b/results/batch_integration_embed/index.qmd
index 4abfb94..ec3d7f5 100644
--- a/results/batch_integration_embed/index.qmd
+++ b/results/batch_integration_embed/index.qmd
@@ -4,6 +4,7 @@ subtitle: "Removing batch effects while preserving biological variation (embeddi
 engine: knitr
 image: featured.png
 page-layout: full
+css: ../task_template.css
 ---
 
 ```{r}
diff --git a/results/batch_integration_feature/index.qmd b/results/batch_integration_feature/index.qmd
index df21902..3c71618 100644
--- a/results/batch_integration_feature/index.qmd
+++ b/results/batch_integration_feature/index.qmd
@@ -4,6 +4,7 @@ subtitle: "Removing batch effects while preserving biological variation (feature
 engine: knitr
 image: featured.png
 page-layout: full
+css: ../task_template.css
 ---
 
 ```{r}
diff --git a/results/batch_integration_graph/index.qmd b/results/batch_integration_graph/index.qmd
index b822081..91b3527 100644
--- a/results/batch_integration_graph/index.qmd
+++ b/results/batch_integration_graph/index.qmd
@@ -4,6 +4,7 @@ subtitle: "Removing batch effects while preserving biological variation (graph o
 engine: knitr
 image: featured.png
 page-layout: full
+css: ../task_template.css
 ---
 
 ```{r}
diff --git a/results/cell_cell_communication_ligand_target/index.qmd b/results/cell_cell_communication_ligand_target/index.qmd
index 2ba2d55..fd9776d 100644
--- a/results/cell_cell_communication_ligand_target/index.qmd
+++ b/results/cell_cell_communication_ligand_target/index.qmd
@@ -4,6 +4,7 @@ subtitle: "Detect interactions between ligands and target cell types"
 engine: knitr
 image: featured.png
 page-layout: full
+css: ../task_template.css
 ---
 
 ```{r}
diff --git a/results/cell_cell_communication_source_target/index.qmd b/results/cell_cell_communication_source_target/index.qmd
index 51bd77d..95cdc46 100644
--- a/results/cell_cell_communication_source_target/index.qmd
+++ b/results/cell_cell_communication_source_target/index.qmd
@@ -4,6 +4,7 @@ subtitle: "Detect interactions between source and target cell types"
 engine: knitr
 image: featured.png
 page-layout: full
+css: ../task_template.css
 ---
 
 ```{r}
diff --git a/results/denoising/index.qmd b/results/denoising/index.qmd
index 890bd7c..1d8b397 100644
--- a/results/denoising/index.qmd
+++ b/results/denoising/index.qmd
@@ -4,6 +4,7 @@ subtitle: "Removing noise in sparse single-cell RNA-sequencing count data"
 engine: knitr
 image: featured.png
 page-layout: full
+css: ../task_template.css
 ---
 
 ```{r}
diff --git a/results/dimensionality_reduction/index.qmd b/results/dimensionality_reduction/index.qmd
index cafda07..369d13f 100644
--- a/results/dimensionality_reduction/index.qmd
+++ b/results/dimensionality_reduction/index.qmd
@@ -4,6 +4,7 @@ subtitle: "Reduction of high-dimensional datasets to 2D for visualization & inte
 engine: knitr
 image: featured.png
 page-layout: full
+css: ../task_template.css
 ---
 
 ```{r}
diff --git a/results/index.qmd b/results/index.qmd
index daa55c2..2c3c565 100644
--- a/results/index.qmd
+++ b/results/index.qmd
@@ -10,7 +10,7 @@ listing:
     contents: "*/index.qmd"
     template: tasks.ejs
 toc: false
-css: [../styles.css, ../style-hero.css, tasks.css]
+css: [../style-hero.css, tasks.css]
 ---
 
 :::{#tasks}
diff --git a/results/label_projection/index.qmd b/results/label_projection/index.qmd
index fcecc54..1d953dd 100644
--- a/results/label_projection/index.qmd
+++ b/results/label_projection/index.qmd
@@ -4,6 +4,7 @@ subtitle: "Automated cell type annotation from rich, labeled reference data"
 engine: knitr
 image: featured.png
 page-layout: full
+css: ../task_template.css
 ---
 
 ```{r}
diff --git a/results/matching_modalities/index.qmd b/results/matching_modalities/index.qmd
index 7bcfd69..c771f16 100644
--- a/results/matching_modalities/index.qmd
+++ b/results/matching_modalities/index.qmd
@@ -4,6 +4,7 @@ subtitle: "Alignment of cellular profiles from two different modalities"
 engine: knitr
 image: featured.png
 page-layout: full
+css: ../task_template.css
 ---
 
 ```{r}
diff --git a/results/regulatory_effect_prediction/index.qmd b/results/regulatory_effect_prediction/index.qmd
index 3b6f481..16749fe 100644
--- a/results/regulatory_effect_prediction/index.qmd
+++ b/results/regulatory_effect_prediction/index.qmd
@@ -4,6 +4,7 @@ subtitle: "Prediction of gene expression from chromatin accessibility"
 engine: knitr
 image: featured.png
 page-layout: full
+css: ../task_template.css
 ---
 
 ```{r}
diff --git a/results/spatial_decomposition/index.qmd b/results/spatial_decomposition/index.qmd
index baeea5a..6a576f2 100644
--- a/results/spatial_decomposition/index.qmd
+++ b/results/spatial_decomposition/index.qmd
@@ -4,6 +4,7 @@ subtitle: "Calling cell-type compositions for spot-based spatial transcriptomics
 engine: knitr
 image: featured.png
 page-layout: full
+css: ../task_template.css
 ---
 
 ```{r}
diff --git a/results/task_template.css b/results/task_template.css
new file mode 100644
index 0000000..6fdb0c2
--- /dev/null
+++ b/results/task_template.css
@@ -0,0 +1,64 @@
+details > summary {
+    color: var(--bs-secondary-text-color);
+}
+
+/* Data table */
+
+.dataTables_wrapper {
+    color: var(--bs-body-color);
+}
+.dataTables_wrapper button {
+    color: var(--bs-body-color);
+}
+
+div.dtsp-searchCont input.dtsp-search::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: var(--bs-body-color);
+    opacity: 1; /* Firefox */
+}
+
+div.dtsp-searchCont input.dtsp-search:-ms-input-placeholder { /* Internet Explorer 10-11 */
+    color: var(--bs-body-color);
+}
+
+div.dtsp-searchCont input.dtsp-search::-ms-input-placeholder { /* Microsoft Edge */
+    color: var(--bs-body-color);
+}
+
+div.dtsp-panesContainer .dtsp-titleRow button {
+    color: var(--bs-body-color);
+}
+div.dtsp-panesContainer .dtsp-titleRow button.dtsp-disabledButton {
+    color: var(--bs-secondary);
+}
+div.dtsp-panesContainer .dtsp-titleRow button:hover {
+    background-color: var(--bs-button-hover);
+}
+div.dtsp-panesContainer .dtsp-titleRow button.dtsp-disabledButton:hover {
+    background-color: unset;
+}
+
+div.dtsp-topRow.dtsp-bordered:hover {
+    background-color: var(--bs-button-hover);
+}
+div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane input.dtsp-paneInputButton:hover, div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane button.dtsp-paneButton:hover {
+    background-color: var(--bs-button-hover);
+}
+div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane button.dtsp-paneButton.dtsp-searchIcon, div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane button.dtsp-paneButton.dtsp-nameButton, div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane button.dtsp-paneButton.dtsp-countButton {
+    filter: invert(var(--invert-colors));
+}
+div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane button.dtsp-paneButton.dtsp-searchIcon:hover, div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane button.dtsp-paneButton.dtsp-nameButton:hover, div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane button.dtsp-paneButton.dtsp-countButton:hover {
+    background-color: var(--bs-invert-button-hover);
+}
+div.dtsp-panesContainer div.dataTables_wrapper div.dataTables_scrollBody {
+    background-color: var(--bs-body-bg) !important;
+}
+
+/* Funkyheatmap */
+
+.quarto-figure svg text {
+    fill: var(--bs-body-color);
+}
+
+.quarto-figure svg rect.row ~ text {
+    fill: var(--bs-dark);
+}
\ No newline at end of file
diff --git a/results/tasks.css b/results/tasks.css
index ceb36dd..7e03a0a 100644
--- a/results/tasks.css
+++ b/results/tasks.css
@@ -9,3 +9,7 @@
 .quarto-grid-item .card-text {
   margin-bottom: auto;
 }
+
+.card-shadow .card-img-top {
+  background-color: var(--bs-white);
+}
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 1ff62d4..851298e 100644
--- a/styles.css
+++ b/styles.css
@@ -8,10 +8,41 @@ a {
   text-decoration: none;
 }
 
+code {
+  color: var(--bs-code-color);
+}
+
+.navbar {
+  border-width: 0px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.nav-link {
+  padding: 0.9rem 1rem;
+}
+
+.navbar-brand {
+  padding-top: 0.7125rem;
+  padding-bottom: 0.7125rem;
+}
+
+.navbar-dark {
+  background-color: var(--bs-body-bg);
+}
+
 .navbar-logo {
   max-height: 48px;
 }
 
+.navbar .quarto-color-scheme-toggle .bi::before {
+  background-image: var(--moon-svg) !important;
+}
+
+.navbar-collapse .quarto-color-scheme-toggle {
+  margin-top: -20px;
+}
+
 @media screen and (max-width: 575.98px) {
   .navbar-logo {
     max-height: 30px;
@@ -35,8 +66,6 @@ a {
   }
 }
 
-
-
 .mermaid svg {
   display: block;
   margin: auto;
@@ -65,14 +94,13 @@ header#quarto-header {
 .card-shadow {
   overflow: hidden;
   text-overflow: ellipsis;
-  background: #fff;
-  box-shadow: 0 2px 4px rgba(0,0,0,.4);
+  background: var(--bs-body-bg);
+  box-shadow: 0 2px 4px var(--shadow-color);
   transition: all .2s ease-out;
 }
-
 a .card-shadow:hover,
 .card-shadow:has(a):hover {
-  box-shadow: 0 8px 16px rgba(0,0,0,.4);
+  box-shadow: 0 8px 16px var(--shadow-color);
 }
 .card .btn {
   margin-top: 0.5rem;
diff --git a/team/team.css b/team/team.css
index 95c3d22..100ffef 100644
--- a/team/team.css
+++ b/team/team.css
@@ -53,14 +53,14 @@
 .portrait-title h5 {
   font-size: 1.4em;
   font-weight: 300;
-  color: #000;
+  color: var(--bs-body-color);
   margin: 20px 0 10px;
 }
 
 .portrait-title h6 {
   font-size: 1rem;
   font-weight: 300;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--bs-secondary-text-color);
   margin: 0 0 10px;
 }
 
diff --git a/theme-dark.scss b/theme-dark.scss
new file mode 100644
index 0000000..da3f4da
--- /dev/null
+++ b/theme-dark.scss
@@ -0,0 +1,19 @@
+/*-- scss:defaults --*/
+$font-family-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$body-bg: #333;
+
+:root {
+  --invert-colors: 1;
+  --bs-secondary-text-color: #bcc5cd;
+  --bs-code-color: #bf6de8;
+  --bs-button-hover: #444;
+  --bs-invert-button-hover: #cfcfcf;
+}
+
+.navbar .quarto-color-scheme-toggle .bi::before {
+  --moon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='20' fill='%23dee2e6' title='moon'%3E%3Cpath d='M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z' /%3E%3C/svg%3E");
+}
+
+.card-shadow {
+    --shadow-color: #000;
+}
\ No newline at end of file
diff --git a/theme-light.scss b/theme-light.scss
new file mode 100644
index 0000000..de407da
--- /dev/null
+++ b/theme-light.scss
@@ -0,0 +1,16 @@
+/*-- scss:defaults --*/
+:root {
+  --invert-colors: 0;
+  --bs-secondary-text-color: #6c757d;
+  --bs-code-color: #9753b8;
+  --bs-button-hover: #f0f0f0;
+  --bs-invert-button-hover: #f0f0f0;
+}
+
+.navbar .quarto-color-scheme-toggle .bi::before {
+  --moon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='20' fill='%23666666' title='moon'%3E%3Cpath d='M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z' /%3E%3C/svg%3E");
+}
+
+.card-shadow {
+    --shadow-color: #5a6268;
+}
\ No newline at end of file
diff --git a/theme.scss b/theme.scss
index 4697d07..7f72726 100644
--- a/theme.scss
+++ b/theme.scss
@@ -1,6 +1,7 @@
 /*-- scss:defaults --*/
 $primary: #ff414b;
 $secondary: #5a6268;
+$link-color: $primary;
 
 /* Fonts */
 @font-face {
@@ -36,6 +37,5 @@ p {
 
 a {
   font-family: 'hk_groteskmedium', Fallback, sans-serif;
-  color: #d15454;
     font-weight: bold;
 }
\ No newline at end of file