@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;

Gatsby Theme Aoi packages

• @cieloazul310/gatsby-theme-aoi
• @cieloazul310/gatsby-theme-aoi-components
• @cieloazul310/gatsby-theme-aoi-layout
• @cieloazul310/gatsby-theme-aoi-top-layout
• @cieloazul310/gatsby-theme-aoi-utils

References

• Gatsby
• MUI
• gatsby-plugin-material-ui
• gatsby-theme-material-ui