Make schemes easy to create with qss stylesheets

[mixxxbot]

Reported by: ywwg
Date: 2014-12-13T17:05:27Z
Status: Confirmed
Importance: Wishlist
Launchpad Issue: lp1402236
Tags: skin, usability

---

Current mixxx schemes are a little primitive and more targeted at older-style skins. It would be nice to update it for the new skin paradigm.

• colors as variable names: It would be nice to define colors in the qss as @mycolor and then have mixxx do a search and replace on the color names with a scheme-defined set of colors.
• objectname-specific scheme filters -- have a filter only apply to object names that match a regex pattern

[mixxxbot]

Commented by: rryan
Date: 2014-12-13T17:26:47Z

---

see also bug #⁠1328008 and bug #⁠1396705

Color schemes will make a comeback! Probably in 2.1.

[mixxxbot]

Commented by: esbrandt
Date: 2016-04-11T08:24:40Z

---

Regardless of the return of the color scheme, i think a mini-sass is essential to make skin stylesheets easier to organize and maintain. They are grow to massive code sizes.

For a start, just as suggested in OP, it would be helpful to define some variables like

@mycolor = #FFFFFF
@myColor2 = #⁠112233
@H1 = 20px

and use them similar to

#ObjectName {
  font: @h1;
  text-align: left;
  color: @myColor2;
  background-color: @myColor;
  margin: 0.2em;
  border-top: none;
  border-bottom: 1px solid @myColor2;
}

Support for multiline expressions would be a nice-to-have.

[mixxxbot]

Commented by: esbrandt
Date: 2018-03-25T17:02:26Z

---

While the feature is not implemented as requested yet, there is some progress.
Since 2.1, you can make a color schema work only on specific regions, like

<Scheme>
  <Name>foo</Name>
  <Filters>
    <HSVTweak>
      <HConst>90</HConst>
      <SConst>-30</SConst>
      <VConst>-30</VConst>
    </HSVTweak>
    <Add>
      <Amount>-40</Amount>
    </Add>
  </Filters>
    <Style src="skin:foo.qss"/>
</Scheme>

or load specific stylesheets

<Schemes>
   <Scheme>
     <Name>Style1</Name>
     <Filters/>
     <Style src="skin:style1.qss"/>
   </Scheme>
   <Scheme>
     <Name>Style2</Name>
     <Filters/>
     <Style src="skin:style2.qss"/>
   </Scheme>
</Schemes>

#1501

[mixxxbot]

Commented by: ronso0
Date: 2019-04-05T12:37:27Z

---

I'd like to adopt part 1 of this bug: colors as variable names

where would I start?
I searched the mixxx code base as well as Qt5 sources for 'css' but I don't find the actual css parser.

[mixxxbot]

Commented by: ronso0
Date: 2019-04-05T12:54:39Z

---

the idea:

* declare @mycolor at the top of the style.css or in any <Scheme> node:
 @variables {
  bgcolor1: #ff8800;
  buttonfont: Arial; }
* use variables for css properties:
  border: 2px solid @bgcolor1;
* on skin load, replace var names with values
* variables in <Scheme> overwrite variable declarations in css

[mixxxbot]

Commented by: daschuer
Date: 2019-05-02T20:06:38Z

---

https://mixxx.zulipchat.com/#narrow/stream/109171-development/topic/color.20variables.20for.20css

[mixxxbot]

Commented by: ronso0
Date: 2019-07-03T14:20:53Z

---

related:
set variables with color scheme #1988