Settings
This guide explains how to configure and manage application settings in KimiStores.
Settings Configuration
KimiStores provides a comprehensive settings system that allows users to customize the application appearance and behavior. The settings configuration is located in:
src/global-config.tsThis file contains default configurations for:
Theme Settings
Toggle between light and dark theme modes
Right-to-left text direction support
High contrast mode for better accessibility
Layout Settings
Full-width or boxed layout option
Reduced spacing for more content density
Keep header visible while scrolling
Implementing Settings
Settings Context
KimiStores uses React Context API to manage settings across the application. Key components:
Settings Provider
Wraps the application and provides settings state
Settings Hooks
Custom hooks to access and update settings
Local Storage
Persists user preferences between sessions
// src/components/settings/context/settings-provider.tsx
import { createContext, useEffect, useState } from 'react';
import { defaultSettings } from 'src/global-config';
export const SettingsContext = createContext(null);
export function SettingsProvider({ children }) {
const [settings, setSettings] = useState(() => {
// Load from localStorage if available, otherwise use defaults
const savedSettings = localStorage.getItem('app-settings');
return savedSettings ? JSON.parse(savedSettings) : defaultSettings;
});
// Update settings function
const updateSettings = (newSettings) => {
setSettings((prev) => {
const mergedSettings = { ...prev, ...newSettings };
// Save to localStorage
localStorage.setItem('app-settings', JSON.stringify(mergedSettings));
return mergedSettings;
});
};
return (
<SettingsContext.Provider value={{ settings, updateSettings }}>
{children}
</SettingsContext.Provider>
);
}
Using Settings in Components
Access settings using the custom hook useSettings in any component:
This hook provides:
• Current settings values
• updateSettings function to modify settings
• resetSettings function to restore defaults
import { useSettings } from 'src/hooks/use-settings';
function MyComponent() {
const { settings, updateSettings } = useSettings();
const handleToggleDarkMode = () => {
updateSettings({
themeMode: settings.themeMode === 'dark' ? 'light' : 'dark',
});
};
return (
<div>
<h1>Current Theme: {settings.themeMode}</h1>
<button onClick={handleToggleDarkMode}>
Toggle Dark Mode
</button>
{/* Other settings */}
<div>RTL: {settings.themeDirection === 'rtl' ? 'Enabled' : 'Disabled'}</div>
<div>Layout: {settings.themeLayout}</div>
</div>
);
}
Creating Custom Settings
To add your own custom settings:
Add your setting to
defaultSettingsinsrc/global-config.tsCreate a component to toggle/change the setting using
updateSettingsUse the setting value in your components via the
useSettingshookConsider adding effects that respond to setting changes if needed
Settings UI Example
Theme
Layout
import { Card, CardContent, Grid2, Stack, Switch, Typography } from '@mui/material';
import FormControlLabel from '@mui/material/FormControlLabel';
import { useSettings } from 'src/hooks/use-settings';
function SettingsPanel() {
const { settings, updateSettings } = useSettings();
return (
<Card>
<CardContent>
<Grid2 container spacing={2}>
<Grid2 size={{ xs: 12, sm: 6 }}>
<Typography variant="subtitle1" gutterBottom>Theme</Typography>
<Stack spacing={2}>
<FormControlLabel
control={
<Switch
checked={settings.themeMode === 'dark'}
onChange={() => updateSettings({
themeMode: settings.themeMode === 'dark' ? 'light' : 'dark',
})}
/>
}
label="Dark mode"
/>
<FormControlLabel
control={
<Switch
checked={settings.themeDirection === 'rtl'}
onChange={() => updateSettings({
themeDirection: settings.themeDirection === 'rtl' ? 'ltr' : 'rtl',
})}
/>
}
label="RTL"
/>
</Stack>
</Grid2>
{/* More settings... */}
</Grid2>
</CardContent>
</Card>
);
}