Use dark mode

_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

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}

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.

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.

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.

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.

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.
 

competitions/neurips_2021_docs/docs.css

@@ -0,0 +1,3 @@
+img.img-fluid, img.thumnail-image {
+    background-color: #ffffff;
+}

competitions/neurips_2021_docs/submission/index.qmd

@@ -5,4 +5,5 @@ order:  5
 listing:
   contents: "*.qmd"
   type: default
+css: ../docs.css
 ---

competitions/neurips_2021_docs/submission/starter_kit_contents.qmd

@@ -1,6 +1,7 @@
 ---
 title: "Starter kit contents"
 order: 20
+css: ../docs.css
 ---
 
 

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}

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}

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}

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}

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}

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}

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}

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}

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}

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}

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}

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}

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

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

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;

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

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

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

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