Update IDE theming to use CSS variables

Description

As a follow up to !28407 (merged), let's migrate the SCSS approach of

.ide.theme-dark {
  $the-dark-color: #101010;  

  .lots
  .of
  .duplicated
  .selectors {
    background-color: $the-dark-color
  }
}

.ide {
  .lots
  .of
  .duplicated
  .selectors {
    background-color: #fafafa;
  }
}

in favor of CSS variables:

.ide {
  --ide-main-bg: transparent; // or white... or whatever...

  &.theme-dark {
    --ide-main-bg: #101010;
  }

  .only
  .place
  .selectors
  .show
  .up {
    background-color: var(--ide-main-bg);
  }
}

This way the selectors are not duplicated + we're guaranteed that they are properly configured with and without a theme and across various themes.

References

• !28407 (merged)
• https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties