Как сделать светлую тему по дефолту во Vueform?

Question

[Soer44]

Такая проблема. Это vueform. Инпуты для ввода информации. Реагируют на системную тему и тему браузера. Не могу настроить так чтобы по дефолту была светлая тема.

Проект на vue + vite. Даже все стили в main.css и в base.css пофиксил но инпуты всё равно с тёмным фоном.
В панели разработчика видно что стили он забирает из

@media (prefers-color-scheme: dark)
<style>
:root, :before, :after, * {
    --vf-danger: #ef4444;
    --vf-danger-lighter: #fee2e2;
    --vf-success: #22c55e;
    --vf-success-lighter: #dcfce7;
    --vf-bg-input: var(--vf-dark-800);
}

Но я удалил все эти строки!!! Кэш чистил. В инкогнито открывал. Проект пересобирал.
На компе и в браузере стоит тёмная тема.

Comments

[Алексей Ярков]

На компе и в браузере стоит тёмная тема

Просчитался... Но где?

[Soer44]

Алексей Ярков, ))) Алексей, вопрос в этом и заключается) Как отключить во вьюформ определение темы и как поставить по дефолту светлую) Спасибо)

Answer 1

[Soer44]

Нашёл решение данного вопрос. Ответ как всегда скрывался в документации, причём я его несколько раз уже читал, и даже что то пробовал применить, но видимо этого оказалось не достаточно и ничего не работало.

Для решения данного вопроса, необходимо добавить в ГЛАВНЫЙ файл стилей ГЛОБАЛЬНЫЕ правила и стили из документации, а именно переменные которые привязаны только к vueform.

стили css выглядят так:

:root, :before, :after, * {
	--vf-primary: #07bf9b;
	--vf-primary-darker: #06ac8b;
	--vf-danger: #ef4444;
	--vf-danger-lighter: #fee2e2;
	--vf-success: #10b981;
	--vf-success-lighter: #d1fae5;
  
	--vf-gray-50: #f9fafb;
	--vf-gray-100: #f3f4f6;
	--vf-gray-200: #e5e7eb;
	--vf-gray-300: #d1d5db;
	--vf-gray-400: #9ca3af;
	--vf-gray-500: #6b7280;
	--vf-gray-600: #4b5563;
	--vf-gray-700: #374151;
	--vf-gray-800: #1f2937;
	--vf-gray-900: #111827;
  
	--vf-dark-50: #f9fafb;
	--vf-dark-100: #f3f4f6;
	--vf-dark-200: #e5e7eb;
	--vf-dark-300: #d1d5db;
	--vf-dark-400: #9ca3af;
	--vf-dark-500: #6b7280;
	--vf-dark-600: #4b5563;
	--vf-dark-700: #374151;
	--vf-dark-800: #1f2937;
	--vf-dark-900: #111827;
  
	--vf-ring-color: #07bf9b66;
	--vf-ring-width: 2px;
} 
// и так далее, взял все переменные из документации, чтобы не париться, 
// потому что их там почти 400 строчек кода.

ссылка на документацию https://vueform.com/themes/tailwind#customization

Answer 2

[Дмитрий Перевозкин]

Доброго времени суток, ознакомьтесь, https://developer.mozilla.org/en-US/docs/Web/CSS/@...
Разберетесь как настроить думаю, потому что реализовано как раз таки на основе этого

Comments

[Soer44]

Добрый день. В статье описаны общие принципы общей темы всего сайта. Мой вопрос касательно темы библиотеки vueform. Сложности именно с ней. В документации есть пункт об кастомизации, но даже добавление переменных в main.css и base.css результата не дали. Проблема в том что приложение чекает какая тема в браузере и подставляет переменные во вьюформ. Видимо они где то глубже... Для стилей использую tailwind