How to toggle between css stylesheets inside the kirby panel

The CMS Questions
1

Hello,

I am looking for a way to toggle between 2 css stylesheets depending on the checkbox selected

This is in order to give the client the option to change background and font color from the panel for each individual page

My code is not currently working, please forgive me as I am a beginner to Kirby. Any suggestions?

Code is referenced from here: Style switcher in panel - #3 by Kate

Inside the blueprint:

title: About
    
    background:
        label: Background
        type: checkbox
        text: Dark Background?

In the section:

<?php if($page->background()->bool()): ?>
    <?php echo css('/assets/css/dark.css') ?>
<?php else : ?>
    <?php echo css('/assets/css/light.css') ?>
<?php endif ?>
2

What exactly does not work?

3

Nothing is rendering in the ‘about’ panel

4

That’s because your about.yml blueprint is not complete. Please check out how to set up blueprints.

title: About

sections:
  fields:
    fields:
      background:
        label: Background
        type: checkbox
        text: Dark Background
5

I copied this exactly and now the panel just says “No fields yet”

6

Sorry, I forgot something, corrected above…

7

sorry I thought this would be a simple solution…

The panel displayed Error ‘Invalid field type (“checkbox”)’

8

Oh, your example is from Kirby 2, there is no checkbox field type in Kirby 3. Change it to toggle instead.

Here are all field types:

9

Perfect! Thank you