@Soer44

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

Такая проблема. Это vueform. Инпуты для ввода информации. Реагируют на системную тему и тему браузера. Не могу настроить так чтобы по дефолту была светлая тема.
66213df63a64e813916589.png
Проект на 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);
}


Но я удалил все эти строки!!! Кэш чистил. В инкогнито открывал. Проект пересобирал.
На компе и в браузере стоит тёмная тема.
  • Вопрос задан
  • 66 просмотров
Решения вопроса 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
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Доброго времени суток, ознакомьтесь, https://developer.mozilla.org/en-US/docs/Web/CSS/@...
Разберетесь как настроить думаю, потому что реализовано как раз таки на основе этого
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы