darkMode: false, // or 'media' or 'class'

  darkMode: 'media',

        dbg: '#202020',
        'vega-gray-dark': '#888888',

import { useState, useEffect } from 'react';
export default function useMedia<T>(queries: string[], values: T[], defaultValue: T) {
  // Array containing a media query list for each query
  const mediaQueryLists = queries.map(q => window.matchMedia(q));
  // Function that gets value based on matching media query
  const getValue = () => {
    // Get index of first media query that matches
    const index = mediaQueryLists.findIndex(mql => mql.matches);
    // Return related value or defaultValue if none
    return values?.[index] || defaultValue;
  };
  // State and setter for matched value
  const [value, setValue] = useState<T>(getValue);
  useEffect(
    () => {
      // Event listener callback
      // Note: By defining getValue outside of useEffect we ensure that it has ...
      // ... current values of hook args (as this hook callback is created once on mount).
      const handler = () => setValue(getValue);
      // Set a listener for each media query with above handler as callback.
      mediaQueryLists.forEach(mql => mql.addEventListener('change', handler));
      // Remove listeners on cleanup
      return () => mediaQueryLists.forEach(mql => mql.removeEventListener('change', handler));
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [] // Empty array ensures effect is only run on mount and unmount
  );
  return value;
}

}
html {
  background-color: #fffff8;

        className="text-2xl w-full bg-transparent border-b border-grey-200 focus:ring-2 focus:outline-none focus:ring-gray-300 mb-5" 

        className="text-2xl w-full bg-transparent border-b border-gray-300 dark:border-gray-700 focus:ring-2 focus:outline-none focus:ring-gray-300 dark:focus:ring-gray-700 mb-5" 

  return <div className={`w-full h-1/2 bg-gradient-to-${to} from-tbg absolute left-0 bottom-0`}></div>;

  return <div className={`w-full h-1/2 bg-gradient-to-${to} from-tbg dark:from-dbg absolute left-0 bottom-0`}></div>;

import useMedia from './useMedia';

            scale: { domain: [false, true], range: ['grey', 'red'] }

            scale: { domain: [false, true] }

const lightFightChart: object = {
  range: {
    category: ['grey', 'red'],
  },   
};
const darkFightChart: object = {
  range: {
    category: ['grey', 'hsla(0, 100%, 60%, 1)'],
  },
  axis: {
    labelColor: '#fffff8',
    gridColor: '#9ca3af',
  }
};

  return <ReactTooltip id={id} type="light" backgroundColor="#fffffc" borderColor="#ccc" border effect="solid" className="hotfix-tooltip">{children}</ReactTooltip>;

  const props = useMedia(['(prefers-color-scheme: dark)'], [{ 'type': 'dark' as const, borderColor: '#9ca3af', backgroundColor: 'hsla(0, 0%, 14%, 1)' }], { 'type': 'light' as const, backgroundColor: '#fffffc', borderColor: '#ccc' });
  return <ReactTooltip id={id} border effect="solid" className="hotfix-tooltip" {...props}>{children}</ReactTooltip>;

  const cfg = useMedia(['(prefers-color-scheme: dark)'], [darkFightChart], lightFightChart);

        <section className="border border-gray-100 m-1 p-2" style={{gridArea: 'w'}}>

        <section className="border border-gray-100 dark:border-gray-800 m-1 p-2" style={{gridArea: 'w'}}>

                <div className="ml-1 border-b border-gray-200 w-min whitespace-nowrap">{formatDate(startTime)}</div>
                <LogProgChart data={{ fights: JSON.parse(JSON.stringify(fights)) }} actions={false} config={{ axisY: (iix === 0 && props.week === 1) ? undefined : hideText }}/>

                <div className="ml-1 border-b border-gray-200 dark:border-gray-400 w-min whitespace-nowrap">{formatDate(startTime)}</div>
                <LogProgChart data={{ fights: JSON.parse(JSON.stringify(fights)) }} actions={false} config={{ axisY: (iix === 0 && props.week === 1) ? undefined : hideText, ...cfg }} />

        mark: 'rule',

        mark: { 'type': 'rule' },

          'x2': { field: 'upper', 'type': 'quantitative' }

          'x2': { field: 'upper', 'type': 'quantitative' },

        mark: { 'type': 'bar', color: 'gray', fill: 'lightGray'},

        mark: { 'type': 'bar' },

        mark: { 'type': 'tick', color: 'black' },

        mark: { 'type': 'tick' },

        mark: { 'type': 'point', color: 'rgb(31, 119, 180)', fill: 'rgb(31, 119, 180)', opacity: 1 },

        mark: { 'type': 'point', opacity: 1 },

const darkDistChart: object = {
  bar: {
    color: 'gray',
    fill: 'lightGray',
  },
  point: {
    color: 'hsla(211, 38%, 52%, 1)',
    fill: 'hsla(211, 38%, 52%, 1)',
  },
  tick: {
    color: 'black',
  },
  rule: {
    color: 'white',
  },
};
const lightDistChart: object = {
  bar: {
    color: 'gray',
    fill: 'lightGray',
  },
  point: {
    color: 'rgb(31, 119, 180)',
    fill: 'rgb(31, 119, 180)',
  },
  tick: {
    color: 'black',
  }
};

  const theme = useMedia(['(prefers-color-scheme: dark)'], [darkDistChart], lightDistChart);

      <span data-tip={`${scaled_pct}${suffix} Percentile`} data-for={id}><DistPlot data={{ dist: data, actual: [{ x: actual }] }} actions={false} className="align-text-bottom" /></span>

      <span data-tip={`${scaled_pct}${suffix} Percentile`} data-for={id}><DistPlot data={{ dist: data, actual: [{ x: actual }] }} actions={false} className="align-text-bottom" config={theme} /></span>

        <dt className="col-span-full" data-tip data-for={hotfixid}>Pre-Progression Hotfixes <FontAwesomeIcon icon={faExternalLinkAlt} size="xs" className="ml-1 text-gray-500"/></dt><dd></dd>

        <dt className="col-span-full" data-tip data-for={hotfixid}>Pre-Progression Hotfixes <FontAwesomeIcon icon={faExternalLinkAlt} size="xs" className="ml-1 text-gray-500 dark:text-gray-300"/></dt><dd></dd>

      'Added support for TW & KR regions.'

      'Added support for TW & KR regions.',
      'Added dark mode support.',

import useMedia from './useMedia';

const modalStyle = {content: { top: 'calc(50% - 20em)', bottom: 'auto', left: 'calc(50% - 20em)', width: 'min(40em, 90vw)' }};

const modalStyle = { top: 'calc(50% - 20em)', bottom: 'auto', left: 'calc(50% - 20em)', width: 'min(40em, 90vw)' };
const darkContent: object = { backgroundColor: 'hsla(0, 0%, 14%, 1)' };
const darkOverlay: object = { backgroundColor: 'rgba(32, 32, 32, 0.75)' };
function AuthModal({ children, open }: React.PropsWithChildren<{ open: boolean; }>) {
  const [extraStyle, extraOverlay] = useMedia(['(prefers-color-scheme: dark)'], [[darkContent, darkOverlay]], [{}, {}]);
  return (
    <Modal isOpen={open} contentLabel="Authorization Required" style={{content: { ...modalStyle, ...extraStyle }, overlay: extraOverlay}}>
      {children}
    </Modal>
  )
}

    <Modal isOpen={open} contentLabel="Authorization Required" style={modalStyle}>

    <AuthModal open={open}>

        <button onClick={redirect.bind(null, guild, zone, 'authorize')} className="py-2 px-4 bg-blue-200 font-bold rounded-lg shadow-md hover:bg-blue-300 focus:outline-none focus:ring-2">Continue</button>

        <button onClick={redirect.bind(null, guild, zone, 'authorize')} className="py-2 px-4 bg-blue-200 dark:bg-blue-500 font-bold rounded-lg shadow-md hover:bg-blue-300 dark:hover:bg-blue-600 focus:outline-none focus:ring-2">Continue</button>

    </Modal>

    </AuthModal>

    <Modal isOpen={open} contentLabel="Revoke Access?" style={modalStyle}>

    <AuthModal open={open}>

        <button onClick={redirect.bind(null, guild, zone, 'revoke')} className="py-2 px-4 bg-red-200 font-bold rounded-lg shadow-md hover:bg-red-300 focus:outline-none focus:ring-2">Revoke Access</button>

        <button onClick={redirect.bind(null, guild, zone, 'revoke')} className="py-2 px-4 bg-red-200 dark:bg-red-500 font-bold rounded-lg shadow-md hover:bg-red-300 dark:hover:bg-red-500 focus:outline-none focus:ring-2">Revoke Access</button>

    </Modal>

    </AuthModal>

.Modal {
  top: calc(50% - 20em);
  bottom: auto;
  left: calc(50% - 20em);
  width: min(40em, 90vw);
  position: fixed;
}
@media (prefers-color-scheme: dark) {
  .Modal {
    background-color: hsla(0, 0%, 15%, 1);
  }
  .Overlay {
    background-color: rgba(32, 32, 32, .75);
  }
}

  return <code className={`bg-gray-100 inline-block rounded pl-2 pr-2 ${className}`}>{children}</code>

  return <code className={`bg-gray-100 dark:bg-gray-700 inline-block rounded pl-2 pr-2 ${className}`}>{children}</code>

    <>

    <div>

    </>

    </div>

<html lang="en">

<html lang="en" class="bg-tbg dark:bg-dbg dark:text-tbg">