@cieloazul310/gatsby-theme-aoi-top-layout NPM

@cieloazul310/gatsby-theme-aoi-top-layout

A plugin for @cieloazul310/gatsby-theme-aoi

React hooks

import { useThemeContextState } from '@cieloazul310/gatsby-theme-aoi';

Main package @cieloazul310/gatsby-theme-aoi includes all following hooks.

Global app state

NOTE: Default AppState is empty. To use AppState, create AppState files by the method of Gatsby Themes shadowing described later.

`useAppState`

`useDispatch`

Dark mode

`useThemeContextState`

`useToggleDark`

`useToggleUseSystem`

Shadowing

Customizing MUI theme

src/@cieloazul310/gatsby-theme-aoi-top-layout/theme.ts

// src/@cieloazul310/gatsby-theme-aoi-top-layout/theme.ts
import { teal, orange } from '@mui/material/colors';
import { createTheme, responsiveFontSizes } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: teal,
    secondary: orange,
  },
});

export default responsiveFontSizes(theme);

See:
https://mui.com/customization/theming/

Customizing global app state

src/@cieloazul310/gatsby-theme-aoi-top-layout/utils/AppState.ts

// src/@cieloazul310/gatsby-theme-aoi-top-layout/utils/AppState.ts

export type AppState = {
  // set your app state
  count: number;
};

// set your initial app state
export const initialAppState: AppState = { count: 0 };

// set your action
export type Action = { type: 'RESET' } | { type: 'INCREMENT' } | { type: 'DECREMENT' } | { type: 'SET_COUNT'; count: number };

export default function reducer(state: AppState, action: Action): AppState {
  switch (action.type) {
    case 'RESET':
      return initialAppState;
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'SET_COUNT':
      return { ...state, count: action.count };
    default:
      throw new Error("Reducer don't match the action type.");
  }
}

Using global app state

Copy AppStateContext.tsx and paste it to src/@cieloazul310/gatsby-theme-aoi-top-layout/utils/AppStateContext.tsx.

// src/pages/index.tsx
import { useAppState, useDispatch } from '../@cieloazul310/gatsby-theme-aoi-top-layout/utils/AppStateContext';

function Page() {
  const { count } = useAppState();
  const dispatch = useDispatch();
  const increment = () => {
    dispatch({ type: 'INCREMENT' });
  };

  return (
    <Layout>
      <p>Count: {count}</p>
      <Button onClick={increment}>
        Increment
      </Button>
    </Layout>
  )
}

export default Page;