How to use the @polkadot/ui-settings.uiMode function in @polkadot/ui-settings

import democracy from './democracy';
import explorer from './explorer';
import extrinsics from './extrinsics';
import genericAsset from './generic-asset';
import js from './js';
import parachains from './parachains';
import settings from './settings';
import staking from './staking';
import storage from './storage';
import sudo from './sudo';
import techcomm from './techcomm';
import toolbox from './toolbox';
import transfer from './transfer';
import treasury from './treasury';

const routes: Routes = appSettings.uiMode === 'light'
  ? ([] as Routes).concat(
    // dashboard,
    explorer,
    accounts,
    addressbook,
    claims,
    transfer,
    genericAsset,
    null,
    staking,
    democracy,
    council,
    // TODO Not sure about the inclusion of treasury & parachains here
    null,
    settings
  )

import collective from './collective';
import dashboard from './dashboard';
import democracy from './democracy';
import explorer from './explorer';
import extrinsics from './extrinsics';
import js from './js';
import parachains from './parachains';
import settings from './settings';
import staking from './staking';
import storage from './storage';
import sudo from './sudo';
import toolbox from './toolbox';
import transfer from './transfer';
import treasury from './treasury';

const routes: Routes = appSettings.uiMode === 'light'
  ? ([] as Routes).concat(
    dashboard,
    explorer,
    accounts,
    addressbook,
    transfer,
    null,
    staking,
    democracy,
    collective,
    // TODO Not sure about the inclusion of treasury & parachains here
    null,
    settings,
    template
  )
  : ([] as Routes).concat(

function ExplorerApp ({ basePath, className, t }: Props): React.ReactElement {
  const { api } = useApi();
  const { lastHeaders } = useContext(BlockAuthorsContext);
  const events = useContext(EventsContext);

  return (
    <main>
      <header>
        </header></main>

import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';

import React from 'react';
import { Route, Switch } from 'react-router';
import { HelpOverlay, Tabs } from '@polkadot/react-components';
import uiSettings from '@polkadot/ui-settings';

import basicMd from './md/basic.md';
import Overview from './Overview';
import translate from './translate';

export { default as useCounter } from './useCounter';

interface Props extends AppProps, BareProps, I18nProps {}

const hidden = uiSettings.uiMode === 'full'
  ? []
  : ['propose'];

function DemocracyApp ({ basePath, t }: Props): React.ReactElement {
  return (
    <main>
      
      <header>
        </header></main>

import { AppProps, I18nProps } from '@polkadot/react-components/types';

import React from 'react';
import { Route, Switch } from 'react-router';

import { HelpOverlay, Tabs } from '@polkadot/react-components';
import uiSettings from '@polkadot/ui-settings';

import md from './md/basics.md';
import translate from './translate';
import Developer from './Developer';
import General from './General';

interface Props extends AppProps, I18nProps {}

const hidden = uiSettings.uiMode === 'full'
  ? []
  : ['developer'];

function SettingsApp (props: Props): React.ReactElement {
  const _renderDeveloper = (): React.ReactNode => {
    return (
      
    );
  };
  const { basePath, t } = props;

  return (
    <main>
      
      <header>
        </header></main>