introduce a way to make styles block conditionals

[russo97]

would be great if we could make the style blocks conditionals as the example below.

<template>
  <section class="sec">
    <div class="sec__inner">
      I'm the content
    </div>

    <button @click="toggleTheme">
      change theme
    </button>
  </section>
</template>

<script lang="ts" setup>
const isDarkTheme = ref<boolean>(true);

function toggleTheme (isDarkMode?: boolean) {
  isDarkTheme.value = isDarkMode ?? !isDarkTheme.value;
}
</script>

<style v-if="isDarkTheme" lang="scss">
.sec {
  background-color: white;

  &__inner {
    color: black;
  }
}
</style>

<style v-else lang="scss">
.sec {
  background-color: black;

  &__inner {
    color: white;
  }
}
</style>

Is that possible? Is a bad idea?

[posva]

This does look like reinventing CSS, particularly prefers-color-scheme

[russo97]

Applying theme change was just one example. Imagine two or more complete layouts, but with the same elements and HTML markup.. would be nice to be able to switch between styles based on a state or prop that the component had

[posva]

That sounds like dynamically setting a class which is also possible. If you think this could be useful, I suggest you follow the RFC process. I should help you explain possible cases that aren't already possible. I will let you open a new discussion following the process if you want.

[darrylnoakes]

Why not use dynamic classes/attributes?

Bind classes based on the state, and add those to your selectors.
Better yet, use data attributes, such as :data-is-dark-theme="isDarkTheme" + .sec[data-is-dark-theme] or :data-is-dark-theme="isDarkTheme ? 'true' : 'false'" + .sec[data-is-dark-theme="true"]

[russo97]

Sometimes dynamic attributes end up fouling the code, making it harder to read in my opinion