57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import type { Options, Styles } from 'react-joyride';
|
|
|
|
export function getTutorialStyles(theme: 'light' | 'dark'): {
|
|
options: Partial<Options>;
|
|
styles: Partial<Styles>;
|
|
} {
|
|
const isDark = theme === 'dark';
|
|
|
|
return {
|
|
options: {
|
|
arrowColor: isDark ? '#292524' : '#ffffff',
|
|
backgroundColor: isDark ? '#292524' : '#ffffff',
|
|
disableFocusTrap: true,
|
|
hideOverlay: true,
|
|
overlayColor: isDark ? 'rgba(10,14,26,0.75)' : 'rgba(0,0,0,0.5)',
|
|
primaryColor: '#00a28c',
|
|
spotlightRadius: 8,
|
|
textColor: isDark ? '#d6d3d1' : '#44403c',
|
|
zIndex: 1000,
|
|
},
|
|
styles: {
|
|
tooltip: {
|
|
borderRadius: 8,
|
|
padding: 16,
|
|
},
|
|
tooltipTitle: {
|
|
color: isDark ? '#f5f5f4' : '#0a0e1a',
|
|
fontSize: 15,
|
|
fontWeight: 600,
|
|
},
|
|
tooltipContent: {
|
|
fontSize: 13,
|
|
lineHeight: 1.5,
|
|
padding: '8px 0 0',
|
|
},
|
|
buttonPrimary: {
|
|
borderRadius: 6,
|
|
fontSize: 13,
|
|
fontWeight: 500,
|
|
padding: '6px 14px',
|
|
},
|
|
buttonBack: {
|
|
color: isDark ? '#a8a29e' : '#78716c',
|
|
fontSize: 13,
|
|
fontWeight: 500,
|
|
marginRight: 8,
|
|
},
|
|
buttonSkip: {
|
|
color: isDark ? '#78716c' : '#a8a29e',
|
|
fontSize: 12,
|
|
},
|
|
buttonClose: {
|
|
color: isDark ? '#a8a29e' : '#78716c',
|
|
},
|
|
},
|
|
};
|
|
}
|