Can't get appearance-based colors to work

TaskPaper
1

I’m trying to lighten link colors in dark mode a bit. Here’s my default stylesheet:

@appearance: $APPEARANCE;

@light-link-color: #00f;
@dark-link-color:  #f00;
@current-link-color: "@{appearance}-link-color";

item[data-done] {
    > run[content] {
        color:                    mix(@text-color, #000, 75%);
        text-strikethrough-color: mix(@text-color, #000, 75%);
    }
}

run[link] {
    color: green;
    color: @current-link-color;
}

Thing is, it doesn’t work right. If I comment out color: @current-link-color; I get green links, but for the life of me I can’t seem to get variables based on $APPEARANCE working right. If I leave it in, the link color changes from its default (a dark blue) to whatever color normal text is.

I use CSS and Sass plenty but Less almost never. Am I missing punctuation somewhere or something?

2

Sorry, but I don’t quite remember why that won’t work, but it appears not to. I haven’t dug into that code for a long time. I think maybe template based names such as @{appearance}-link-color will only work in the base file. Looking at other themes the support light/dark mode, the ones that I’ve found are always shipped as two different files.

3

You may take a look at this theme, which supports appearance switch.

1 Like
4

That did it. I forgot to add in a second @ at the point of use:

    color: @@current-link-color;

Thanks!

1 Like
5

Thanks from me too!