with variable modificar con color change cambiar css postcss css-modules react-css-modules react-boilerplate

modificar - Actualizar las variables del módulo CSS desde Javascript



css variables color (3)

¿Es esto lo que estás buscando?

// get the inputs const inputs = [].slice.call(document.querySelectorAll(''.controls input'')); // listen for changes inputs.forEach(input => input.addEventListener(''change'', handleUpdate)); inputs.forEach(input => input.addEventListener(''mousemove'', handleUpdate)); function handleUpdate(e) { // append ''px'' to the end of spacing and blur variables const suffix = (this.id === ''base'' ? '''' : ''px''); document.documentElement.style.setProperty(`--${this.id}`, this.value + suffix); }

:root { --base: #ffc600; --spacing: 10px; --blur: 10px; } body { text-align: center; } img { padding: var(--spacing); background: var(--base); -webkit-filter: blur(var(--blur)); /* 👴 */ filter: blur(var(--blur)); } .hl { color: var(--base); } /* misc styles, nothing to do with CSS variables */ body { background: #193549; color: white; font-family: ''helvetica neue'', sans-serif; font-weight: 100; font-size: 50px; } .controls { margin-bottom: 50px; } a { color: var(--base); text-decoration: none; } input { width:100px; }

<h2>Update CSS Variables with <span class=''hl''>JS</span></h2> <div class="controls"> <label>Spacing:</label> <input type="range" id="spacing" min="10" max="200" value="10"> <label>Blur:</label> <input type="range" id="blur" min="0" max="25" value="10"> <label>Base Color</label> <input type="color" id="base" value="#ffc600"> </div> <img src="http://unsplash.it/800/500?image=899"> <p class="love">😘</p> <p class="love">Chrome 49+, Firefox 31+</p>

Estoy usando una versión (ahora más antigua) de react-boilerplate que venía con los módulos CSS. Lo bueno de ellos es que puedes crear variables e importarlas en otros archivos CSS.

Aquí está mi archivo colors.css

:root { /* Status colors */ --error: #842A2B; --success: #657C59; --pending: #666; --warning: #7E6939; }

Cuando estoy importando ese archivo, solo tengo que usar en la parte superior de mi archivo .css:

@import ''components/App/colors.css'';

Estoy buscando tener la opción de dos temas para mi sitio web y me gustaría poder actualizar dinámicamente esas variables con Javascript. ¿Cuál es la mejor manera de hacer esto?

Edit: Esperaba que hubiera una forma de actualizar el archivo colors.css y no tener que realizar importaciones condicionales en todos los componentes que se extraen de dos posibles archivos css ... Avíseme si hay una forma de hacerlo y si existe. Voy a cambiar la respuesta aceptada. ¡Gracias a todos los que respondieron!


Solo usaría las vars de color predeterminadas en el elemento / body / lo que sea, luego pondría los colores de tema alternativos en otra clase y alternaría la clase de tema a través de JS. Aquí hay una demo.

$("button").on("click", function() { $("body").toggleClass("foo"); });

body { --red: red; --blue: blue; --yellow: yellow; background: #ccc; text-align: center; font-size: 5em; } .foo { --red: #ce1126; --blue: #68bfe5; --yellow: #ffd100; } .red { color: var(--red); } .blue { color: var(--blue); } .yellow { color: var(--yellow); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="red">RED</span> <span class="blue">BLUE</span> <span class="yellow">YELLOW</span> <br> <button>click me</button>


Tendría 2 hojas y cambiaría condicionalmente entre las dos:

colours.scss

:root { /* Status colors */ --error: #842A2B; --success: #657C59; --pending: #666; --warning: #7E6939; }

otrosColores.scss

:root { /* Status colors */ --error: #FF0000; --success: #00FF00; --pending: #6666FF; --warning: #FF00FF; }

Luego, en su código de reacción, impórtelos y utilícelos como desee:

import styles from ''colours.scss''; import alternativeStyles from ''otherColours.scss''; ... {this.props.useNormalStyle ? styles.myClass : alternativeStyles.myClass}