You can customize the look and feel of your Mosaic site by creating cusotm CSS files. Here is a step-by-step guide to help you create your own CSS theme.

To get started, create a folder named "css" in the "src" folder of your Mosaic project.

Inside the "css" folder, create a folder named "global". This is where you will add your custom styles.

Create an "index.css" file inside the "css" folder. This file will import your custom styles.

Inside your global folder, create a separate CSS file for each part of your site that you want to customize. For instance, if you want to change the text styling, create a "text.css" file inside the "global" folder. Here is an example of how your "text.css" file could look like:

You can add as many CSS files as you need, depending on how much you want to customize your site.

Create an "index.css" file inside the "global" folder. This file will import your custom styles, in this example we are importing our "text.css" file.

Your "css" folder should now look like this:

To apply your custom styles to your Mosaic site, open your "_app.tsx" file and add the following line to the bottom of your imports:

Congratulations! You have successfully applied your custom CSS styles to your site. This example demonstrated how to create text styles, but you can use the same approach to customize other aspects of your site as well.