Themes

How to create a theme

Firstly follow the guide for setting up Omnipetal for Developers here

Then open ./src/index.css and locate the section that contains the themes

Example:

[data-theme="default"] {
    --color-background: 55, 65, 81;
    --color-panel: 31, 41, 55;
    --color-darker: 17, 24, 39;
    --color-textPrimary: 255, 255, 255;
    --color-textSecondary: 209, 213, 219;
    --color-textTertiary: 107, 114, 128;
    --color-textHint: 156, 163, 175;
    --color-shadowPrimary: 99, 102, 241;
    --color-shadowSuccess: 71, 214, 102;
    --color-shadowError: 214, 71, 71;
    --color-borderPrimary: 59, 130, 246;
    --color-borderGray: 75, 85, 99;
    --color-borderSuccess: 21, 128, 61;
    --color-borderError: 185, 28, 28;
    --color-backgroundPrimary: 59, 130, 246;
    --color-backgroundSuccess: 34, 197, 94;
    --color-backgroundError: 239, 68, 68;
}

Then copy our default theme (Not the above one as changes may be made), edit the name near the top and edit the RGB values to change the colors

Color Guide:

---

Adding the theme to settings

After adding the theme then go over to ./src/settings.html and locate the theme select

Whole div:

    <div class="bg-panel w-96 rounded-lg text-middle m-4 mt-0 px-5 pb-3 pt-0">
            <form>
                <h1 class="text-textPrimary m-3 mt-5 text-lg">Theme</h1>
                <div class="grid grid-cols-1 gap-4 m-5 mb-0">
                    <div class="mb-3 ">
                        <label class="block mb-2 text-sm font-medium text-textSecondary ">Theme</label>
                        <select id="theme" class="transition-all drop-shadow-xl text-center bg-background border border-borderGray text-textPrimary text-sm rounded-lg block w-full p-2.5 focus:ring-borderPrimary focus:border-borderPrimary ">
                            <option value="default">Default</option>
                            <option value="light">Light</option>
                            <option value="midnight">Midnight</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>

Select:

    <select id="theme" class="transition-all drop-shadow-xl text-center bg-background border border-borderGray text-textPrimary text-sm rounded-lg block w-full p-2.5 focus:ring-borderPrimary focus:border-borderPrimary ">
                            <option value="default">Default</option>
                            <option value="light">Light</option>
                            <option value="midnight">Midnight</option>
                        </select>

Then in this select add a new option with a name and the value set as the data-theme name you set earlier in ./src/index.css then test by running npm run dev and checking out your new theme!

Then to add the theme to our next release, make a pull request with the title as Theme:[theme name] and we will test it and be added to our next release!