Highlight for console output in both light and dark styles

[normal-coder]

Clear and concise description of the problem

The high-light colors output by Turbo Console are the same between the light and dark mode. However, in reality, the colors in dark mode appear very glaring. Just like the content output by the App.vue color block. In dark mode, the colors are too bright, causing the white text to appear weak instead, visually creating uncomfortable stimulation.

Suggested solution

• [ ] Adapt different highlight colors for light and dark themes
• [ ] Perhaps could try providing more flexible custom themes? (Although this may not improve development efficiency, customizing a set of color output schemes for Turbo Console based on the works of development is really cool!)

Alternative

Refer to the solution above

Additional context

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[yuyinws]

The highlight code is generated on compile time, So it is difficult to automatically adapt to the system theme.

I prefer to provide an advanced option for users to customize the theme like this:

TurboConsole({
      themes: {
        highlight: {
          icon: '🚀',
          vue: {
            padding: '2px 5px',
            radius: '3px 0 0 3px',
            color: '#fff',
            background: '#335d92',
          },
          js: {
            // ...
          },
          ts: {
            // ...
          }
        },
        launchEditor: {
          icon: '🔦',
          style: {
            padding: '2px 5px',
            radius: '3px 0 0 3px',
            color: '#fff',
            background: '#335d92',
          }
        }
      }
})

WDYT?

[normal-coder]

The highlight code is generated on compile time, So it is difficult to automatically adapt to the system theme.

I prefer to provide an advanced option for users to customize the theme like this:

...

WDYT?

Providing various customization options is a good way. BTW, users also like the plug-and-play recommendation 😂

I tried it myself. Originally, I thought of using the Window object to determine if it is in dark mode, but obviously, this cannot be applied to all scenarios. Perhaps multiple methods can be considered for combination.

const isDarkTheme = window.matchMedia("(prefers-color-scheme: dark)");

[yuyinws]

This feature had release on v1.10.0.

You can refer documentation for the setup.