Импорт переменных в js

Подскажите. Есть файл settings.js в нем задаются значения цвета элемента.

var buttonColor = "Red";
export {buttonColor};

Есть файл main.js он подключается в html. Через него я меняю цвет элемента, заданный в сеттинге.

import {buttonColor} from './settings.js';

var submitButton = document.getElementById('submit-button');
function changeButtonColor(button) {
  button.style.backgroundColor = settings.buttonColor;
}
changeButtonColor(submitButton);

Но такой импорт не работает. Наверно, потому что он не видит файл settings.js, т.к. я его не подключаю в html. Как можно сделать, чтобы значения, задаваемые в настройках можно было использовать в файле main.js? Смысл в том, чтобы в настройках были только параметры, а сама реализация была в другом файле. Я новичок, поэтому прошу помощи.