How do I load multiple themes (.css files)?

Community Usage questions
1

Hello all!

I've gotten really into using .css style sheets to separate, categorize, and streamline my session interfaces. I'm curious, though, if there would be a way for me to break up my styles/themes into multiple .css files, kinda like how some web developers do it. For example, I would love to have a separate .css file/theme for, let's say, buttons, faders, panels, etc... One large file can easily get really big, and difficult to navigate.

The documentation says that "Multiple themes can be combined." What does this mean? I might be misinterpreting it.

I've tried loading two separate files into the "theme" field on the launcher page, but it only takes one of them. I've then tried editing the text field to include two, but I can't seem to get the syntax right. It also sometimes tells me that it can't find the file, which tells me I'm not directing to it properly.

Thanks so much!

2

hi,

i guess @import css rule will help

i will try see you

3

So

3 css files :

  • main.css,
  • colors.css,
  • 2.css

main.css

@import url(colors.css);
@import url(2.css)

colors.css

:root {
    --orange: #ed8514 ;
    --olive: olive;
    --blue: #354247;
    
    --dark: #333;
    --light: #eee;
    
     --color-background: var(--dark);
}

2.css

.myButton {

    color : var(--light);
    background-color: var(--blue);
    border: 2px solid var(--orange) ;
    font-size: 20rem;   
}

.otherRule
{
   transform: rotate(180deg); 

}

the 3 files are in the same folder

image

In the window server launcher :slight_smile:

main.css (46 Bytes)
colors.css (174 Bytes)
2.css (189 Bytes)
testCss.json (2.1 KB)

open the testCss.json session file

image

image

2 important points :

  • the main.css is loaded only at the start of the server. If you modify your css files, you have to relaunch the server to see the modifications
  • you can hit the F12 function key to edit your css file temporary, make new rules and apply them

image
image1166×641 60.3 KB

Hope it helps !

4

I've tried loading two separate files into the "theme" field on the launcher page, but it only takes one of them. I've then tried editing the text field to include two, but I can't seem to get the syntax right.

Multiple theme files can be specified in the server's theme options, separated by spaces. Make sure to wrap the path in quotes if it contains whitespaces:

path/to/a.css "path/to/my file.css"

i guess @import css rule will help

It works too. Note that these rule must be located before any other rules in the file (and only in the first file in the theme option).

the main.css is loaded only at the start of the server. If you modify your css files, you have to relaunch the server to see the modifications

No. All files specified in the theme option are reloaded automatically upon modification. In some cases some colors affecting specific widgets may not be applied directly though. @imported files are not reloaded automatically unless the file that imports them is reloaded.

5

so at the launch of the server in my example, Right ?

6

In your example, main.css will be reloaded if it's modified and it will reload the files it imports in the process.

1 Like
7

Both of you are fantastic! Thank you so much for the tips. This is really exciting for me!

All the best to you.