[JUCE API] Customizing The GUI(1)

For costomizing the GUI's color, I utilized the LookAndFill class and passed it to the plugin editor

This is ths GUI before customizing, which is offered by JUCE Framework initially.

class MyLookAndFeel  : public juce::LookAndFeel_V4
{
public:
    MyLookAndFeel();
    ~MyLookAndFeel() override;
 }

There is a latest version of LookAndFeel, which is called LookAndFeel_V4.

class Label	: public Component
{
	public:

	enum ColourIds
    {
        backgroundColourId             = 0x1000280, /**< The background colour to fill the label with. */
        textColourId                   = 0x1000281, /**< The colour for the text. */
        outlineColourId                = 0x1000282, /**< An optional colour to use to draw a border around the label.
                                                         Leave this transparent to not have an outline. */
        backgroundWhenEditingColourId  = 0x1000283, /**< The background colour when the label is being edited. */
        textWhenEditingColourId        = 0x1000284, /**< The colour for the text when the label is being edited. */
        outlineWhenEditingColourId     = 0x1000285  /**< An optional border colour when the label is being edited. */
    };

Every class derived from component class, has their own color ID depending on the specific component.

void LookAndFeel::setColour (int colourID, Colour newColour) noexcept
{
    const ColourSetting c = { colourID, newColour };
    auto index = colours.indexOf (c);

    if (index >= 0)
        colours.getReference (index).colour = newColour;
    else
        colours.add (c);
}


MyLookAndFeel::MyLookAndFeel()
{
    //Background
    setColour(juce::ResizableWindow::backgroundColourId, MyColors::Main::background);
    
    //GroupComponent
    setColour(juce::GroupComponent::textColourId, MyColors::Panel::title);
    setColour(juce::GroupComponent::outlineColourId, MyColors::Panel::outline);
    
    // Label
    setColour(juce::Label::textColourId, MyColors::RotaryKnob::label);
}

In LookAndFeel class there is a function that allows you to costomize the GUI based on the given component Id and color.

EulerDelayAudioProcessorEditor::
EulerDelayAudioProcessorEditor()
{
    addAndMakeVisible(mPanelControl);
    addAndMakeVisible(mPanelDelay);
    addAndMakeVisible(mPanelFeedback);
    addAndMakeVisible(mPanelOutput);
    
    setLookAndFeel(&mLookAndFeel);
}

EulerDelayAudioProcessorEditor::~EulerDelayAudioProcessorEditor()
{
    setLookAndFeel(nullptr);
}

To apply to the GUi, LookAndFeel object must be added to the plugin editor. Component class has setLookAndFeel() funtion, which accepts the LookAndFeel object and applies to the GUI. But there is a hirarchical structure in components, we have to add LookAndFeel object to the top-level component.

This is the GUI after apllying the colour set.