Is there a way to use styled components from making dynamic ace editor themes.

[KalebMatthews]

Here is my crude attempt at this. It is very hacky and rushed but this should get you started at the very least.

Sorry for a ton of props but there are a ton of things that can be colored differently.

interface StyledEditorProps {
    customThemeColors: {
        baseColor: string;
        overlayColor: string;
        accentColor: string;
        standardTextColor: string;
        keywordColor: string;
        functionalColor: string;
        stringColor: string;
        commentColor: string;
        numericColor: string;
        operatorColor: string;
        tagColor: string;
        unitColor: string;
        charColor: string;
        activeLineColor: string;
        cursorColor: string;
        languageColor: string;
        selectionBackgroundColor: string;
        invalidBackgroundColor: string;
        invalidTextColor: string;
        foldBackgroundColor: string;
        foldBorderColor: string;
    }
}
const StyledEditor = styled(AceEditor) <any>`
    .ace_content {
        background-color: ${(props: StyledEditorProps) => props.customThemeColors.baseColor} !important;
        color: ${(props: StyledEditorProps) => props.customThemeColors.standardTextColor};
    }
    .ace_gutter {
        background: ${(props: StyledEditorProps) => props.customThemeColors?.overlayColor};
        color: ${(props: StyledEditorProps) => props.customThemeColors.standardTextColor};
    }
    .ace_print-margin {
        background-color: ${(props: StyledEditorProps) => props.customThemeColors?.baseColor};
    }
    .ace_cursor {
        color: ${(props: StyledEditorProps) => props.customThemeColors.cursorColor};
    }
    .ace_marker-layer .ace_selection {
        background: ${(props: StyledEditorProps) => props.customThemeColors?.selectionBackgroundColor};
    }
    .ace_marker-layer .ace_step {
        background: ${(props: StyledEditorProps) => props.customThemeColors?.accentColor};
    }
    .ace_marker-layer .ace_active-line {
        background: ${(props: StyledEditorProps) => props.customThemeColors.activeLineColor};
    }
    .ace_gutter-active-line {
        background-color: ${(props: StyledEditorProps) => props.customThemeColors.activeLineColor};
    }
    .ace_keyword, 
    .ace_meta, 
    .ace_support.ace_constant.ace_property-value {
        color: ${(props: StyledEditorProps) => props.customThemeColors.keywordColor};
    }
    .ace_keyword.ace_operator {
        color: ${(props: StyledEditorProps) => props.customThemeColors.operatorColor};
    }
    .ace_keyword.ace_other.ace_unit {
        color: ${(props: StyledEditorProps) => props.customThemeColors.unitColor};
    }
    .ace_constant.ace_language {
        color: ${(props: StyledEditorProps) => props.customThemeColors.languageColor};
    }
    .ace_constant.ace_numeric {
        color: ${(props: StyledEditorProps) => props.customThemeColors.numericColor};
    }
    .ace_constant.ace_character.ace_entity {
        color: ${(props: StyledEditorProps) => props.customThemeColors.charColor};
    }
    .ace_invalid {
        color: ${(props: StyledEditorProps) => props.customThemeColors.invalidTextColor};
        background-color: ${(props: StyledEditorProps) => props.customThemeColors.invalidBackgroundColor};
    }
    .ace_fold {
        background-color: ${(props: StyledEditorProps) => props.customThemeColors.foldBackgroundColor};
        border-color: ${(props: StyledEditorProps) => props.customThemeColors.foldBorderColor};
    }
    .ace_storage,
    .ace_support.ace_class,
    .ace_support.ace_function,
    .ace_support.ace_other,
    .ace_support.ace_type {
        color: ${(props: StyledEditorProps) => props.customThemeColors.functionalColor};
    }
    .ace_string {
        color: ${(props: StyledEditorProps) => props.customThemeColors.stringColor};
    }
    .ace_comment {
        color: ${(props: StyledEditorProps) => props.customThemeColors.commentColor};
    }
    .ace_entity.ace_name.ace_tag,
    .ace_entity.ace_other.ace_attribute-name {
        color: ${(props: StyledEditorProps) => props.customThemeColors.tagColor};
    }
`;

[securingsincity]

@KalebMatthews that's really cool! @mohsinxx365 does this work for you?

[KalebMatthews]

Just to note that this does break any intellisense for the props since its using type, but it will get the job done for dynamically theming. If it gets worked into this package then I would love to see typing for it so there's no guess work in color names.

[mohsinxx365]

@securingsincity I will test it out and tell

[mohsinxx365]

Soon