Skip to content

Commit d9d9bd2

Browse files
kabilarkabilar
committed
Add color mode toggle and update styling of sidebar
1 parent 8425fe5 commit d9d9bd2

5 files changed

Lines changed: 56 additions & 36 deletions

File tree

‎docusaurus.config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,8 @@ const config = {
7474
},
7575
colorMode: {
7676
defaultMode: 'light',
77-
disableSwitch: true,
77+
disableSwitch: false,
78+
respectPrefersColorScheme: true,
7879
},
7980
prism: {
8081
theme: prismThemes.github,

‎src/css/custom.css‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,11 @@
6161
}
6262
}
6363

64-
/* Reduce footer height */
64+
/* Reduce footer height and match the page background */
6565
.footer {
6666
padding-top: 0rem;
6767
padding-bottom: 0.75rem;
68+
--ifm-footer-background-color: var(--ifm-background-color);
6869
}
6970

7071
.footer__links {
@@ -90,37 +91,35 @@
9091

9192
.sidebar-container {
9293
width: 330px;
93-
background-color: #f8f9fa;
94-
border: 1px solid #ddd;
94+
background-color: var(--ifm-background-color);
9595
padding: 20px;
9696
min-height: 72vh;
9797
max-height: 72vh;
9898
overflow-y: auto;
9999
position: sticky;
100100
top: 20px;
101-
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
102101
}
103102

104103
.sidebar-container h3 {
105104
font-size: 1.2rem;
106105
margin-bottom: 15px;
107-
color: #333;
106+
color: var(--ifm-heading-color);
108107
font-weight: 500;
109-
border-bottom: 2px solid #e9ecef;
108+
border-bottom: 2px solid var(--ifm-color-emphasis-200);
110109
padding-bottom: 8px;
111110
}
112111

113112
.sidebar-container h4 {
114113
font-size: 1rem;
115114
margin-bottom: 10px;
116-
color: #333;
115+
color: var(--ifm-heading-color);
117116
font-weight: 500;
118117
}
119118

120119
.sidebar-container-divider {
121120
border: none;
122121
height: 1px;
123-
background-color: #dee2e6;
122+
background-color: var(--ifm-color-emphasis-300);
124123
margin: 15px 0;
125124
}
126125

‎src/pages/DmriNiivueCanvasHuman.jsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -248,20 +248,20 @@ export const DmriNiivueCanvasHuman = () => (
248248
<table style={{ width: '100%', fontSize: '0.9em' }}>
249249
<tbody>
250250
<tr style={{ border: 'none' }}>
251-
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid #ddd', background: '#F7F8F9' }}>Scroll slices</td>
252-
<td style={{ padding: '6px' , borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: 'none', background: '#F7F8F9' }}>Scroll wheel</td>
251+
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid var(--ifm-color-emphasis-300)', background: 'var(--ifm-background-color)' }}>Scroll slices</td>
252+
<td style={{ padding: '6px' , borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: 'none', background: 'var(--ifm-background-color)' }}>Scroll wheel</td>
253253
</tr>
254254
<tr>
255-
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid #ddd', background: '#F7F8F9' }}>Move crosshair</td>
256-
<td style={{ padding: '6px', border: 'none', background: '#F7F8F9' }}>Left click</td>
255+
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid var(--ifm-color-emphasis-300)', background: 'var(--ifm-background-color)' }}>Move crosshair</td>
256+
<td style={{ padding: '6px', border: 'none', background: 'var(--ifm-background-color)' }}>Left click</td>
257257
</tr>
258258
<tr>
259-
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid #ddd', background: '#F7F8F9' }}>Pan</td>
260-
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: 'none', background: '#F7F8F9' }}>Middle click</td>
259+
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid var(--ifm-color-emphasis-300)', background: 'var(--ifm-background-color)' }}>Pan</td>
260+
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: 'none', background: 'var(--ifm-background-color)' }}>Middle click</td>
261261
</tr>
262262
<tr>
263-
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid #ddd', background: '#F7F8F9' }}>Zoom</td>
264-
<td style={{ padding: '6px', border: 'none', background: '#F7F8F9' }}>Right click</td>
263+
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid var(--ifm-color-emphasis-300)', background: 'var(--ifm-background-color)' }}>Zoom</td>
264+
<td style={{ padding: '6px', border: 'none', background: 'var(--ifm-background-color)' }}>Right click</td>
265265
</tr>
266266
</tbody>
267267
</table>

