# useSettings Hook

# Overview

useSettings hook is created to get the values from the Settings context and set the values to the Settings context. useSettings hook must be used inside a functional component. The values that are accessible in the useSettings hook is mentioned in the Settings Context.

# Read values from Settings Context

Below is the example of how to get template skin. You can get any other values by replacing skin with any other property that is available in the Settings Context.

import Box from '@mui/material/Box'
import { useSettings } from 'src/@core/hooks/useSettings'

const SomeComponent = () => {
  const { settings } = useSettings()

  return <Box sx={{ boxShadow: theme => theme.shadows[settings.skin === 'bordered' ? 0 : 7] }}>...</Box>
}

export default SomeComponent

# Update single value in Settings Context

Below is the example of how to change template mode, i.e. Light or Dark mode. You can change any other values by replacing mode with any other property that is available in the Settings Context.

# Update multiple values in Settings Context

Below is the example of how to change content width (i.e. Full or Container width) and template layout (i.e. Vertical or Horizontal layout). You can change any other values that are available in the Settings Context.

← Settings Context Page Specific Settings →