bbbenji / synthwave-hass

Synthwave inspired theme for Home Assistant
MIT License
154 stars 24 forks source link

Template editor improvement? #41

Closed mindtripper closed 2 years ago

mindtripper commented 2 years ago

Love the look and feel of this template. And can't do without it. Thank you for creating it!

I've made an adjustment to the template that I thought I'd share. It makes the Template easier to read/use.

image

With this template codes:

  # editor
  codemirror-keyword: "#C792EA"
  codemirror-operator: "#89DDFF"
  codemirror-variable: "#f07178"
  codemirror-variable-2: "#EEFFFF"
  codemirror-variable-3: "#DECB6B"
  codemirror-builtin: "#FFCB6B"
  codemirror-atom: "#F78C6C"
  codemirror-number: "#FF5370"
  codemirror-def: "#82AAFF"
  codemirror-string: "#C3E88D"
  codemirror-string-2: "#f07178"
  # codemirror-comment: "#545454" Grey comment
  codemirror-comment: "#F7FB00"
  codemirror-tag: "#FF5370"
  codemirror-meta: "#FFCB6B"
  codemirror-attribute: "#C792EA"
  codemirror-property: "#C792EA"
  codemirror-qualifier: "#DECB6B"
  codemirror-type: "#DECB6B"

Found via this post: https://community.home-assistant.io/t/0-115-b-day-release-media-browser-tags-automations-wth/227518/18

bbbenji commented 2 years ago

Oh that looks great, however it's a bit off from the original VSCode theme that this HA them is based off of: https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode

Would be awesome if you could align the styling with that and submit a PR!

MatthewGlancy commented 2 years ago

Hey guys,

Decided to give this a go - how does this look? Asking both @bbbenji and @mindtripper

Struggled to get a really good replication of the theme for a few reasons

  1. Replicating the glow is going to be challenging (ie. needs updates to the extras repo, since themes don't support this)
  2. There's a bunch of color variables being reused for multiple things - ie. codemirror-number being used for both numbers and braces (Who made this decision lol?)
  3. The strings outside of quotes just use primary-text-color, with no opportunity for override :(

Anyway - this was my effort, copying a bunch of colours from the VS code theme. Happy to PR if all is well

Screenshot 2022-03-31 at 21 01 04

Also a before for reference is probably useful - imho pretty much anything would be better than this, it's breaching unreadable - especially the function calls/properties

Screenshot 2022-03-31 at 21 04 07