Skip to content

Home

Jump to bottom
maboroshin edited this page Oct 1, 2024 · 9 revisions

Color theme basics

The UI should use the basic colors and the seven rainbow colors. This is because many color themes do so. By following this principle, your app can easily apply a myriad of color themes.

Background color, text color (foreground), selection color, comment color. Added to these are seven rainbow colors.

Basic colors - Color themes has basic colors. It is 4-5 colors.

  • Background : Normal Background
  • Current Line : Background (Current line and selection may not be separated)
  • Selection : Background (Same)
  • Foreground
  • Comment (Gray) : Foreground

Basically, there are background color, foreground color and comment color (foreground, less noticeable). Also, as background color, have selection color. There may not have a current line color.

If selection color is too dark (too light), current line color is the best as second background color.

If the colors are too close together, monitors with fewer colors will render them as the same color. Please make it easy to distinguish. Background color, current line and selected color.

The selection color may create its own color. The color should be slightly yellowish. The effect is that the text or background is glowing.

Prism colors - Color themes has prism colors. It is 7-8 colors.

  1. Pink/Magenta (Optional)
  2. Red
  3. Orange
  4. Yellow
  5. Green
  6. Aqua/Cyan
  7. Blue (Optional, below)
  8. Purple/Violet

Missing color

  • Dracula :Blue
  • Tomorrow, gruvbox, ayu : Pink

Some color themes have 8 rainbow colors. Some themes are in seven colors. The missing colors are blue or pink. And missing parts should be blue or pink. Assign colors automatically. When there is no blue, pink will be assigned. Or the reverse. Blue and pink are very different. Think it's a problem.

Color choice

I do not know this is the best (incomplete theory). Adjust if there are too many colors.

  1. Red - Error, Number(bold)

  2. Orange - Argument

  3. Yellow -

  4. Green - String 2

  5. Aqua/Cyan - String

  6. Purple/Violet - Core keyword(bold)

  7. Blue/Pink(Magenta) - Other Important (e.g. Label, Package)

Notes

Magic blue : #0089DB (decimal : 0, 139, 219). Magic blue is visible on dark/light.

Clone this wiki locally