Menu ▾ ▴

#28 Attempt at color themes fails

v6.x
closed
None
5
2018-05-14
2018-04-11
No

Hi Zoltan,

I'm attempting to implement color themes by definition of named colors and use of those named colors in (a large number of) named styles. Eventually, a usedesign themeX should set the definitive color value of the named color, and the named styles would use the named colors from that theme.

What I'm trying to avoid is having to continuously maintain (sync) the whole set of styles in both theme designs, so I'm inheriting these theme designs from a design that contains the core styles. My idea is failing, because the value of the named color at the time of definition of the core styles applies and sticks, and the eventual color definition is ignored. Do you see a solution?

I prepared a sample with only one style, but in reality there are about 100+ named styles I've defined in which I'd like to use color themes.

Kind regards,
Martijn

# This design defines many re-usable custom styles that I want to maintain centrally here
defdesign core {
  # Definition of accent1 color is necessary to avoid compilation errors
  defcolor accent1="#ff0000";
  # Just a single style as an example
  defstyle accent1fill [fill.color=accent1];
}

# This design only redefines named colors for theme 1
defdesign theme1 {
  usedesign core;
  defcolor accent1="#00ff00";
}

# This design only redefines named colors for theme 2
defdesign theme2 {
  usedesign core;
  defcolor accent1="#0000ff";
}

usedesign theme1;

# Was expecting that both boxes have the same fill color
box: Always Red [accent1fill];
box: Theme1 Color [fill.color=accent1];

usedesign theme2;

# Was expecting that both boxes have the same fill color
box: Always Red [accent1fill];
box: Theme2 Color [fill.color=accent1];

Discussion

  • Zoltán Turányi

    • status: open --> closed
     
  • Zoltán Turányi

    Hi Martin,
    I see your problem. This "sticks" is a quite deep architectural thing that is very hard to change.
    You can try to define a procedure that contains the style definitions you put into "core". Specify one parameter for the name of the design you create and use the color names you want. (Even if these are not defined at the time you declare the procedure.)
    Then set the color names to the respective values and invoke the procedure. This will create a design with the current values of the color names.

    I know it is cumbersome and I have not tried to do it, but I hope it works.

    Z

     
  • Martijn Schiedon

    Hi Zoltan,

    These are good outside-the-box suggestions, thanks! Unfortunately, I'm running into the error 'Cannot define designs inside a procedure' with the following code.

    defproc themecore($name) {
      defdesign $name {
        defstyle accent1fill [fill.color=accent1];
      };
    }
    
    defcolor accent1="#00ff00";
    replay themecore("theme1");
    
    defcolor accent1="#0000ff";
    replay themecore("theme2");
    
    use col;
    
    usedesign theme1;
    
    # Was expecting that both boxes are green
    box: Theme1 Accent1 Fill Style [accent1fill];
    box: Theme1 Accent1 Fill Color [fill.color=accent1];
    
    usedesign theme2;
    
    # Was expecting that both boxes are blue
    box: Theme2 Accent1 Fill Style [accent1fill];
    box: Theme2 Accent1 Fill Color [fill.color=accent1];
    

    Also, in an attempt to try a variation of your suggestions, and replay the core styles inside a defdesign, I encounter the syntax error '' when using replay there.

    defproc themecore {
      defstyle accent1fill [fill.color=accent1];
    }
    
    defdesign theme1 {
      defcolor accent1="#00ff00";
      replay themecore;
    }
    
    defdesign theme2 {
      defcolor accent1="#0000ff";
      replay themecore;
    }
    
    use col;
    
    usedesign theme1;
    
    # Was expecting that both boxes are green
    box: Theme1 Accent1 Fill Style [accent1fill];
    box: Theme1 Accent1 Fill Color [fill.color=accent1];
    
    usedesign theme2;
    
    # Was expecting that both boxes are blue
    box: Theme2 Accent1 Fill Style [accent1fill];
    box: Theme2 Accent1 Fill Color [fill.color=accent1];
    

    Perhaps there's a relatively easy fix? I'll be patient anyhow ;)

    Kind regards,
    Martijn