Moonlight/Moonlight.Client/UI/Views/Admin/Sys/Theme.razor

@page "/admin/system/theme"

@using Microsoft.AspNetCore.Authorization
@using Moonlight.Client.UI.Components
@using Moonlight.Shared.Misc

@attribute [Authorize(Policy = "permissions:admin.system.theme")]

<NavTabs Index="1" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks"/>

<div class="mt-5 grid grid-cols-3 gap-3">
    <div class="col-span-1 flex flex-col gap-3">
        <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
            <ColorSelector @bind-Value="ThemeData.ColorBackground"/>
            <span class="ms-1">Background</span>
        </div>

        <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
            <ColorSelector @bind-Value="ThemeData.ColorBaseContent"/>
            <span class="ms-1">Base Content</span>
        </div>

        <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
            <ColorSelector @bind-Value="ThemeData.ColorBase100"/>
            <span class="ms-1">Base 100</span>
        </div>

        <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
            <ColorSelector @bind-Value="ThemeData.ColorBase150"/>
            <span class="ms-1">Base 150</span>
        </div>

        <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
            <ColorSelector @bind-Value="ThemeData.ColorBase200"/>
            <span class="ms-1">Base 200</span>
        </div>

        <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
            <ColorSelector @bind-Value="ThemeData.ColorBase250"/>
            <span class="ms-1">Base 250</span>
        </div>

        <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
            <ColorSelector @bind-Value="ThemeData.ColorBase300"/>
            <span class="ms-1">Base 300</span>
        </div>
    </div>

    <div class="col-span-2 grid grid-cols-2 gap-3">
        <div class="col-span-1 flex flex-col gap-y-3">
            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector @bind-Value="ThemeData.ColorPrimary"/>
                <span class="ms-1">Primary</span>
            </div>

            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorPrimaryContent"/>
                <span class="ms-1">Primary Content</span>
            </div>
        </div>

        <div class="col-span-1 flex flex-col gap-y-3">
            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector @bind-Value="ThemeData.ColorSecondary"/>
                <span class="ms-1">Secondary</span>
            </div>

            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorSecondaryContent"/>
                <span class="ms-1">Secondary Content</span>
            </div>
        </div>

        <div class="col-span-1 flex flex-col gap-y-3">
            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector @bind-Value="ThemeData.ColorAccent"/>
                <span class="ms-1">Accent</span>
            </div>

            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorAccentContent"/>
                <span class="ms-1">Accent Content</span>
            </div>
        </div>

        <div class="col-span-1 flex flex-col gap-y-3">
            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector @bind-Value="ThemeData.ColorInfo"/>
                <span class="ms-1">Info</span>
            </div>

            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorInfoContent"/>
                <span class="ms-1">Info Content</span>
            </div>
        </div>

        <div class="col-span-1 flex flex-col gap-y-3">
            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector @bind-Value="ThemeData.ColorSuccess"/>
                <span class="ms-1">Success</span>
            </div>

            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorSuccessContent"/>
                <span class="ms-1">Success Content</span>
            </div>
        </div>

        <div class="col-span-1 flex flex-col gap-y-3">
            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector @bind-Value="ThemeData.ColorWarning"/>
                <span class="ms-1">Warning</span>
            </div>

            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorWarningContent"/>
                <span class="ms-1">Warning Content</span>
            </div>
        </div>

        <div class="col-span-1 flex flex-col gap-y-3">
            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector @bind-Value="ThemeData.ColorError"/>
                <span class="ms-1">Error</span>
            </div>

            <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorErrorContent"/>
                <span class="ms-1">Error Content</span>
            </div>
        </div>
    </div>
</div>



@code
{
    private ApplicationTheme ThemeData;

    protected override void OnInitialized()
    {
        ThemeData = CreateDefault();
    }

    private ApplicationTheme CreateDefault()
    {
        return new ApplicationTheme()
        {
            ColorBackground = "#0c0f18",

            ColorBase100 = "#1e2b47",
            ColorBase150 = "#1a2640",
            ColorBase200 = "#101a2e",
            ColorBase250 = "#0f1729",
            ColorBase300 = "#0c1221",

            ColorBaseContent = "#dde5f5",

            ColorPrimary = "#4f39f6",
            ColorPrimaryContent = "#dde5f5",

            ColorSecondary = "#354052",
            ColorSecondaryContent = "#dde5f5",

            ColorAccent = "#ad46ff",
            ColorAccentContent = "#dde5f5",

            ColorNeutral = "#dde5f5",
            ColorNeutralContent = "#09090b",

            ColorInfo = "#155dfc",
            ColorInfoContent = "#dde5f5",

            ColorSuccess = "#00a63e",
            ColorSuccessContent = "#dde5f5",

            ColorWarning = "#ffba00",
            ColorWarningContent = "#dde5f5",

            ColorError = "#ec003f",
            ColorErrorContent = "#dde5f5",

            RadiusSelector = 0.25f,
            RadiusField = 0.5f,
            RadiusBox = 0.5f,

            SizeSelector = 0.25f,
            SizeField = 0.25f,

            Border = 1f,
            Depth = 0f,
            Noise = 0f
        };
    }
}