Home/ Questions/Q 8465877
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T15:10:42+00:00

I have different styles for my theme (different color schemes). First I load the

  • 0

I have different styles for my theme (different color schemes).

First I load the default css and secondly a css stylesheet with particular colors, etc depending on what color scheme I want to use.

Testing the speed of my site, I have noticed a delay because I need to load two style-sheets.

Is there a way to put all styles inside one file and not use two different ones? Also this has to be cross browser.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    For the color overrides you could nest them within an id selector, and give that id to the body element in order to choose a color scheme. This will allow you to store many themes in one file.

    For example

    /* defaults */
h1 { color : black; }

/* light theme */
#light h1 { color : grey; } 

/* neon theme */
#neon h1 { color : pink; }

    Then set the body class, as

    <body id="neon">

    If you are using LESS you can easily wrap the top-level style around your entire colour scheme to keep the layout neater. e.g.

    #light {
    h1 { color : grey; } 
    p { color : silver; }
}
    • 0