Using conditional statements for specific themes in Style.less


#1

Currently I switch between the default one-light and one-dark themes. But in both of these I dont like the default text color. So in my style.less, I have the following personalization -

atom-text-editor {
    color: hsl(-- for light theme--); //comment this when using dark-theme
    color: hsl(-- for dark theme--); //comment this when using light-theme
}

So, whenever I switch between the themes, I comment the corresponding line.

As you can see, this is tiresome. So, I want to try if condition logic and make my life simpler. But I am novice in programming and in less language too. Saw that less language supports conditional through when command. But have no clue how to proceed. So, can anyone help me with this?

The logic I have in mind is the following

atom-text-editor {
  when ( --if the theme is one-light){
    color: hsl(-- for light theme--); 
  }
  when ( --if the theme is one-dark){
    color: hsl(-- for dark theme--); 
  }
}

So, not sure how to retrieve the theme name in style.less and use the condition in the when command.

And if there is a better way to implement theme-specific sytle, please suggest.

Thanks :slight_smile:


#2

Themes should add their own specific class to atom-workspace when activated. You can then use the existence of the class to guard your theme styles. For example, something like the following should work:

atom-workspace {
  &.theme-fizzy {
    /* Styles only when Fizzy is activated */
  }

  &.theme-one-light-syntax {
    /* etc */
  }
}

#3

Nice! So, using your suggestion the code looks like this

atom-workspace {
    &.theme-one-light-syntax {
        atom-text-editor {
            color: hsl(0, 0%, 0%);
        }
    }

    &.theme-one-dark-syntax {
        atom-text-editor {
            color: hsl(360, 100%, 100%);
        }
    }
}

Neat. Thanks for the suggestion.

One clarification - the above code seems to work even without the atom-workspace {} outerblock. That is,


    theme-one-light-syntax {
        atom-text-editor {
            color: hsl(0, 0%, 0%);
        }
    }

    theme-one-dark-syntax {
        atom-text-editor {
            color: hsl(360, 100%, 100%);
        }
    }

So, is that block required?


#4

No, but the .s are. The selector atom-workspace.theme-one-dark-syntax specifically targets elements named atom-workspace that have the appropriate class, but since the .theme- classes only appear on atom-workspace (as far as I know), it’s implicit when you use one of them. In @Wliu’s example, it’s mostly there for readability.


#5

Thanks for pointing out. Let me meddle with it further to get hang of it…