coderrrrr.site/css/theme.css

:root:has(input.theme-controller[value=darky]:checked),
[data-theme="darky"] {
    color-scheme: dark;
    --color-base-100: #000000;
    --color-base-200: #000000;
    --color-base-300: oklch(26% 0.007 34.298);
    --color-base-content: oklch(97% 0.001 106.424);
    --color-primary: oklch(68% 0.162 75.834);
    --color-primary-content: oklch(98% 0.026 102.212);
    --color-secondary: oklch(44% 0.011 73.639);
    --color-secondary-content: oklch(98% 0.001 106.423);
    --color-accent: oklch(59% 0.145 163.225);
    --color-accent-content: oklch(98% 0.018 155.826);
    --color-neutral: oklch(44% 0.011 73.639);
    --color-neutral-content: oklch(98% 0.001 106.423);
    --color-info: oklch(60% 0.126 221.723);
    --color-info-content: oklch(98% 0.019 200.873);
    --color-success: oklch(60% 0.118 184.704);
    --color-success-content: oklch(98% 0.014 180.72);
    --color-warning: oklch(66% 0.179 58.318);
    --color-warning-content: oklch(98% 0.022 95.277);
    --color-error: oklch(58% 0.253 17.585);
    --color-error-content: oklch(96% 0.015 12.422);
    --radius-selector: 0.5rem;
    --radius-field: 1rem;
    --radius-box: 1rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 2px;
    --depth: 1;
    --noise: 1;
}

:root:has(input.theme-controller[value=mocha]:checked),
[data-theme="mocha"] {
    color-scheme: dark;
    --radius-selector: 0.25rem;
    --radius-field: 0.5rem;
    --radius-box: 0.5rem;
    --size-field: 0.25rem;
    --size-selector: 0.25rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;
    --color-primary: #b4befe;
    --color-primary-content: #181825;
    --color-secondary: #313244;
    --color-secondary-content: #cdd6f4;
    --color-accent: #f5e0dc;
    --color-accent-content: #181825;
    --color-neutral: #7f849c;
    --color-neutral-content: #181825;
    --color-success: #a6e3a1;
    --color-success-content: #1e1e2e;
    --color-warning: #f9e2af;
    --color-warning-content: #1e1e2e;
    --color-error: #f38ba8;
    --color-error-content: #1e1e2e;
    --color-info: #89dceb;
    --color-info-content: #181825;
    --color-base-100: #1e1e2e;
    --color-base-200: #181825;
    --color-base-300: #11111b;
    --color-base-content: #cdd6f4
}

:root:has(input.theme-controller[value=nord]:checked),
[data-theme="nord"] {
    color-scheme: dark;
    --radius-selector: 0.25rem;
    --radius-field: 0.5rem;
    --radius-box: 0.5rem;
    --border: 1px;
    --color-primary: #88c0d0;
    --color-primary-content: #2e3440;
    --color-secondary: #81a1c1;
    --color-secondary-content: #2e3440;
    --color-accent: #b48ead;
    --color-accent-content: #2e3440;
    --color-neutral: #4c566a;
    --color-neutral-content: #eceff4;
    --color-success: #a3be8c;
    --color-success-content: #2e3440;
    --color-warning: #ebcb8b;
    --color-warning-content: #2e3440;
    --color-error: #bf616a;
    --color-error-content: #eceff4;
    --color-info: #8fbcbb;
    --color-info-content: #2e3440;
    --color-base-100: #2e3440;
    --color-base-200: #3b4252;
    --color-base-300: #434c5e;
    --color-base-content: #d8dee9;
}

:root:has(input.theme-controller[value=tokyonight]:checked),
[data-theme="tokyonight"] {
    color-scheme: dark;
    --radius-selector: 0.25rem;
    --radius-field: 0.5rem;
    --radius-box: 0.5rem;
    --border: 1px;
    --color-primary: #7aa2f7;
    --color-primary-content: #1a1b26;
    --color-secondary: #bb9af7;
    --color-secondary-content: #1a1b26;
    --color-accent: #f7768e;
    --color-accent-content: #1a1b26;
    --color-neutral: #414868;
    --color-neutral-content: #c0caf5;
    --color-success: #9ece6a;
    --color-success-content: #1a1b26;
    --color-warning: #e0af68;
    --color-warning-content: #1a1b26;
    --color-error: #db4b4b;
    --color-error-content: #1a1b26;
    --color-info: #0db9d7;
    --color-info-content: #1a1b26;
    --color-base-100: #1a1b26;
    --color-base-200: #16161e;
    --color-base-300: #24283b;
    --color-base-content: #c0caf5;
}

