Function useCodeMirrorTheme

packages/web/src/hooks/useCodeMirrorTheme.ts:14–55

()

import tailwind from "@/tailwind";

export const useCodeMirrorTheme = () => {
    const { theme } = useThemeNormalized();
    const highlightStyle = useCodeMirrorHighlighter();

    const cmTheme = useMemo(() => {
        const {
            background,
            foreground,
            caret,
            selection,
            selectionMatch,
            gutterBackground,
            gutterForeground,
            gutterBorder,
            gutterActiveForeground,
            lineHighlight,
        } = tailwind.theme.colors.editor;

        return [
            createThemeExtension({
                theme: theme === 'dark' ? 'dark' : 'light',
                settings: {
                    background,
                    foreground,
                    caret,
                    selection,
                    selectionMatch,
                    gutterBackground,
                    gutterForeground,
                    gutterBorder,
                    gutterActiveForeground,
                    lineHighlight,
                    fontFamily: tailwind.theme.fontFamily.editor,
                    fontSize: tailwind.theme.fontSize.editor,
                }
            }),
            syntaxHighlighting(highlightStyle)
        ]
    }, [highlightStyle, theme]);

    return cmTheme;
}


// @see: https://github.com/uiwjs/react-codemirror/blob/e365f7d1f8a0ec2cd88455b7a248f6338c859cc7/themes/theme/src/index.tsx