How to use selected color in Header bar

Hello,

I am very new to nopCommerce.  The project I am working on is using the 7Spikes Native Theme. One of the plug-ins we have written has a header bar. It is a solid color hard coded. I would like that header bar to pick up the color selected in the Native Theme under Nop-Templates -> Themes -> Native -> Settings -> Preset.

How can I get my code to use that selected color?

<div style="width:100%;height:30px;background-color:#f17e06"></div>

"I would like that header bar to pick up the color selected in the Native Theme"

To do that, you have to add your element's class name into the Color Presets selectors file.
The file for Native theme is here:

Plugins\SevenSpikes.Theme.Native\Styles\Less\preset.less

Pay attention that there are different sections in that file, some are for text color, others for background color, some for border-color. If you need to change background color only, then add your element only in the "background color" section.

Thank you for your response I will give this a try.

Hello,

On my local computer I installed the Native theme and then I updated the file:
C:\Repos\nopcommerce\src\Presentation\Nop.Web\Plugins\SevenSpikes.Theme.Native\Styles\Less\preset.less

I put my class name in the backgrounds section:

.myPluginHeaderBar {
    background-color: @color;
}

I am not seeing the color appear in my header bar.  Is this the correct location for me to make this change?  Do I need to compile the less file?

That's the correct file you are editing. Also your code seems correct.
The .less file is compiled by clicking the "Save" button in the theme administration (on the Native Settings page where the color presets are), you don't have to do anything else.
So if you didn't click the save button, do it now and see if the change will apply.