문서 보기역링크PDF로 내보내기맨 위로 이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요. # Dynamic CSS Variables - https://svelte.dev/repl/4b1c649bc75f44eb9142dadc0322eccd?version=3.6.7 <code> <script> let color = '#ff3e00'; function toggle(){ color = '#00FFFF'; } </script> <div style="--theme-color: {color}"> <p> the color is set using a CSS variable </p> <button on:click={toggle}> change </button> </div> <input type="color" bind:value={color} style="height: 50px;"> <style> p { color: var(--theme-color); } </style> </code> - https://svelte.dev/repl/8123d474edb04f198c3b83363716a709?version=3.40.3 <code> <script> let styles = { 'note-bg-color': '#f4ed2a', 'note-color': '#FF5555', 'bg': '#AAAAAA', }; $: cssVarStyles = Object.entries(styles) .map(([key, value]) => `--${key}:${value}`) .join(';'); // Or just this is fine too. // let noteBgColor = '#f4ed2a'; // let noteColor = '#FF5555'; // $: cssVarStyles = `--note-color:${noteColor};--note-bg-color:${noteBgColor}`; </script> <style> #top { background-color: var(--bg, lightgray); height: 100%; } .note { color: var(--note-color, tomato); background-color: var(--note-bg-color, lightgray); } .yellow-theme { --note-color: black; --note-bg-color: khaki; } .purple-note-text { --note-color: rebeccapurple; } </style> <div id="top" style="{cssVarStyles}"> <h1 class="note" style="font-weight:600">Some text!</h1> <p> But the variables we manually set below can still override the dynamic ones. </p> <div class="yellow-theme"> <p class="note">For that yellow notepad look.</p> <p class="note purple-note-text">Or with purple</p> </div> <label> <input style="padding:0" type="color" bind:value={styles['note-color']} /> Note Text Color </label> <label> <input style="padding:0" type="color" bind:value={styles['note-bg-color']} /> Note Background Color </label> <label> <input style="padding:0" type="color" bind:value={styles['bg']} /> Page Background Color </label> </div> </code> open/dynamic-css-variables.txt 마지막으로 수정됨: 2021/07/26 23:48저자 127.0.0.1