52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import type { Styles } from 'react-joyride';
|
|
|
|
export function getTutorialStyles(theme: 'light' | 'dark'): Partial<Styles> {
|
|
const isDark = theme === 'dark';
|
|
|
|
return {
|
|
options: {
|
|
arrowColor: isDark ? '#292524' : '#ffffff',
|
|
backgroundColor: isDark ? '#292524' : '#ffffff',
|
|
overlayColor: isDark ? 'rgba(10,14,26,0.75)' : 'rgba(0,0,0,0.5)',
|
|
primaryColor: '#00a28c',
|
|
textColor: isDark ? '#d6d3d1' : '#44403c',
|
|
zIndex: 1000,
|
|
},
|
|
tooltip: {
|
|
borderRadius: 8,
|
|
padding: 16,
|
|
},
|
|
tooltipTitle: {
|
|
color: isDark ? '#f5f5f4' : '#0a0e1a',
|
|
fontSize: 15,
|
|
fontWeight: 600,
|
|
},
|
|
tooltipContent: {
|
|
fontSize: 13,
|
|
lineHeight: 1.5,
|
|
padding: '8px 0 0',
|
|
},
|
|
buttonNext: {
|
|
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',
|
|
},
|
|
spotlight: {
|
|
borderRadius: 8,
|
|
},
|
|
};
|
|
}
|