diff --git a/docusaurus.config.js b/docusaurus.config.js
index a5fd7b2..a5edb04 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -74,7 +74,8 @@ const config = {
},
colorMode: {
defaultMode: 'light',
- disableSwitch: true,
+ disableSwitch: false,
+ respectPrefersColorScheme: true,
},
prism: {
theme: prismThemes.github,
diff --git a/src/css/custom.css b/src/css/custom.css
index 007b52a..26ad667 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -61,10 +61,11 @@
}
}
-/* Reduce footer height */
+/* Reduce footer height and match the page background */
.footer {
padding-top: 0rem;
padding-bottom: 0.75rem;
+ --ifm-footer-background-color: var(--ifm-background-color);
}
.footer__links {
@@ -90,37 +91,35 @@
.sidebar-container {
width: 330px;
- background-color: #f8f9fa;
- border: 1px solid #ddd;
+ background-color: var(--ifm-background-color);
padding: 20px;
min-height: 72vh;
max-height: 72vh;
overflow-y: auto;
position: sticky;
top: 20px;
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.sidebar-container h3 {
font-size: 1.2rem;
margin-bottom: 15px;
- color: #333;
+ color: var(--ifm-heading-color);
font-weight: 500;
- border-bottom: 2px solid #e9ecef;
+ border-bottom: 2px solid var(--ifm-color-emphasis-200);
padding-bottom: 8px;
}
.sidebar-container h4 {
font-size: 1rem;
margin-bottom: 10px;
- color: #333;
+ color: var(--ifm-heading-color);
font-weight: 500;
}
.sidebar-container-divider {
border: none;
height: 1px;
- background-color: #dee2e6;
+ background-color: var(--ifm-color-emphasis-300);
margin: 15px 0;
}
diff --git a/src/pages/DmriNiivueCanvasHuman.jsx b/src/pages/DmriNiivueCanvasHuman.jsx
index 814b84b..a79b9c8 100644
--- a/src/pages/DmriNiivueCanvasHuman.jsx
+++ b/src/pages/DmriNiivueCanvasHuman.jsx
@@ -248,20 +248,20 @@ export const DmriNiivueCanvasHuman = () => (
- | Scroll slices |
- Scroll wheel |
+ Scroll slices |
+ Scroll wheel |
- | Move crosshair |
- Left click |
+ Move crosshair |
+ Left click |
- | Pan |
- Middle click |
+ Pan |
+ Middle click |
- | Zoom |
- Right click |
+ Zoom |
+ Right click |
diff --git a/src/pages/DmriNiivueCanvasMacaque.jsx b/src/pages/DmriNiivueCanvasMacaque.jsx
index f23cb3a..a4a6a50 100644
--- a/src/pages/DmriNiivueCanvasMacaque.jsx
+++ b/src/pages/DmriNiivueCanvasMacaque.jsx
@@ -335,20 +335,20 @@ export const DmriNiivueCanvasMacaque = () => (
- | Scroll slices |
- Scroll wheel |
+ Scroll slices |
+ Scroll wheel |
- | Move crosshair |
- Left click |
+ Move crosshair |
+ Left click |
- | Pan |
- Middle click |
+ Pan |
+ Middle click |
- | Zoom |
- Right click |
+ Zoom |
+ Right click |
diff --git a/src/pages/PathwaysNiivueCanvas.jsx b/src/pages/PathwaysNiivueCanvas.jsx
index 0ba5c4f..73a5680 100644
--- a/src/pages/PathwaysNiivueCanvas.jsx
+++ b/src/pages/PathwaysNiivueCanvas.jsx
@@ -1,6 +1,7 @@
import React, { useState } from "react";
import { Niivue, DRAG_MODE, cmapper } from "@niivue/niivue";
import BrowserOnly from "@docusaurus/BrowserOnly";
+import { useColorMode } from "@docusaurus/theme-common";
const trackList = [
{
@@ -296,14 +297,19 @@ export const PathwaysNiivueCanvas = () => (
const niivue_render = React.useRef(null);
const niivue_slice = React.useRef(null);
+ const { colorMode } = useColorMode();
+ const isDark = colorMode === 'dark';
+ const backColor = isDark ? [0, 0, 0, 1] : [1, 1, 1, 1];
+ const imageColormap = isDark ? 'gray' : 'whiteBackgroundGray';
+
React.useEffect(() => {
async function loadImages() {
niivue_slice.current = new Niivue({logLevel: 'debug',
- backColor: [1, 1, 1, 1],
+ backColor: backColor,
crosshairWidth: 1,
isColorbar: false});
niivue_render.current = new Niivue({logLevel: 'debug',
- backColor: [1, 1, 1, 1],
+ backColor: backColor,
show3Dcrosshair: false,
isColorbar: false,
isOrientCube: true});
@@ -325,7 +331,7 @@ export const PathwaysNiivueCanvas = () => (
{
url:"https://dandiarchive.s3.amazonaws.com/blobs/5df/2ec/5df2ec3d-ec43-4a33-aa38-49a141f8f05d",
name: "sub-Hb1_sample-hemi_acq-highb_desc-mean+norm+brain.nii.gz",
- colormap: "whiteBackgroundGray",
+ colormap: imageColormap,
},
];
const nucleiList=[
@@ -363,6 +369,20 @@ export const PathwaysNiivueCanvas = () => (
loadImages();
}, []);
+ // React to light/dark toggles to update the background of both canvases and
+ // the slice image colormap
+ React.useEffect(() => {
+ [niivue_slice.current, niivue_render.current].forEach((nv) => {
+ if (!nv) return;
+ nv.opts.backColor = backColor;
+ nv.drawScene();
+ });
+ if (niivue_slice.current?.volumes?.length) {
+ niivue_slice.current.volumes[0].colormap = imageColormap;
+ niivue_slice.current.updateGLVolume();
+ }
+ }, [colorMode]);
+
// Handlers for showing MRI, crosshair, and each tract
const [isMRI, setIsMRI] = useState(true);
@@ -572,20 +592,20 @@ export const PathwaysNiivueCanvas = () => (
- | Scroll slices |
- Scroll wheel |
+ Scroll slices |
+ Scroll wheel |
- | Move crosshair |
- Left click |
+ Move crosshair |
+ Left click |
- | Pan |
- Middle click |
+ Pan |
+ Middle click |
- | Zoom |
- Right click |
+ Zoom |
+ Right click |