Feat: vela top supports custom theme features

[Hanmengnan]

Description of your changes

Background

The current theme color matching of vela top cannot be changed. It uses color names like blue and red to describe the colors in the UI.

However, this leads to a problem that the colors will vary according to the terminal colors, so the colors will appear strange on some users' terminals.

Solution

Therefore, I want to introduce a solution, that is, add the feature of custom theme in vela top. The theme file is described by YAML file. And I migrate some theme files of k9s to this format file and I have embed some theme in vela top.

Users can use ctrl + t to enter the theme switch view. The view will display embed themes and custom themes.
After selecting theme, users need to restart vela top to make new theme take effect.

The format of the theme configuration file is as follows, and users can define their custom theme config files in folowing format and put them in ~/.vela/theme/themes/ dir to add the custom theme to vela top.

info:
  title: "#69d9ed"
  text: "#c3eff7"
menu:
  description: "#6b7f7f"
  key: "#a7e24c"
logo:
  text: "#f72972"
crumbs:
  foreground: "#e0e0e0"
  background: "#5fd7ff"
table:
  title: "#ffffff"
  header: "#ffffff"
  body: "#5fd7ff"
status:
  starting: "#69d9ed"
  healthy: "#a7e24c"
  unhealthy: "#f72972"
  waiting: "#e47c20"
  succeeded: "#3174a2"
  failed: "#a7e24c"
  unknown: gray
yaml:
  key: "#e47c20"
  colon: "#e47c20"
  value: "#ffffff"
topology:
  line: "#69d9ed"
  app: "#f72972"
  workflow: "#5fd7ff"
  component: "#a7e24c"
  policy: "#e47c20"
  trait: "#f72972"
  kind: "#5fd7ff"

I have migrated several themes. The preview of the theme is as follows:

dracula

nord

one_dark

red

Fixes #5063

I have:

• Read and followed KubeVela's contribution process.
• Related Docs updated properly. In a new feature or configuration option, an update to the documentation is necessary.
• Run make reviewable to ensure this PR is ready for review.
• Added backport release-x.y labels to auto-backport this PR if necessary.

How has this code been tested

Special notes for your reviewer

[codecov]

Codecov Report

Base: 61.18% // Head: 61.13% // Decreases project coverage by -0.05% ⚠️

Coverage data is based on head (6c4a124) compared to base (dcb5378).
Patch has no changes to coverable lines.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #5180      +/-   ##
==========================================
- Coverage   61.18%   61.13%   -0.06%     
==========================================
  Files         305      305              
  Lines       45437    45437              
==========================================
- Hits        27799    27776      -23     
- Misses      14783    14805      +22     
- Partials     2855     2856       +1     

Flag	Coverage Δ
apiserver-e2etests	35.05% <ø> (-0.10%)	⬇️
apiserver-unittests	36.93% <ø> (+0.01%)	⬆️
core-unittests	55.08% <ø> (-0.03%)	⬇️
e2e-multicluster-test	18.92% <ø> (+0.07%)	⬆️
e2e-rollout-tests	20.53% <ø> (-0.04%)	⬇️
e2etests	26.09% <ø> (+0.08%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
pkg/addon/cache.go	56.50% <0.00%> (-7.63%)	⬇️
...tepdefinition/workflowstepdefinition_controller.go	70.58% <0.00%> (-7.06%)	⬇️
pkg/apiserver/interfaces/api/oam_application.go	59.18% <0.00%> (-5.11%)	⬇️
pkg/multicluster/cluster_management.go	36.70% <0.00%> (-2.40%)	⬇️
pkg/apiserver/utils/bcode/bcode.go	51.11% <0.00%> (-2.23%)	⬇️
pkg/velaql/providers/query/collector.go	68.80% <0.00%> (-1.84%)	⬇️
pkg/apiserver/domain/service/authentication.go	48.57% <0.00%> (-1.30%)	⬇️
pkg/apiserver/event/sync/store.go	71.74% <0.00%> (-0.90%)	⬇️
pkg/velaql/providers/query/tree.go	85.27% <0.00%> (-0.80%)	⬇️
.../core/scopes/healthscope/healthscope_controller.go	72.14% <0.00%> (-0.22%)	⬇️
... and 8 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[wonderflow]

Great job, how can I swith these different themes? Do we embed these themes as builtin ones?

[Hanmengnan]

Great job, how can I swith these different themes? Do we embed these themes as builtin ones?

You can use the environment variable to set the theme config file.

These theme files can be obtained from the kubevela repository.

Or you can define your theme config file and use it by setting the env

[wonderflow]

@Hanmengnan We can use go embed.FS to embed it.

[wonderflow]

great job, please also add usage docs to https://kubevela.net/docs/tutorials/vela-top

[Hanmengnan]

great job, please also add usage docs to https://kubevela.net/docs/tutorials/vela-top

Ok, I will update the usage docs soon.

[Somefive]

Great Job! Some questions:

1. Do users need to make migration from k9s theme files or they just need to copy them?
2. Is the theme file location the same as k9s or is there any other location or flags to load these theme files?

[Hanmengnan]

Great Job! Some questions:

1. Do users need to make migration from k9s theme files or they just need to copy them?
2. Is the theme file location the same as k9s or is there any other location or flags to load these theme files?

1. Users can write their own theme files according to their ideas. I have migrated all 13 kinds of theme files from K9s and embed theme in vela top. So their don't need. And why don't I use the K9s configuration directly? K9S has made magic changes to tview, and some of its layout is different from ours, so its theme settings are not directly applicable to us. Directly using the theme configuration file of K9S will make this configuration file look inappropriate on our tools, which will lead to confusion for users using these configuration files. So I define a new kind of theme config file format which only has some simple and clear fields. From these simple and clear fields, users can know which component colors they are corresponding to.
2. Users can define their custom theme config files in folowing format and put them in ~/.vela/theme/themes/ dir to add the custom theme to vela top.