:root:has(input.theme-controller[value=rosepine]:checked),
[data-theme="rosepine"] {
    color-scheme: dark;
    --radius-selector: 0.5rem;
    --radius-field: 1rem;
    --radius-box: 1rem;
    --border: 1px;
    --color-primary: #31748f;
    --color-primary-content: #e0def4;
    --color-secondary: #9ccfd8;
    --color-secondary-content: #191724;
    --color-accent: #eb6f92;
    --color-accent-content: #191724;
    --color-neutral: #26233a;
    --color-neutral-content: #e0def4;
    --color-success: #31748f;
    --color-success-content: #e0def4;
    --color-warning: #f6c177;
    --color-warning-content: #191724;
    --color-error: #eb6f92;
    --color-error-content: #191724;
    --color-info: #c4a7e7;
    --color-info-content: #191724;
    --color-base-100: #191724;
    --color-base-200: #1f1d2e;
    --color-base-300: #26233a;
    --color-base-content: #e0def4;
}

:root:has(input.theme-controller[value=everforest]:checked),
[data-theme="everforest"] {
    color-scheme: dark;
    --radius-selector: 0.25rem;
    --radius-field: 0.5rem;
    --radius-box: 0.5rem;
    --border: 1px;
    --color-primary: #a7c080;
    --color-primary-content: #272e33;
    --color-secondary: #83c092;
    --color-secondary-content: #272e33;
    --color-accent: #e67e80;
    --color-accent-content: #272e33;
    --color-neutral: #343f44;
    --color-neutral-content: #d3c6aa;
    --color-success: #a7c080;
    --color-success-content: #272e33;
    --color-warning: #dbbc7f;
    --color-warning-content: #272e33;
    --color-error: #e67e80;
    --color-error-content: #272e33;
    --color-info: #7fbbb3;
    --color-info-content: #272e33;
    --color-base-100: #272e33;
    --color-base-200: #2b3339;
    --color-base-300: #323c41;
    --color-base-content: #d3c6aa;
}

body {
    position: relative;
    font-family: "Libre Baskerville", serif;
    line-height: 1.6;
    min-height: 100vh;
}

main {
    opacity: 0;
    animation: fade 0.6s forwards;
}

h1 {
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
    font-weight: 560;
    width: 80vw;
    max-width: 760px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Libre Baskerville Italic';

}

.theme-badge {
    background-image: url("../assets/not-by-ai-mocha.svg");
    transition: background-image 0.3s ease-in-out;
}

body:has(input.theme-controller[value="mocha"]:checked) .theme-badge,
[data-theme="mocha"] .theme-badge {
    background-image: url("../assets/not-by-ai-mocha.svg");
}

body:has(input.theme-controller[value="darky"]:checked) .theme-badge,
[data-theme="darky"] .theme-badge {
    background-image: url("../assets/not-by-ai-darky.svg");
}

body:has(input.theme-controller[value="nord"]:checked) .theme-badge,
[data-theme="nord"] .theme-badge {
    background-image: url("../assets/not-by-ai-nord.svg");
}

body:has(input.theme-controller[value="tokyonight"]:checked) .theme-badge,
[data-theme="tokyonight"] .theme-badge {
    background-image: url("../assets/not-by-ai-tokyonight.svg");
}

body:has(input.theme-controller[value="rosepine"]:checked) .theme-badge,
[data-theme="rosepine"] .theme-badge {
    background-image: url("../assets/not-by-ai-rosepine.svg");
}

body:has(input.theme-controller[value="everforest"]:checked) .theme-badge,
[data-theme="everforest"] .theme-badge {
    background-image: url("../assets/not-by-ai-everforest.svg");
}