chore: add css custom properties for explore page component

dev/devPage.tsx

@@ -10,10 +10,25 @@ const HeaderComponent: React.FC = () => {
   const activeColor = 'navy 0-100'
   const inActiveColor = 'navy o-50'
   const [exploreFormType, setExploreFormType] = useState('cid')
+  const [isDarkTheme, setIsDarkTheme] = useState(false)
   const [cidColor, setCidColor] = useState(activeColor)
   const [carColor, setCarColor] = useState(inActiveColor)
   const { t } = useTranslation('explore')
 
+  function toggleTheme (): void {
+    setIsDarkTheme(prev => {
+      const newTheme = !prev
+      document.documentElement.setAttribute('data-theme', newTheme ? 'dark' : 'light')
+      return newTheme
+    })
+  }
+
+  // apply theme on component mount
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', isDarkTheme ? 'dark' : 'light')
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   function handleOnChange (evt: MouseEvent<HTMLButtonElement>): void {
     const selectedType = evt.currentTarget.getAttribute('data-value')
     if (selectedType == null) {
@@ -32,7 +47,7 @@ const HeaderComponent: React.FC = () => {
   }
 
   return (
-    <header className='flex-l items-center pa3 bg-navy bb bw3 border-aqua tc tl-l'>
+    <header className='flex-l items-center pa3 bg-navy bb bw3 border-aqua tc tl-l mb4'>
       <a href='#/' title={t('homeLink')} className='flex-none v-mid'>
         {/* <img src={ipfsLogo} alt='IPFS' style={{height: 50, width: 117.5}} /> */}
       </a>
@@ -54,6 +69,12 @@ const HeaderComponent: React.FC = () => {
             </svg>
           </a>
         </div>
+        <button
+          onClick={toggleTheme}
+          className='f6 pointer ml3 ph3 pv2 dib white bg-navy br2 ba'
+          aria-label={isDarkTheme ? 'Switch to light theme' : 'Switch to dark theme'}>
+          {isDarkTheme ? '☀️' : '🌙'}
+        </button>
       </div>
     </header>
   )

src/components/ExplorePage.tsx

@@ -13,6 +13,7 @@ import IpldGraph from './graph/IpldGraphCytoscape.js'
 import GraphCrumb from './graph-crumb/GraphCrumb.js'
 import ComponentLoader from './loader/component-loader.js'
 import { ObjectInfo } from './object-info/ObjectInfo.js'
+import '../index.css'
 
 export const ExplorePage = ({
   runTour = false,
@@ -70,7 +71,7 @@ export const ExplorePage = ({
               ? (
                 <ObjectInfo
                   className='joyride-explorer-node'
-                  style={{ background: '#FBFBFB' }}
+                  style={{ background: 'var(--element-bg, #fbfbfb)' }}
                   cid={targetNode.cid}
                   localPath={localPath}
                   size={targetNode.size}
@@ -95,7 +96,7 @@ export const ExplorePage = ({
               ? (
                 <CidInfo
                   className='joyride-explorer-cid'
-                  style={{ background: '#FBFBFB', overflow: 'hidden' }}
+                  style={{ background: 'var(--element-bg, #fbfbfb)', overflow: 'hidden' }}
                   cid={targetNode.cid}
                 />
                 )

src/components/StartExploringPage.tsx

@@ -15,7 +15,7 @@ const ExploreSuggestion = ({ cid, name, type }: { cid: string, name: string, typ
     </span>
     <span className='pl3 truncate'>
       <h2 className='ma0 fw4 f5 db black montserrat'>{name}</h2>
-      <span className='f7 db blue truncate monospace'>{cid}</span>
+      <span className='f7 db blue truncate monospace' style={{ color: 'var(--gray-muted, "")' }}>{cid}</span>
     </span>
   </a>
 )
@@ -31,14 +31,14 @@ export const StartExploringPage: React.FC<StartExploringPageProps> = ({ embed, r
   const { t } = useTranslation('explore')
 
   return (
-    <div className='mw9 center explore-sug-2'>
+    <div className='mw9 center explore-sug-2' style={{ background: 'var(--background, "")' }}>
       <Helmet>
         <title>{t('StartExploringPage.title')}</title>
       </Helmet>
       <div className='flex-l'>
         <div className='flex-auto-l mr3-l'>
           <div className='pl3 pl0-l pt4 pt2-l'>
-            <h1 className='f3 f2-l ma0 fw4 montserrat charcoal'>{t('StartExploringPage.header')}</h1>
+            <h1 className='f3 f2-l ma0 fw4 montserrat charcoal' style={{ color: 'var(--text, --charcoal)' }}>{t('StartExploringPage.header')}</h1>
             <p className='lh-copy f5 avenir charcoal-muted'>{t('StartExploringPage.leadParagraph')}</p>
           </div>
           {embed != null ? <IpldExploreForm /> : null}

src/components/about/AboutIpld.tsx

@@ -2,12 +2,13 @@ import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import Box from '../box/Box.js'
 import ipldLogoSrc from './ipld.svg'
+import '../../index.css'
 
 export const AboutIpld: React.FC = () => {
   const { t } = useTranslation('explore')
 
   return (
-    <Box className='tl dib pa4 avenir measure-wide-l lh-copy dark-gray ba-l b--black-10'>
+    <Box className='tl dib pa4 avenir measure-wide-l lh-copy ba-l' style={{ color: 'var(--text)', borderColor: 'var(--border-color)', border: '1px solid var(--border-color)' }}>
       <div className='tc'>
         <a className='link' href='https://ipld.io'>
           <img src={ipldLogoSrc} alt='IPLD' style={{ height: 60 }} />

src/components/box/Box.tsx

@@ -12,7 +12,7 @@ export const Box: React.FC<PropsWithChildren<BoxProps>> = ({
   children
 }) => {
   return (
-    <div className={className} style={{ background: '#fbfbfb', ...style }}>
+    <div className={className} style={{ background: 'var(--element-bg, #fbfbfb)', ...style }}>
       <ErrorBoundary>
         {children}
       </ErrorBoundary>

src/components/cid-info/CidInfo.tsx

@@ -39,13 +39,13 @@ export const CidInfo: React.FC<CidInfoProps> = ({ cid, className, ...props }) =>
         ? null
         : (
         <div>
-          <div className='f7 monospace fw4 ma0 pb2 truncate mid-gray force-select' title={cid.toString()}>
+          <div className='f7 monospace fw4 ma0 pb2 truncate mid-gray gray-muted force-select' title={cid.toString()}>
             {cid.toString()}
           </div>
           <div className='f6 sans-serif fw4 ma0 pb2 truncate' id='CidInfo-human-readable-cid'>
             {cidInfo.humanReadable}
           </div>
-          <label htmlFor='CidInfo-human-readable-cid' className='db fw2 ma0 mid-gray ttu f7 tracked'>
+          <label htmlFor='CidInfo-human-readable-cid' className='db fw2 ma0 mid-gray ttu f7 tracked gray-muted'>
             {t('base')} - {t('version')} - {t('codec')} - {t('multihash')}
           </label>
           <a
@@ -55,7 +55,7 @@ export const CidInfo: React.FC<CidInfoProps> = ({ cid, className, ...props }) =>
             {t('multihash')}
           </a>
           <div>
-            <div className='dib monospace f6 pt2 tr dark-gray lh-title ph2'>
+            <div className='dib monospace f6 pt2 tr dark-gray gray-muted lh-title ph2'>
               <code className='gray'>0x</code>
               <span className='orange force-select'>{cidInfo.hashFnCode}</span>
               <span className='green force-select'>{cidInfo.hashLengthCode}</span>
@@ -64,7 +64,7 @@ export const CidInfo: React.FC<CidInfoProps> = ({ cid, className, ...props }) =>
                   <span key={chunk.join('')}>{chunk.join('')}<br /></span>
                 ))}
               </span>
-              <label htmlFor='CidInfo-multihash' className='sans-serif fw2 ma0 mid-gray ttu f7 tracked'>
+              <label htmlFor='CidInfo-multihash' className='sans-serif fw2 ma0 mid-gray gray-muted ttu f7 tracked'>
                 {t('CidInfo.hashDigest')}
               </label>
               <div className='tl lh-copy'>

src/components/graph-crumb/GraphCrumb.tsx

@@ -37,7 +37,7 @@ const GraphCrumb: React.FC<GraphCrumbProps> = ({ cid, pathBoundaries, localPath,
     <div {...props}>
       <div className={`sans-serif ${className}`}>
         <NodeUnderline cid={cid}>
-          <a href={firstHrefBase} className='monospace no-underline dark-gray o-50 glow'>
+          <a href={firstHrefBase} className='monospace no-underline dark-gray o-50 glow' style={{ color: 'var(--gray-muted)' }}>
             <Cid value={cid} />
           </a>
           {first != null
@@ -124,6 +124,7 @@ const Path: React.FC<{ path: string, hrefBase: string, sourceCid: CID }> = ({ pa
               className='dib no-underline dark-gray o-50 glow'
               title={sourceCid.toString() + '/' + relPath}
               href={href}
+              style={{ color: 'var(--gray-muted)' }}
             >
               {p}
             </a>

src/components/object-info/ObjectInfo.tsx

@@ -3,21 +3,23 @@ import theme from 'ipfs-css/theme.json'
 import { CID } from 'multiformats'
 import React, { type HTMLProps } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ObjectInspector, chromeLight } from 'react-inspector'
+import { ObjectInspector, chromeDark, chromeLight } from 'react-inspector'
 import getCodecNameFromCode from '../../lib/get-codec-name-from-code'
 import { type NormalizedDagNode, type UnixFsNodeDataWithNumbers } from '../../types.js'
 import LargeLinksTable, { type LinkObject, type LargeLinksTableProps } from './links-table'
 
 const humansize = partial({ round: 0 })
 
-const objectInspectorTheme = {
-  ...chromeLight,
-  BASE_FONT_FAMILY: 'Consolas, Menlo, monospace',
-  TREENODE_FONT_FAMILY: 'Consolas, Menlo, monospace',
-  BASE_FONT_SIZE: '13px',
-  BASE_LINE_HEIGHT: '19px',
-  TREENODE_FONT_SIZE: '13px',
-  TREENODE_LINE_HEIGHT: '19px'
+const getObjectInspectorTheme = (isDarkTheme: boolean): typeof chromeDark | typeof chromeLight => {
+  return {
+    ...(isDarkTheme ? chromeDark : chromeLight),
+    BASE_FONT_FAMILY: 'Consolas, Menlo, monospace',
+    TREENODE_FONT_FAMILY: 'Consolas, Menlo, monospace',
+    BASE_FONT_SIZE: '13px',
+    BASE_LINE_HEIGHT: 15,
+    TREENODE_FONT_SIZE: '13px',
+    TREENODE_LINE_HEIGHT: 1.5
+  }
 }
 
 // Use https://github.com/multiformats/multicodec/blob/master/table.csv to get full name.
@@ -129,6 +131,8 @@ export const ObjectInfo: React.FC<ObjectInfoProps> = ({ className, type, cid, lo
     nodeStyleType = getCodecNameFromCode(CID.parse(cid).code) ?? type
   }
 
+  const isDarkTheme = document.documentElement.getAttribute('data-theme') === 'dark'
+
   return (
     <section className={`pa4 sans-serif ${className}`} {...props}>
       <h2 className='ma0 lh-title f4 fw4 montserrat pb2' title={nodeStyleType}>
@@ -192,9 +196,9 @@ export const ObjectInfo: React.FC<ObjectInfoProps> = ({ className, type, cid, lo
         {data == null
           ? null
           : (
-          <div className='pa3 mt2 bg-white f5 nl3 nr3 mh0-l overflow-x-auto'>
+          <div className='pa3 mt2 r-inspector bg-white f5 nl3 nr3 mh0-l overflow-x-auto' style={{ background: 'var(--gray-muted)' }}>
             {/* @ts-expect-error - object inspector types are wrong. see https://www.npmjs.com/package/react-inspector#theme  */}
-            <ObjectInspector showMaxKeys={100} data={getObjectInspectorData(data)} theme={objectInspectorTheme} expandPaths={toExpandPathsNotation(localPath)} />
+            <ObjectInspector showMaxKeys={100} data={getObjectInspectorData(data)} theme={getObjectInspectorTheme(isDarkTheme)} expandPaths={toExpandPathsNotation(localPath)} />
           </div>
             )}
       </div>

src/components/object-info/links-table.tsx

@@ -46,14 +46,16 @@ interface RowProps {
 
 const Row: React.FC<RowProps> = ({ onLinkClick, startIndex, index, rowHeight, link }) => {
   const key = startIndex + index
-  const backgroundColor = key % 2 === 0 ? '#fff' : 'rgb(251, 251, 251)'
+  // const backgroundColor = key % 2 === 0 ? '#fff' : 'rgb(251, 251, 251)'
+
+  const isDarkTheme = document.documentElement.getAttribute('data-theme') === 'dark'
 
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div
       key={key}
-      className={`pv2 pointer items-center f7 ${styles.rowGrid} bb b--near-white`}
-      style={{ position: 'absolute', top: key * rowHeight, width: '100%', backgroundColor }}
+      className={`links-table-row pv2 pointer items-center f7 ${styles.rowGrid} bb`}
+      style={{ position: 'absolute', top: key * rowHeight, width: '100%', backgroundColor: isDarkTheme ? 'var(--navy-dark)' : '' }}
       onClick={() => { onLinkClick(link) }}
     >
       <div className={`mid-gray tr pr1 f7 ${styles.gridCellRow} monospace}`}>
@@ -75,7 +77,7 @@ interface HeaderProps {
 
 const Header: React.FC<HeaderProps> = () => {
   return (
-    <div className={`mid-gray ${styles.headerGrid} items-center pv2 fw1 tracked bb b--near-white`}>
+    <div className={`mid-gray ${styles.headerGrid} items-center pv2 fw1 tracked bb`}>
       <div className={`mid-gray tr pr1 f7 ${styles.gridCellHeader}`}>
         #
       </div>
@@ -131,7 +133,7 @@ const LargeLinksTable: React.FC<LargeLinksTableProps> = ({ onLinkClick, links, r
   const visibleLinks = links.slice(startIndex, endIndex)
 
   return (
-    <div className={`collapse br2 pv2 ph3 mv2 nl3 nr3 mh0-l f7 ${styles.linksTable}`}>
+    <div className={`collapse links-table br2 pv2 ph3 mv2 nl3 nr3 mh0-l f7 ${styles.linksTable}`}>
       <Header cidRowStyle={cidRowStyle ?? { width: tableWidth }} />
       <div
         ref={containerRef}

src/index.css

@@ -0,0 +1,60 @@
+/* dark theme styles for the explore page */
+:root {
+  --element-bg: #fbfbfb;
+  --text: #111111;
+  --border-color: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="dark"] {
+  --background: #181a1b;
+  --text: #e8e6e3;
+  --element-bg: #1a1c1e;
+  --navy-dark: #0b3a53;
+  --navy-text-color: rgb(202, 198, 191);
+  --snow-muted: rgb(28, 30, 31);
+  --border-color: rgba(140, 130, 115, 0.5);
+  --gray-muted: #d9dbe2;
+  --charcoal: #34373f;
+
+  .gray-muted {
+    color: var(--gray-muted)
+  }
+
+  /* style for the react-inpector package that ObjectInfo uses */
+  .r-inspector {
+    background-color: var(--navy-dark) !important;
+  }
+
+  .r-inspector ol *, li * {
+    background-color: var(--element-bg) !important;
+    color: var(--navy-text-color) !important;
+  }
+
+  .joyride-explorer-crumbs * {
+    color: var(--text) !important;
+    background-color: var(--navy-dark) !important;
+  }
+
+  .links-table * {
+    background: var(--element-bg) !important;
+    color: var(--text) !important;
+  }
+
+  /* stripe links-table-row */
+  .links-table-row:nth-child(odd) {
+    background-color: var(--background) !important;
+  }
+
+  .links-table .r-table-row * {
+    background-color: var(--navy-dark) !important;
+  }
+
+  /* --navy-dark sets the bg to a blue-ish background in dark mode */
+  #root {
+    background-color: var(--background) !important;
+  }
+
+  body {
+    background-color: var(--background) !important;
+  }
+}