Get your colour on: Making ColourIds easier

Useful Tools and Components
1

At the moment, setting colour ids is a pain.

How about something like this for simple projects?

Might need a little refinement still … but would help a lot with getting small projects looking right quickly. It rips generously from the LookAndFeel_V2 constructor…

/**
Applies a simple colour scheme to a given look and feel 
*/
inline void applyThreeColourScheme(LookAndFeel & laf, Colour accentBaseColour, Colour foregroundBaseColour, Colour backgroundBaseColour)
{
	auto fg = foregroundBaseColour.getARGB();
	auto bright = foregroundBaseColour.withMultipliedBrightness(1.5f).getARGB();
	auto dim = foregroundBaseColour.withMultipliedBrightness(0.6f).getARGB();
	auto bg = backgroundBaseColour.getARGB();
	auto accent = accentBaseColour.getARGB();
	auto transparent = Colours::transparentBlack.getARGB();

	static const juce::uint32 standardColours[] =
	{
		TextButton::buttonColourId,                 fg,
		TextButton::buttonOnColourId,               accent,
		TextButton::textColourOnId,                 bg,
		TextButton::textColourOffId,                bg,

		ToggleButton::textColourId,                 fg,

		TextEditor::backgroundColourId,             bg,
		TextEditor::textColourId,                   fg,
		TextEditor::highlightColourId,              bg,
		TextEditor::highlightedTextColourId,        fg,
		TextEditor::outlineColourId,                transparent,
		TextEditor::focusedOutlineColourId,         fg,
		TextEditor::shadowColourId,                 transparent,

		CaretComponent::caretColourId,              fg,

		Label::backgroundColourId,                  transparent,
		Label::textColourId,                        fg,
		Label::outlineColourId,                     transparent,

		ScrollBar::backgroundColourId,              transparent,
		ScrollBar::thumbColourId,                   fg,

		TreeView::linesColourId,                    dim,
		TreeView::backgroundColourId,               transparent,
		TreeView::dragAndDropIndicatorColourId,     accent,
		TreeView::selectedItemBackgroundColourId,   fg,

		PopupMenu::backgroundColourId,              bg,
		PopupMenu::textColourId,                    fg,
		PopupMenu::headerTextColourId,              bright,
		PopupMenu::highlightedTextColourId,         bg,
		PopupMenu::highlightedBackgroundColourId,   accent,

		ComboBox::buttonColourId,                   fg,
		ComboBox::outlineColourId,                  dim,
		ComboBox::textColourId,                     fg,
		ComboBox::backgroundColourId,               bg,
		ComboBox::arrowColourId,                    fg,

		PropertyComponent::backgroundColourId,      bg,
		PropertyComponent::labelTextColourId,       fg,

		TextPropertyComponent::backgroundColourId,  bg,
		TextPropertyComponent::textColourId,        fg,
		TextPropertyComponent::outlineColourId,     dim,

		BooleanPropertyComponent::backgroundColourId, bg,
		BooleanPropertyComponent::outlineColourId,  dim,

		ListBox::backgroundColourId,                bg,
		ListBox::outlineColourId,                   fg,
		ListBox::textColourId,                      fg,

		Slider::backgroundColourId,                 transparent,
		Slider::thumbColourId,                      fg,
		Slider::trackColourId,                      bg,
		Slider::rotarySliderFillColourId,           accent,
		Slider::rotarySliderOutlineColourId,        fg,
		Slider::textBoxTextColourId,                fg,
		Slider::textBoxBackgroundColourId,          bg,
		Slider::textBoxHighlightColourId,           bright,
		Slider::textBoxOutlineColourId,             dim,

		ResizableWindow::backgroundColourId,        bg,
		//DocumentWindow::textColourId,               0xff000000, // (this is deliberately not set)

		AlertWindow::backgroundColourId,            bg,
		AlertWindow::textColourId,                  fg,
		AlertWindow::outlineColourId,               accent,

		ProgressBar::backgroundColourId,            bg,
		ProgressBar::foregroundColourId,            accent,

		TooltipWindow::backgroundColourId,          bg,
		TooltipWindow::textColourId,                fg,
		TooltipWindow::outlineColourId,             dim,

		TabbedComponent::backgroundColourId,        transparent,
		TabbedComponent::outlineColourId,           dim,
		TabbedButtonBar::tabOutlineColourId,        dim,
		TabbedButtonBar::frontOutlineColourId,      fg,

		Toolbar::backgroundColourId,                bg,
		Toolbar::separatorColourId,                 fg,
		Toolbar::buttonMouseOverBackgroundColourId, accent,
		Toolbar::buttonMouseDownBackgroundColourId, bg,
		Toolbar::labelTextColourId,                 fg,
		Toolbar::editingModeOutlineColourId,        accent,

		DrawableButton::textColourId,               fg,
		DrawableButton::textColourOnId,             bg,
		DrawableButton::backgroundColourId,         bg,
		DrawableButton::backgroundOnColourId,       accent,

		HyperlinkButton::textColourId,              accent,

		GroupComponent::outlineColourId,            0x66000000,
		GroupComponent::textColourId,               0xff000000,

		BubbleComponent::backgroundColourId,        0xeeeeeebb,
		BubbleComponent::outlineColourId,           0x77000000,

		DirectoryContentsDisplayComponent::highlightColourId,   accent,
		DirectoryContentsDisplayComponent::textColourId,        fg,

		0x1000440, /*LassoComponent::lassoFillColourId*/        transparent,
		0x1000441, /*LassoComponent::lassoOutlineColourId*/     accent,

		0x1005000, /*MidiKeyboardComponent::whiteNoteColourId*/               bg,
		0x1005001, /*MidiKeyboardComponent::blackNoteColourId*/               fg,
		0x1005002, /*MidiKeyboardComponent::keySeparatorLineColourId*/        dim,
		0x1005003, /*MidiKeyboardComponent::mouseOverKeyOverlayColourId*/     accent,
		0x1005004, /*MidiKeyboardComponent::keyDownOverlayColourId*/          dim,
		0x1005005, /*MidiKeyboardComponent::textLabelColourId*/               fg,
		0x1005006, /*MidiKeyboardComponent::upDownButtonBackgroundColourId*/  fg,
		0x1005007, /*MidiKeyboardComponent::upDownButtonArrowColourId*/       bg,
		0x1005008, /*MidiKeyboardComponent::shadowColourId*/                  transparent,

		0x1004500, /*CodeEditorComponent::backgroundColourId*/                bg,
		0x1004502, /*CodeEditorComponent::highlightColourId*/                 dim,
		0x1004503, /*CodeEditorComponent::defaultTextColourId*/               fg,
		0x1004504, /*CodeEditorComponent::lineNumberBackgroundId*/            bg,
		0x1004505, /*CodeEditorComponent::lineNumberTextId*/                  dim,

		0x1007000, /*ColourSelector::backgroundColourId*/                     bg,
		0x1007001, /*ColourSelector::labelTextColourId*/                      fg,

		0x100ad00, /*KeyMappingEditorComponent::backgroundColourId*/          bg,
		0x100ad01, /*KeyMappingEditorComponent::textColourId*/                fg,

		FileSearchPathListComponent::backgroundColourId,        bg,

		FileChooserDialogBox::titleTextColourId,                fg,
	};

	for (int i = 0; i < numElementsInArray(standardColours); i += 2)
		laf.setColour(int(standardColours[i]), Colour(juce::uint32(standardColours[i + 1])));
}
2 Likes
2

Great opportunity for some C++11 variadic argument templates…

1 Like
3

Where are you going with that thought…?

4

Just that it’d be nice to call a function to set that big list of colours rather than creating an array and then iterating it.

1 Like
5

Well it could call laf.setColour directly, which is a matter of some regex over the existing code.

How did you work varidac template arguments into it.

6

@jules I know this thread was a few years ago, but I am now trying to figure out the best practice for changing an application “skin” dynamically – would you take this approach of creating a function to do all the LAF.assignColour() calls…?

Thanks!

1 Like
7

In the end we did this:

  • Made a colour object that can cast to a juce::Colour.
  • Defined each colour as a static variable
  • Have the new colour object register with a colour editor/colour theme loader
  • Replaced all uses of the JUCE ColourIds with uses of our new Colour object by overriding LookAndFeel with our own drawing routines.

Works really well!

4 Likes
8

This should be in Juce out of the box :slight_smile:

9

awesome, thank you!