‎src/pages/DmriNiivueCanvasMacaque.jsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -335,20 +335,20 @@ export const DmriNiivueCanvasMacaque = () => (
335335
<table style={{ width: '100%', fontSize: '0.9em' }}>
336336
<tbody>
337337
<tr style={{ border: 'none' }}>
338-
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid #ddd', background: '#F7F8F9' }}>Scroll slices</td>
339-
<td style={{ padding: '6px' , borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: 'none', background: '#F7F8F9' }}>Scroll wheel</td>
338+
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid var(--ifm-color-emphasis-300)', background: 'var(--ifm-background-color)' }}>Scroll slices</td>
339+
<td style={{ padding: '6px' , borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: 'none', background: 'var(--ifm-background-color)' }}>Scroll wheel</td>
340340
</tr>
341341
<tr>
342-
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid #ddd', background: '#F7F8F9' }}>Move crosshair</td>
343-
<td style={{ padding: '6px', border: 'none', background: '#F7F8F9' }}>Left click</td>
342+
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid var(--ifm-color-emphasis-300)', background: 'var(--ifm-background-color)' }}>Move crosshair</td>
343+
<td style={{ padding: '6px', border: 'none', background: 'var(--ifm-background-color)' }}>Left click</td>
344344
</tr>
345345
<tr>
346-
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid #ddd', background: '#F7F8F9' }}>Pan</td>
347-
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: 'none', background: '#F7F8F9' }}>Middle click</td>
346+
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid var(--ifm-color-emphasis-300)', background: 'var(--ifm-background-color)' }}>Pan</td>
347+
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: 'none', background: 'var(--ifm-background-color)' }}>Middle click</td>
348348
</tr>
349349
<tr>
350-
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid #ddd', background: '#F7F8F9' }}>Zoom</td>
351-
<td style={{ padding: '6px', border: 'none', background: '#F7F8F9' }}>Right click</td>
350+
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid var(--ifm-color-emphasis-300)', background: 'var(--ifm-background-color)' }}>Zoom</td>
351+
<td style={{ padding: '6px', border: 'none', background: 'var(--ifm-background-color)' }}>Right click</td>
352352
</tr>
353353
</tbody>
354354
</table>

‎src/pages/PathwaysNiivueCanvas.jsx‎

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState } from "react";
22
import { Niivue, DRAG_MODE, cmapper } from "@niivue/niivue";
33
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
import { useColorMode } from "@docusaurus/theme-common";
45

