gladchinda

import React from 'react';
import useTheme from './useTheme';
import ThemeContext from './theme';

export default function App() {
  const { theme, darkMode, inheritSystem } = useTheme();

  return <>
    {/* Render the color scheme controls widget here */}
    {/* Use `theme`, `darkMode` and `inheritSystem` as required */}

gladchinda

import { useState, useCallback } from 'react';
import useColorScheme from './useColorScheme';
import { DARK_THEME, LIGHT_THEME, DarkMode, InheritSystem } from './theme';

function __stateToggleFactory__(stateUpdater, settingUpdater) {
  return function stateToggleFn() {
    (typeof stateUpdater === 'function') &&
      stateUpdater(prevState => {
        const newState = !prevState;
        (typeof settingUpdater === 'function') && settingUpdater(newState);

gladchinda

import React from 'react';

const DARK_MODE_KEY = 'theme.dark_mode';
const INHERIT_SYSTEM_KEY = 'theme.inherit_system';

const DARK_THEME = { color: '#fff', background: '#333' };
const LIGHT_THEME = { color: '#333', background: '#fff' };

const DarkMode = __themeSettingFactory__(DARK_MODE_KEY);
const InheritSystem = __themeSettingFactory__(INHERIT_SYSTEM_KEY);

gladchinda

import React from 'react';
import { useColorScheme } from 'react-native';
import ThemeContext, { DARK_THEME, LIGHT_THEME } from './theme';

export default function App () {
  const scheme = useColorScheme();
  const theme = (scheme === 'dark') ? DARK_THEME : LIGHT_THEME;

  return <>
    <ThemeContext.Provider value={theme}>

gladchinda

import { Appearance } from 'react-native';

const colorScheme = Appearance.getColorScheme();
const useDarkMode = colorScheme === 'dark';

if (useDarkMode) {
  // Do some dark mode specific stuff here...
}

gladchinda

import React from 'react';
import useColorScheme from './useColorScheme';
import ThemeContext, { DARK_THEME, LIGHT_THEME } from './theme';

export default function App () {
  const dark = useColorScheme('dark');
  const theme = dark ? DARK_THEME : LIGHT_THEME;

  return <>
    <ThemeContext.Provider value={theme}>

gladchinda

export default function useColorScheme(targetColorScheme) {
  const isMounted = useRef();
  const colorScheme = useRef();
  
  const targetScheme = useMemo(
    () => resolveTargetColorScheme(targetColorScheme),
    [targetColorScheme]
  );

  const [scheme, setColorScheme] = useState(() => {

gladchinda

import { useState, useEffect, useRef, useMemo } from 'react';

const COLOR_SCHEMES = ['no-preference', 'dark', 'light'];
const DEFAULT_TARGET_COLOR_SCHEME = 'light';

function resolveTargetColorScheme(scheme) {
  if (!(
    COLOR_SCHEMES.includes(scheme = String(scheme).toLowerCase()) ||
    scheme === 'no-preference'
  )) scheme = DEFAULT_TARGET_COLOR_SCHEME;

gladchinda

const mq = window.matchMedia('(prefers-color-scheme: dark)');
console.log(`${mq.matches ? 'dark' : 'light'} mode`);

mq.addEventListener('change', function (evt) {
  console.log(`${evt.matches ? 'dark' : 'light'} mode`);
});

gladchinda

const mq = window.matchMedia('(prefers-color-scheme: dark)');
const useDarkMode = mq.matches;

// logs true if media query matches, otherwise false
console.log(useDarkMode);