Komas Changes #1
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
There was a problem hiding this comment.
Pull Request Overview
This PR implements a custom purple Matrix-style theme for syntax highlighting across the application. The changes standardize the visual appearance of code displays by replacing inline styling with a reusable theme object.
- Adds a custom purple Matrix-style theme for syntax highlighting components
- Updates Monaco Editor configuration with the new theme
- Removes TypeScript ignore comments and ESLint disables for cleaner code
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/app/dashboard/playground/page.tsx | Adds purpleMatrixTheme object and Monaco theme configuration, updates SyntaxHighlighter styling |
| src/app/dashboard/examples/page.tsx | Implements purpleMatrixTheme and updates SyntaxHighlighter styling |
| src/app/dashboard/docs/page.tsx | Applies purpleMatrixTheme to all SyntaxHighlighter instances |
| .claude/settings.local.json | Adds Claude AI configuration file for build permissions |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
|
||
| // Custom purple Matrix-style theme | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| const purpleMatrixTheme: any = { |
There was a problem hiding this comment.
The purpleMatrixTheme object is duplicated across multiple files. Consider extracting this theme to a shared utility file or constants to reduce code duplication and improve maintainability.
Comment on lines
+18
to
+52
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| const purpleMatrixTheme: any = { | ||
| 'hljs': { | ||
| display: 'block', | ||
| overflowX: 'auto', | ||
| padding: '1rem', | ||
| background: theme === 'dark' ? '#0a0a0a' : '#f8f8ff', | ||
| color: '#9d4edd', | ||
| borderRadius: '0.5rem' | ||
| }, | ||
| 'hljs-keyword': { color: '#c77dff' }, | ||
| 'hljs-string': { color: '#e0aaff' }, | ||
| 'hljs-number': { color: '#7b2cbf' }, | ||
| 'hljs-comment': { color: '#6c63ff', fontStyle: 'italic' }, | ||
| 'hljs-function': { color: '#8b5cf6' }, | ||
| 'hljs-variable': { color: '#a855f7' }, | ||
| 'hljs-property': { color: '#9333ea' }, | ||
| 'hljs-built_in': { color: '#7c3aed' }, | ||
| 'hljs-title': { color: '#6d28d9' }, | ||
| 'hljs-literal': { color: '#8b5cf6' }, | ||
| 'hljs-type': { color: '#7c3aed' }, | ||
| 'hljs-attribute': { color: '#9333ea' }, | ||
| 'hljs-meta': { color: '#6c63ff' }, | ||
| 'hljs-tag': { color: '#8b5cf6' }, | ||
| 'hljs-name': { color: '#a855f7' }, | ||
| 'hljs-attr': { color: '#9333ea' }, | ||
| 'hljs-selector-id': { color: '#7c3aed' }, | ||
| 'hljs-selector-class': { color: '#8b5cf6' }, | ||
| 'hljs-regexp': { color: '#c77dff' }, | ||
| 'hljs-link': { color: '#e0aaff' }, | ||
| 'hljs-symbol': { color: '#7b2cbf' }, | ||
| 'hljs-bullet': { color: '#9d4edd' }, | ||
| 'hljs-addition': { color: '#8b5cf6', backgroundColor: theme === 'dark' ? '#1a1a1a' : '#faf5ff' }, | ||
| 'hljs-deletion': { color: '#7b2cbf', backgroundColor: theme === 'dark' ? '#1a1a1a' : '#faf5ff' } | ||
| }; |
There was a problem hiding this comment.
The purpleMatrixTheme object is duplicated across multiple files. Consider extracting this theme to a shared utility file or constants to reduce code duplication and improve maintainability.
Suggested change
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | |
| const purpleMatrixTheme: any = { | |
| 'hljs': { | |
| display: 'block', | |
| overflowX: 'auto', | |
| padding: '1rem', | |
| background: theme === 'dark' ? '#0a0a0a' : '#f8f8ff', | |
| color: '#9d4edd', | |
| borderRadius: '0.5rem' | |
| }, | |
| 'hljs-keyword': { color: '#c77dff' }, | |
| 'hljs-string': { color: '#e0aaff' }, | |
| 'hljs-number': { color: '#7b2cbf' }, | |
| 'hljs-comment': { color: '#6c63ff', fontStyle: 'italic' }, | |
| 'hljs-function': { color: '#8b5cf6' }, | |
| 'hljs-variable': { color: '#a855f7' }, | |
| 'hljs-property': { color: '#9333ea' }, | |
| 'hljs-built_in': { color: '#7c3aed' }, | |
| 'hljs-title': { color: '#6d28d9' }, | |
| 'hljs-literal': { color: '#8b5cf6' }, | |
| 'hljs-type': { color: '#7c3aed' }, | |
| 'hljs-attribute': { color: '#9333ea' }, | |
| 'hljs-meta': { color: '#6c63ff' }, | |
| 'hljs-tag': { color: '#8b5cf6' }, | |
| 'hljs-name': { color: '#a855f7' }, | |
| 'hljs-attr': { color: '#9333ea' }, | |
| 'hljs-selector-id': { color: '#7c3aed' }, | |
| 'hljs-selector-class': { color: '#8b5cf6' }, | |
| 'hljs-regexp': { color: '#c77dff' }, | |
| 'hljs-link': { color: '#e0aaff' }, | |
| 'hljs-symbol': { color: '#7b2cbf' }, | |
| 'hljs-bullet': { color: '#9d4edd' }, | |
| 'hljs-addition': { color: '#8b5cf6', backgroundColor: theme === 'dark' ? '#1a1a1a' : '#faf5ff' }, | |
| 'hljs-deletion': { color: '#7b2cbf', backgroundColor: theme === 'dark' ? '#1a1a1a' : '#faf5ff' } | |
| }; | |
| import { getPurpleMatrixTheme } from '@/app/constants/themes'; | |
| const purpleMatrixTheme = getPurpleMatrixTheme(theme); |
Comment on lines
+19
to
+53
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| const purpleMatrixTheme: any = { | ||
| 'hljs': { | ||
| display: 'block', | ||
| overflowX: 'auto', | ||
| padding: '1rem', | ||
| background: theme === 'dark' ? '#0a0a0a' : '#f8f8ff', | ||
| color: '#9d4edd', | ||
| borderRadius: '0.5rem' | ||
| }, | ||
| 'hljs-keyword': { color: '#c77dff' }, | ||
| 'hljs-string': { color: '#e0aaff' }, | ||
| 'hljs-number': { color: '#7b2cbf' }, | ||
| 'hljs-comment': { color: '#6c63ff', fontStyle: 'italic' }, | ||
| 'hljs-function': { color: '#8b5cf6' }, | ||
| 'hljs-variable': { color: '#a855f7' }, | ||
| 'hljs-property': { color: '#9333ea' }, | ||
| 'hljs-built_in': { color: '#7c3aed' }, | ||
| 'hljs-title': { color: '#6d28d9' }, | ||
| 'hljs-literal': { color: '#8b5cf6' }, | ||
| 'hljs-type': { color: '#7c3aed' }, | ||
| 'hljs-attribute': { color: '#9333ea' }, | ||
| 'hljs-meta': { color: '#6c63ff' }, | ||
| 'hljs-tag': { color: '#8b5cf6' }, | ||
| 'hljs-name': { color: '#a855f7' }, | ||
| 'hljs-attr': { color: '#9333ea' }, | ||
| 'hljs-selector-id': { color: '#7c3aed' }, | ||
| 'hljs-selector-class': { color: '#8b5cf6' }, | ||
| 'hljs-regexp': { color: '#c77dff' }, | ||
| 'hljs-link': { color: '#e0aaff' }, | ||
| 'hljs-symbol': { color: '#7b2cbf' }, | ||
| 'hljs-bullet': { color: '#9d4edd' }, | ||
| 'hljs-addition': { color: '#8b5cf6', backgroundColor: theme === 'dark' ? '#1a1a1a' : '#faf5ff' }, | ||
| 'hljs-deletion': { color: '#7b2cbf', backgroundColor: theme === 'dark' ? '#1a1a1a' : '#faf5ff' } | ||
| }; |
There was a problem hiding this comment.
The purpleMatrixTheme object is duplicated across multiple files. Consider extracting this theme to a shared utility file or constants to reduce code duplication and improve maintainability.
Suggested change
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | |
| const purpleMatrixTheme: any = { | |
| 'hljs': { | |
| display: 'block', | |
| overflowX: 'auto', | |
| padding: '1rem', | |
| background: theme === 'dark' ? '#0a0a0a' : '#f8f8ff', | |
| color: '#9d4edd', | |
| borderRadius: '0.5rem' | |
| }, | |
| 'hljs-keyword': { color: '#c77dff' }, | |
| 'hljs-string': { color: '#e0aaff' }, | |
| 'hljs-number': { color: '#7b2cbf' }, | |
| 'hljs-comment': { color: '#6c63ff', fontStyle: 'italic' }, | |
| 'hljs-function': { color: '#8b5cf6' }, | |
| 'hljs-variable': { color: '#a855f7' }, | |
| 'hljs-property': { color: '#9333ea' }, | |
| 'hljs-built_in': { color: '#7c3aed' }, | |
| 'hljs-title': { color: '#6d28d9' }, | |
| 'hljs-literal': { color: '#8b5cf6' }, | |
| 'hljs-type': { color: '#7c3aed' }, | |
| 'hljs-attribute': { color: '#9333ea' }, | |
| 'hljs-meta': { color: '#6c63ff' }, | |
| 'hljs-tag': { color: '#8b5cf6' }, | |
| 'hljs-name': { color: '#a855f7' }, | |
| 'hljs-attr': { color: '#9333ea' }, | |
| 'hljs-selector-id': { color: '#7c3aed' }, | |
| 'hljs-selector-class': { color: '#8b5cf6' }, | |
| 'hljs-regexp': { color: '#c77dff' }, | |
| 'hljs-link': { color: '#e0aaff' }, | |
| 'hljs-symbol': { color: '#7b2cbf' }, | |
| 'hljs-bullet': { color: '#9d4edd' }, | |
| 'hljs-addition': { color: '#8b5cf6', backgroundColor: theme === 'dark' ? '#1a1a1a' : '#faf5ff' }, | |
| 'hljs-deletion': { color: '#7b2cbf', backgroundColor: theme === 'dark' ? '#1a1a1a' : '#faf5ff' } | |
| }; | |
| const purpleMatrixTheme = getPurpleMatrixTheme(theme); |
| }; | ||
|
|
||
| // Custom purple Matrix theme for Monaco Editor | ||
| const monacoTheme = { |
There was a problem hiding this comment.
The monacoTheme object could also be extracted to a shared utility file for consistency and reusability across the application.
Pikachubolk
requested changes
Aug 26, 2025
Contributor
Pikachubolk
left a comment
Pikachubolk
left a comment
There was a problem hiding this comment.
What this co-pilot fella said
Author
|
yeah |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.