56
const trackList = [
67
{
@@ -296,14 +297,19 @@ export const PathwaysNiivueCanvas = () => (
296297
const niivue_render = React.useRef(null);
297298
const niivue_slice = React.useRef(null);
298299

300+
const { colorMode } = useColorMode();
301+
const isDark = colorMode === 'dark';
302+
const backColor = isDark ? [0, 0, 0, 1] : [1, 1, 1, 1];
303+
const imageColormap = isDark ? 'gray' : 'whiteBackgroundGray';
304+
299305
React.useEffect(() => {
300306
async function loadImages() {
301307
niivue_slice.current = new Niivue({logLevel: 'debug',
302-
backColor: [1, 1, 1, 1],
308+
backColor: backColor,
303309
crosshairWidth: 1,
304310
isColorbar: false});
305311
niivue_render.current = new Niivue({logLevel: 'debug',
306-
backColor: [1, 1, 1, 1],
312+
backColor: backColor,
307313
show3Dcrosshair: false,
308314
isColorbar: false,
309315
isOrientCube: true});
@@ -325,7 +331,7 @@ export const PathwaysNiivueCanvas = () => (
325331
{
326332
url:"https://dandiarchive.s3.amazonaws.com/blobs/5df/2ec/5df2ec3d-ec43-4a33-aa38-49a141f8f05d",
327333
name: "sub-Hb1_sample-hemi_acq-highb_desc-mean+norm+brain.nii.gz",
328-
colormap: "whiteBackgroundGray",
334+
colormap: imageColormap,
329335
},
330336
];
331337
const nucleiList=[
@@ -363,6 +369,20 @@ export const PathwaysNiivueCanvas = () => (
363369
loadImages();
364370
}, []);
365371

372+
// React to light/dark toggles to update the background of both canvases and
373+
// the slice image colormap
374+
React.useEffect(() => {
375+
[niivue_slice.current, niivue_render.current].forEach((nv) => {
376+
if (!nv) return;
377+
nv.opts.backColor = backColor;
378+
nv.drawScene();
379+
});
380+
if (niivue_slice.current?.volumes?.length) {
381+
niivue_slice.current.volumes[0].colormap = imageColormap;
382+
niivue_slice.current.updateGLVolume();
383+
}
384+
}, [colorMode]);
385+
366386
// Handlers for showing MRI, crosshair, and each tract
367387
const [isMRI, setIsMRI] = useState(true);
368388

@@ -572,20 +592,20 @@ export const PathwaysNiivueCanvas = () => (
572592
<table style={{ width: '100%', fontSize: '0.9em' }}>
573593
<tbody>
574594
<tr style={{ border: 'none' }}>
575-
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid #ddd', background: '#F7F8F9' }}>Scroll slices</td>
576-
<td style={{ padding: '6px' , borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: 'none', background: '#F7F8F9' }}>Scroll wheel</td>
595+
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid var(--ifm-color-emphasis-300)', background: 'var(--ifm-background-color)' }}>Scroll slices</td>
596+
<td style={{ padding: '6px' , borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: 'none', background: 'var(--ifm-background-color)' }}>Scroll wheel</td>
577597
</tr>
578598
<tr>
579-
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid #ddd', background: '#F7F8F9' }}>Move crosshair</td>
580-
<td style={{ padding: '6px', border: 'none', background: '#F7F8F9' }}>Left click</td>
599+
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid var(--ifm-color-emphasis-300)', background: 'var(--ifm-background-color)' }}>Move crosshair</td>
600+
<td style={{ padding: '6px', border: 'none', background: 'var(--ifm-background-color)' }}>Left click</td>
581601
</tr>
582602
<tr>
583-
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid #ddd', background: '#F7F8F9' }}>Pan</td>
584-
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: 'none', background: '#F7F8F9' }}>Middle click</td>
603+
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid var(--ifm-color-emphasis-300)', background: 'var(--ifm-background-color)' }}>Pan</td>
604+
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: 'none', background: 'var(--ifm-background-color)' }}>Middle click</td>
585605
</tr>
586606
<tr>
587-
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid #ddd', background: '#F7F8F9' }}>Zoom</td>
588-
<td style={{ padding: '6px', border: 'none', background: '#F7F8F9' }}>Right click</td>
607+
<td style={{ padding: '6px', borderTop: 'none', borderBottom: 'none', borderLeft: 'none', borderRight: '1px solid var(--ifm-color-emphasis-300)', background: 'var(--ifm-background-color)' }}>Zoom</td>
608+
<td style={{ padding: '6px', border: 'none', background: 'var(--ifm-background-color)' }}>Right click</td>
589609
</tr>
590610
</tbody>
591611
</table>

0 commit comments

Comments
 (0)