CSS settings that make it difficult to create editor themes with different colors

As requested, here’s a list of issues I found while trying to create an editor theme with different colors:

• Hardcoded styles
  • Link Nodes properties
  • Projects -> New - Credentials
  • Project Settings - Settings - Credentials State (both icon and text)
  • Node Status White background
  • Dashboard - Tabs & Links I don’t know if this is the right place to talk about this one
  • Navigator (div, svg and rect)
  • Debug Tools Window doesn’t load custom CSS
• Wrong (?) classes
  • Commit Changes Some parts of the diff table use debug message panel styles
• !important rules
  • diff.scss
    • background (Line 456)
    • background (Line 459)
  • palette-editor.scss
    • background (Line 125)
    • background (Line 217)

I’ll update this list if I find similar issues elsewhere.

[knolleary]

@bonanitech we are working on a complete reworking of the editor CSS. This is a massive change to pretty much everything.

As a breaking change it will be part of the upcoming 1.0 release.

The work for that release is in the dev branch. The pr that introduced most of the changes is here: https://github.com/node-red/node-red/pull/2158

One of the goals for this will be to also make it easier to create themes. The restructuring of the sass files puts all colours into one file. I plan to create a theme roller app that makes it easy to plug in a custom set of colours and generate a theme CSS. Once we have that, it would be great to use your midnight theme as a test case and have it available when we release 1.0.

I’ll be in touch once we have a few more pieces in place.

[dceejay]

good info - thanks. (slightly reformatted to add tickboxes, and yes please add other as you find them)