Size: a a a

2021 February 17

EI

Eugene Ilyin in Svelte [svelt]
То есть есть root или body, а так как CSS Var наследуются ниже по дереву, то можно их менять динамически только у общего предка путем
document.body.style.setProperty('--primary-color', 'red');
источник

AP

Alexander Ponomarev in Svelte [svelt]
это на сср не заработает
источник

DK

Dan Kozlov in Svelte [svelt]
Eugene Ilyin
То есть есть root или body, а так как CSS Var наследуются ниже по дереву, то можно их менять динамически только у общего предка путем
document.body.style.setProperty('--primary-color', 'red');
только вместо document.body должна быть нода предка
источник

AP

Alexander Ponomarev in Svelte [svelt]
у вас нет документа или дом ноды
источник

EI

Eugene Ilyin in Svelte [svelt]
Dan Kozlov
Стили у вас уже вытащены. Вы ж их никуда не деваете особо.

Вам осталось сделать так, чтобы не было сперва рендеринга дефолтной темы, а потом уже юзерской. Тут всё зависит от того, где вы храните её. Если на беке, то надо что-то придумывать на уровне SSR. Если на клиенте, то можно в шаблон прямо скрипт-тег зафигачить, который цвета поставит. Тогда флэша не будет.
На бэке, всё норм, там я смогу порендерить с правильными значениями
источник

AP

Alexander Ponomarev in Svelte [svelt]
если писать через style="--color: {color}" на сср заработает из коробки, потому что это просто сериализуется в строчку
источник

AP

Alexander Ponomarev in Svelte [svelt]
что за понифилл я хз, он скорее всего не нужен
источник

AP

Alexander Ponomarev in Svelte [svelt]
достаточно вместе с  каждым использованием кастом проперти писать дефолт значение, а постцсс плагином дописать те же свойства без переменных автоматически
источник

AP

Alexander Ponomarev in Svelte [svelt]
смена цветов на таких браузерах не будет работать, но будет хотябы дефолтная палитра
источник

AP

Alexander Ponomarev in Svelte [svelt]
имхо это лучше чем тащить любой рантайм для поддержки цсс пропертей, потому что нормально и производительно их не поддержать
источник

DK

Dan Kozlov in Svelte [svelt]
Alexander Ponomarev
что за понифилл я хз, он скорее всего не нужен
Он даёт поддержку переменных для бади.
Тащить его надо только если очень хорошо понимаешь, что у тебя большой чанк юзеров на браузерах без нативной поддержки, потому что иначе это дичь.
источник

EI

Eugene Ilyin in Svelte [svelt]
Итак, если я вас обоих правильно понял. получается такое решение:
https://svelte.dev/repl/7c8a6f2f0dff4f82a998bbff608c890a?version=3
источник

AP

Alexander Ponomarev in Svelte [svelt]
Dan Kozlov
Он даёт поддержку переменных для бади.
Тащить его надо только если очень хорошо понимаешь, что у тебя большой чанк юзеров на браузерах без нативной поддержки, потому что иначе это дичь.
имхо тогда проще эмоушен втащить, он же агностик ему все равно реакт, свелт или еще что-то
источник

МТ

Марк Танащук... in Svelte [svelt]
Eugene Ilyin
Итак, если я вас обоих правильно понял. получается такое решение:
https://svelte.dev/repl/7c8a6f2f0dff4f82a998bbff608c890a?version=3
Для одного свойства - да

Для темы - нет
источник

AP

Alexander Ponomarev in Svelte [svelt]
Eugene Ilyin
Итак, если я вас обоих правильно понял. получается такое решение:
https://svelte.dev/repl/7c8a6f2f0dff4f82a998bbff608c890a?version=3
поняли правильно, но на сср поддерживать запаритесь =)
источник

AP

Alexander Ponomarev in Svelte [svelt]
<script>
 import Component from './Component.svelte'
 let toggle = false
 const handleClick = () => {
   toggle = !toggle;
 }
</script>

<style>
 :global(.primary)  {
   color: var(--primary-color);
 }
</style>

<div id="theme-wrapper" style="--primary-color: {toggle ? 'red' : 'green'}">
 <Component/>
 <button on:click={handleClick}>Toggle theme prop</button>
</div>

А так сразу заработает из коробки
источник

DK

Dan Kozlov in Svelte [svelt]
Eugene Ilyin
Итак, если я вас обоих правильно понял. получается такое решение:
https://svelte.dev/repl/7c8a6f2f0dff4f82a998bbff608c890a?version=3
Да, для темы всё будет больнее. Вам же там надо будет контрастные цвета считать и всё такое.
Но в целом да.

Если храните переменные не на беке, а на клиенте, то можно избежать ада с SSR, в принципе.
источник

EI

Eugene Ilyin in Svelte [svelt]
Alexander Ponomarev
имхо тогда проще эмоушен втащить, он же агностик ему все равно реакт, свелт или еще что-то
Emotion не умеет в SSR без реакта
источник

EI

Eugene Ilyin in Svelte [svelt]
Alexander Ponomarev
поняли правильно, но на сср поддерживать запаритесь =)
Почему?
источник

EI

Eugene Ilyin in Svelte [svelt]
Марк Танащук
Для одного свойства - да

Для темы - нет
Как же нет? Вот пример для темы, а не для одно свойства
https://svelte.dev/repl/7c8a6f2f0dff4f82a998bbff608c890a?version=3
источник