Создайте линии сетки, которые видны для любого цвета фона CSS

Question

Мне нужно написать класс CSS для линий сетки «холста» (элемента div). Пользователь может изменить цвет фона «холста», поэтому мне нужно, чтобы линии были видны для каждого цвета. На данный момент у меня есть следующий код CSS:

.grid.grid-linear {
  background-image: -webkit-linear-gradient(to right, rgba(78, 78, 78, .7) 2px, transparent 2px), -webkit-linear-gradient(to bottom, rgba(78, 78, 78, .7) 1px, transparent 2px);
  background-image: -moz-linear-gradient(to right, rgba(78, 78, 78, .7) 2px, transparent 2px), -moz-linear-gradient(to bottom, rgba(78, 78, 78, .7) 1px, transparent 2px);
  background-image: -ms-linear-gradient(to right, rgba(78, 78, 78, .7) 2px, transparent 2px), -ms-linear-gradient(to bottom, rgba(78, 78, 78, .7) 1px, transparent 2px);
  background-image: linear-gradient(to right, rgba(78, 78, 78, .7) 2px, transparent 2px), linear-gradient(to bottom, rgba(78, 78, 78, .7) 1px, transparent 2px);
}

Проблема в том, что когда пользователь выбирает цвет фона: rgb(78,78,78), строки больше не будут видны.

Как я могу создать линии сетки, используя просто CSS или Sass, чтобы соответствовать любому цвету фона, выбранному пользователем?

Примечание : пользователь динамически изменяет свойство цвета фона сетки (элемент div), поэтому, если бы мне пришлось реализовать некоторую логику в файле Sass, мне нужно было бы получить доступ к свойствам других элементов в ДОМ. Я не знаю, возможно ли сделать это в просто Sass.