colorShow

The colorShow extension provides color previews when configuring custom themes using ThemeProvider in React. When typing the theme object, it displays a preview of the configured colors, making it easier to develop customized interfaces.

Features

• Displays color previews when typing theme. in the code, showing visual representations of the colors configured in the theme.
• Automatically activates when typing . on the same line as a theme object.
• Supports multiple theme files configured through settings.json.

Installation

To work correctly, the extension requires configuring the colorShowExtension.tsFilesPaths variable in the VS Code settings.json file.

Example configuration:

"colorShowExtension.tsFilesPaths": [
    "src/styles/theme.ts",
    "src/styles/anotherTheme.ts"
]

This configuration defines the paths to the theme.ts files that the extension will monitor to display color previews.

Usage Instructions

Configure settings.json as shown in the example above, pointing to the relevant theme.ts files in your project. Use the theme object in your code. Whenever you type theme. on a line, the extension will activate to show color suggestions. Automatic continuation: If you continue typing . on the same line after theme., the extension will be triggered again to provide additional suggestions. Credits Developed by mobileWorker1st.

Requirements

You need to have a theme file configured according to the project conventions, usually named theme.ts or anotherTheme.ts. Extension Settings The colorShow extension contributes the following settings:

colorShowExtension.tsFilesPaths: An array of strings specifying the paths to the theme.ts files to be monitored. Known Issues Currently, there are no known issues. Please open an issue in the repository if you encounter any problems.

Release Notes

1.0.0 Initial release with support for theme color previews. Following Extension Guidelines