From ff1d2e082d9a116f1f3c7a3420c27812715ca669 Mon Sep 17 00:00:00 2001
From: JoanFo1456 <161775222+JoanFo1456@users.noreply.github.com>
Date: Tue, 23 Dec 2025 22:35:21 +0000
Subject: [PATCH] Add theme

---
 starrynight/config/starrynight.php            |   4 +
 starrynight/css/starry-night-light.css        | 226 ++++++++++++
 starrynight/css/starry-night.css              | 338 ++++++++++++++++++
 starrynight/plugin.json                       |  23 ++
 .../Providers/StarryNightPluginProvider.php   |  46 +++
 starrynight/src/StarryNightPlugin.php         | 318 ++++++++++++++++
 6 files changed, 955 insertions(+)
 create mode 100644 starrynight/config/starrynight.php
 create mode 100644 starrynight/css/starry-night-light.css
 create mode 100644 starrynight/css/starry-night.css
 create mode 100644 starrynight/plugin.json
 create mode 100644 starrynight/src/Providers/StarryNightPluginProvider.php
 create mode 100644 starrynight/src/StarryNightPlugin.php

diff --git a/starrynight/config/starrynight.php b/starrynight/config/starrynight.php
new file mode 100644
index 0000000..b625128
--- /dev/null
+++ b/starrynight/config/starrynight.php
@@ -0,0 +1,4 @@
+<?php
+
+return [
+];
diff --git a/starrynight/css/starry-night-light.css b/starrynight/css/starry-night-light.css
new file mode 100644
index 0000000..29148e7
--- /dev/null
+++ b/starrynight/css/starry-night-light.css
@@ -0,0 +1,226 @@
+:root {
+    --sn-star-color: #b86b1a;
+    --sn-star-trail-color: rgba(184,107,26,0.95);
+    --sn-star-glow: rgba(184,107,26,0.12);
+    --sn-meteor-color: #b86b1a;
+    --sn-meteor-inner: rgba(255,244,220,1);
+    --sn-meteor-mid: rgba(255,224,140,0.9);
+}
+
+
+body {
+    background: linear-gradient(135deg, #efe6ff 0%, #e6d1ff 45%, #ead6ff 100%) !important;
+    color: #1a1a2e;
+}
+
+html, body, #app, .fi-main, .fi-page, .fi-panel {
+    background-attachment: fixed !important;
+}
+
+.fi-modal,
+.fi-ta-content,
+.fi-ta-ctn,
+.fi-ta-table,
+.fi-ta-header,
+.fi-ta-header-cell,
+.fi-ta-header-row,
+.fi-ta-body,
+.fi-ta-body .fi-ta-cell,
+.fi-ta-body .fi-ta-row,
+.fi-ta-body-row,
+.fi-topbar{
+    background: transparent !important;
+    background-color: transparent !important;
+}
+
+.fi-ta-ctn-header,
+.fi-sc-tabs{
+    background: transparent !important;
+    background-color: transparent !important;
+}
+
+thead,
+thead th,
+thead tr,
+tbody,
+tbody td,
+tbody tr {
+    background: transparent !important;
+    background-color: transparent !important;
+}
+
+.fi-section:not([class*="dropdown"]):not([class*="menu"]),
+.fi-card:not([class*="dropdown"]):not([class*="menu"]),
+.fi-widget:not([class*="dropdown"]):not([class*="menu"]),
+.fi-panel:not([class*="dropdown"]):not([class*="menu"]),
+[class*="fi-section"]:not([class*="dropdown"]):not([class*="menu"]),
+[class*="fi-card"]:not([class*="dropdown"]):not([class*="menu"]),
+[class*="fi-widget"]:not([class*="dropdown"]):not([class*="menu"]) {
+    background: transparent !important;
+    background-color: transparent !important;
+    box-shadow: none !important;
+    backdrop-filter: none !important;
+}
+
+.fi-main {
+    position: relative;
+    z-index: 10;
+}
+
+.stars,
+.starrynight-meteors {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+}
+.static-star {
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    background: var(--sn-star-color) !important;
+    border-radius: 50% !important;
+    width: 3px;
+    height: 3px;
+    opacity: 0.95 !important;
+    box-shadow: 0 0 10px var(--sn-star-glow, rgba(184,107,26,0.6)) !important, 0 0 24px rgba(0,0,0,0.06) !important;
+    z-index: 70 !important;
+    pointer-events: none;
+    transition: opacity 0.45s ease, transform 0.45s ease;
+}
+
+.flickering-star {
+    position: absolute;
+    width: 3px;
+    height: 3px;
+    background: var(--sn-star-color) !important;
+    border-radius: 50% !important;
+    z-index: 80 !important;
+    pointer-events: none;
+    animation: light-flicker 2s infinite ease-in-out;
+    box-shadow: 0 0 14px var(--sn-star-glow, rgba(184,107,26,0.9)) !important, 0 0 36px rgba(0,0,0,0.08) !important;
+}
+
+@keyframes light-flicker {
+    0% { transform: scale(1); opacity: 0.6; filter: brightness(1); }
+    30% { transform: scale(1.4); opacity: 1; filter: brightness(1.8); }
+    60% { transform: scale(0.9); opacity: 0.65; filter: brightness(0.95); }
+    100% { transform: scale(1); opacity: 0.9; filter: brightness(1); }
+}
+
+.meteor-star {
+    position: fixed;
+    width: 6px;
+    height: 6px;
+    border-radius: 50% !important;
+    z-index: 90 !important;
+    pointer-events: none;
+    width: 7px;
+    height: 7px;
+    background: radial-gradient(circle at 30% 30%, var(--sn-meteor-inner, rgba(255,244,220,1)) 0%, var(--sn-meteor-mid, rgba(255,224,140,0.9)) 30%, var(--sn-meteor-color) 60%) !important;
+    box-shadow: 0 0 30px 14px rgba(184,107,26,0.9) !important, 0 0 56px 28px rgba(184,107,26,0.25) !important;
+    opacity: 0;
+}
+
+.meteor-star::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 110px;
+    height: 3px;
+    background: linear-gradient(90deg, var(--sn-star-trail-color, rgba(184,107,26,1)) 0%, rgba(184,107,26,0.85) 30%, rgba(184,107,26,0.3) 70%, rgba(184,107,26,0) 100%) !important;
+    opacity: 1 !important;
+    transform: translate(6px, -1px) rotate(-20deg);
+    transform-origin: left center;
+    pointer-events: none;
+    filter: drop-shadow(0 0 8px rgba(184,107,26,0.6));
+}
+
+
+.meteor-star.rainbow::after {
+    background: linear-gradient(90deg, #ffd54f, #ffe082, #ffd54f, rgba(255,214,79,0));
+}
+
+.meteor-star.colored {
+    background: linear-gradient(135deg, var(--sn-meteor-color), var(--sn-meteor-mid), var(--sn-meteor-inner));
+    box-shadow: 0 0 18px 6px rgba(184,107,26,0.4), 0 0 36px 12px rgba(184,107,26,0.12);
+}
+
+@keyframes meteor-arc {
+    0% {
+        opacity: 0;
+        transform: translate(var(--start-x, 100vw), var(--start-y, 0vh)) scale(1) rotate(-10deg);
+    }
+    5% { opacity: 1; }
+    80% { opacity: 1; transform: translate(var(--mid-x, 60vw), var(--mid-y, 60vh)) scale(1.2) rotate(-20deg); }
+    100% { opacity: 0; transform: translate(var(--end-x, -10vw), var(--end-y, 110vh)) scale(0.8) rotate(-30deg); }
+}
+
+.meteor-star:nth-child(1) { animation-duration: 4s; animation-delay: 0s; }
+.meteor-star:nth-child(2) { animation-duration: 6s; animation-delay: 2s; }
+.meteor-star:nth-child(3) { animation-duration: 3s; animation-delay: 5s; }
+.meteor-star:nth-child(4) { animation-duration: 5s; animation-delay: 1s; }
+.meteor-star:nth-child(5) { animation-duration: 7s; animation-delay: 3s; }
+.meteor-star:nth-child(6) { animation-duration: 4s; animation-delay: 6s; }
+.meteor-star:nth-child(7) { animation-duration: 8s; animation-delay: 0.5s; }
+.meteor-star:nth-child(8) { animation-duration: 3.5s; animation-delay: 4s; }
+.meteor-star:nth-child(9) { animation-duration: 5.5s; animation-delay: 7s; }
+.meteor-star:nth-child(10) { animation-duration: 6.5s; animation-delay: 2.5s; }
+
+@keyframes meteor-alt1 {
+    0% { opacity: 0; transform: translateX(20vw) translateY(-20vh) rotate(0deg); }
+    8% { opacity: 1; }
+    92% { opacity: 1; }
+    100% { opacity: 0; transform: translateX(-100vw) translateY(100vh) rotate(-15deg); }
+}
+
+@keyframes meteor-alt2 {
+    0% { opacity: 0; transform: translateX(-10vw) translateY(-10vh) rotate(0deg); }
+    10% { opacity: 1; }
+    90% { opacity: 1; }
+    100% { opacity: 0; transform: translateX(-110vw) translateY(110vh) rotate(-25deg); }
+}
+
+.meteor-star:nth-child(3n) { animation-name: meteor-alt1; }
+.meteor-star:nth-child(5n) { animation-name: meteor-alt2; }
+
+@keyframes twinkle {
+    0%, 100% { opacity: 0.3; transform: scale(1); }
+    50% { opacity: 1; transform: scale(1.2); }
+}
+
+@keyframes meteor {
+    0% {
+        opacity: 0;
+        box-shadow: 0 0 18px 6px rgba(255,213,79,0.45), 0 0 36px 12px rgba(255,203,64,0.18);
+        transform: translate(0, 0) rotate(-20deg);
+    }
+    5% {
+        opacity: 1;
+    }
+    80% {
+        opacity: 1;
+        box-shadow: 0 0 10px 4px rgba(255,213,79,0.35), 0 0 20px 8px rgba(255,203,64,0.12);
+    }
+    100% {
+        opacity: 0;
+        box-shadow: 0 0 0 0 rgba(255,213,79,0), 0 0 0 0 rgba(255,203,64,0);
+        transform: translate(
+            calc(var(--meteor-end-left, -120vw) - 110vw),
+            calc(var(--meteor-end-top, 120vh) + 10vh)
+        ) rotate(-20deg);
+    }
+}
+
+@keyframes meteor-dust {
+    0% { opacity: 1; transform: scale(1); }
+    80% { opacity: 0.7; transform: scale(0.7) rotate(-10deg); }
+    100% { opacity: 0; transform: scale(0.3) rotate(-30deg); }
+}
+.meteor-star.dusting { animation-name: meteor-dust !important; animation-fill-mode: forwards; pointer-events: none; }
+.meteor-star.dusting::after { opacity: 0 !important; width: 0 !important; transition: opacity 0.7s, width 0.7s; }
+
diff --git a/starrynight/css/starry-night.css b/starrynight/css/starry-night.css
new file mode 100644
index 0000000..9fe5081
--- /dev/null
+++ b/starrynight/css/starry-night.css
@@ -0,0 +1,338 @@
+/* StarryNight color variables (dark theme defaults) */
+:root {
+    --sn-star-color: #ffffff;
+    --sn-star-trail-color: rgba(255,255,255,0.9);
+    --sn-star-glow: rgba(255,255,255,0.1);
+    --sn-meteor-color: #ffffff;
+}
+
+
+body {
+    background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);
+    color: #ffffff;
+}
+
+.stars {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.star {
+    position: absolute;
+    background: white;
+    border-radius: 50%;
+    animation: twinkle 3s infinite;
+}
+
+.star:nth-child(odd) {
+    animation-delay: 1s;
+}
+
+.star:nth-child(even) {
+    animation-delay: 2s;
+}
+
+.meteor {
+    position: absolute;
+    top: 50%;
+    left: -100px;
+    width: 2px;
+    height: 2px;
+    background: linear-gradient(45deg, #ffffff, #87ceeb);
+    border-radius: 50%;
+    animation: meteor 2s linear infinite;
+    z-index: 2;
+}
+
+.content {
+    position: relative;
+    z-index: 10;
+}
+
+.static-star {
+    position: fixed;
+    background: #ffffff;
+    border-radius: 50%;
+    opacity: 0.9;
+    box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
+    z-index: 1;
+    pointer-events: none;
+}
+
+.flickering-star {
+    position: fixed;
+    background: #ffffff;
+    border-radius: 50%;
+    z-index: 2;
+    pointer-events: none;
+    animation: white-to-gray-flicker ease-in-out infinite;
+}
+
+.meteor-star {
+    position: fixed;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    z-index: 3;
+    pointer-events: none;
+    box-shadow: 0 0 16px 6px var(--meteor-color, #fff), 0 0 32px 12px var(--meteor-color, #fff);
+    opacity: 0;
+}
+
+.meteor-star.rainbow::after {
+    background: linear-gradient(90deg, 
+        #ff00cc, #3333ff, #00ffcc, #ffff00, #ff6600, #ff00cc, transparent);
+}
+
+.meteor-star.colored {
+    background: linear-gradient(135deg, #ff00cc, #00ffcc, #3333ff, #ffff00, #ff6600);
+    box-shadow: 0 0 16px 4px #fff, 0 0 32px 8px #ff00cc;
+}
+
+@keyframes meteor-arc {
+    0% {
+        opacity: 0;
+        transform: translate(var(--start-x, 100vw), var(--start-y, 0vh)) scale(1) rotate(-10deg);
+    }
+    5% {
+        opacity: 1;
+    }
+    80% {
+        opacity: 1;
+        transform: translate(var(--mid-x, 60vw), var(--mid-y, 60vh)) scale(1.2) rotate(-20deg);
+    }
+    100% {
+        opacity: 0;
+        transform: translate(var(--end-x, -10vw), var(--end-y, 110vh)) scale(0.8) rotate(-30deg);
+    }
+}
+
+.meteor-star:nth-child(1) { animation-duration: 4s; animation-delay: 0s; }
+.meteor-star:nth-child(2) { animation-duration: 6s; animation-delay: 2s; }
+.meteor-star:nth-child(3) { animation-duration: 3s; animation-delay: 5s; }
+.meteor-star:nth-child(4) { animation-duration: 5s; animation-delay: 1s; }
+.meteor-star:nth-child(5) { animation-duration: 7s; animation-delay: 3s; }
+.meteor-star:nth-child(6) { animation-duration: 4s; animation-delay: 6s; }
+.meteor-star:nth-child(7) { animation-duration: 8s; animation-delay: 0.5s; }
+.meteor-star:nth-child(8) { animation-duration: 3.5s; animation-delay: 4s; }
+.meteor-star:nth-child(9) { animation-duration: 5.5s; animation-delay: 7s; }
+.meteor-star:nth-child(10) { animation-duration: 6.5s; animation-delay: 2.5s; }
+
+.meteor-star::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 70px;
+    height: 2px;
+    background: linear-gradient(90deg, var(--meteor-color, #fff) 10%, rgba(255,255,255,0.0) 100%);
+    opacity: 0.7;
+    transform: translate(3px, -1px) rotate(-20deg);
+    transform-origin: left center;
+    pointer-events: none;
+}
+.fi-modal,
+.fi-ta-content,
+.fi-ta-ctn,
+.fi-ta-table,
+.fi-ta-header,
+.fi-ta-header-cell,
+.fi-ta-header-row,
+.fi-ta-body,
+.fi-ta-body .fi-ta-cell,
+.fi-ta-body .fi-ta-row,
+.fi-ta-body-row,
+.fi-topbar{
+    background: transparent !important;
+    background-color: transparent !important;
+}
+.fi-ta-content.fi-ta-content-grid.fi-grid.md\:fi-grid-cols {
+    background: transparent !important;
+    background-color: transparent !important;
+    box-shadow: none !important;
+    backdrop-filter: none !important;
+}
+.fi-ta-ctn-header,
+.fi-sc-tabs{
+    background: transparent !important;
+    background-color: transparent !important;
+}
+thead,
+thead th,
+thead tr,
+tbody,
+tbody td,
+tbody tr {
+    background: transparent !important;
+    background-color: transparent !important;
+}
+
+.fi-section:not([class*="dropdown"]):not([class*="menu"]),
+.fi-card:not([class*="dropdown"]):not([class*="menu"]),
+.fi-widget:not([class*="dropdown"]):not([class*="menu"]),
+.fi-panel:not([class*="dropdown"]):not([class*="menu"]),
+[class*="fi-section"]:not([class*="dropdown"]):not([class*="menu"]),
+[class*="fi-card"]:not([class*="dropdown"]):not([class*="menu"]),
+[class*="fi-widget"]:not([class*="dropdown"]):not([class*="menu"]) {
+    background: transparent !important;
+    background-color: transparent !important;
+    box-shadow: none !important;
+    backdrop-filter: none !important;
+}
+
+.fi-resource-page:not([class*="dropdown"]):not([class*="menu"]),
+.fi-page:not([class*="dropdown"]):not([class*="menu"]),
+[class*="fi-resource"]:not([class*="dropdown"]):not([class*="menu"]),
+[class*="fi-page"]:not([class*="dropdown"]):not([class*="menu"]) {
+    background: transparent !important;
+    background-color: transparent !important;
+}
+
+.fi-main {
+    position: relative;
+    z-index: 10;
+}
+
+.fi-ta-filters .fi-dropdown-panel,
+.fi-ta-filter .fi-dropdown-panel,
+[class*="fi-ta-filter"] .fi-dropdown-panel,
+.fi-filters .fi-dropdown-panel,
+.fi-ta-header-actions .fi-dropdown-panel {
+    background: transparent !important;
+    backdrop-filter: blur(5px) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 0.375rem !important;
+
+}
+
+.dark.bg-gray-900,
+.dark .bg-gray-900,
+.dark\:bg-gray-900:is(.dark *),
+:is(.dark *) .dark\:bg-gray-900,
+:is(.dark *) .bg-gray-900 {
+    background: transparent !important;
+    background-color: transparent !important;
+}
+
+.dark.bg-gray-800,
+.dark .bg-gray-800,
+.dark\:bg-gray-800:is(.dark *),
+:is(.dark *) .dark\:bg-gray-800,
+:is(.dark *) .bg-gray-800 {
+    background: transparent !important;
+    background-color: transparent !important;
+}
+
+@keyframes twinkle {
+    0%, 100% { opacity: 0.3; transform: scale(1); }
+    50% { opacity: 1; transform: scale(1.2); }
+}
+
+@keyframes meteor {
+    0% {
+        opacity: 0;
+        box-shadow: 0 0 16px 6px var(--meteor-color, #fff), 0 0 32px 12px var(--meteor-color, #fff);
+        transform: translate(0, 0) rotate(-20deg);
+    }
+    5% {
+        opacity: 1;
+        box-shadow: 0 0 16px 6px var(--meteor-color, #fff), 0 0 32px 12px var(--meteor-color, #fff);
+    }
+    80% {
+        opacity: 1;
+        box-shadow: 0 0 8px 3px var(--meteor-color, #fff), 0 0 16px 6px var(--meteor-color, #fff);
+    }
+    100% {
+        opacity: 0;
+        box-shadow: 0 0 0 0 var(--meteor-color, #fff), 0 0 0 0 var(--meteor-color, #fff);
+        transform: translate(
+            calc(var(--meteor-end-left, -120vw) - 110vw),
+            calc(var(--meteor-end-top, 120vh) + 10vh)
+        ) rotate(-20deg);
+    }
+}
+
+@keyframes meteor-alt1 {
+    0% {
+        opacity: 0;
+        transform: translateX(20vw) translateY(-20vh) rotate(0deg);
+    }
+    8% {
+        opacity: 1;
+    }
+    92% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+        transform: translateX(-100vw) translateY(100vh) rotate(-15deg);
+    }
+}
+
+@keyframes meteor-alt2 {
+    0% {
+        opacity: 0;
+        transform: translateX(-10vw) translateY(-10vh) rotate(0deg);
+    }
+    10% {
+        opacity: 1;
+    }
+    90% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+        transform: translateX(-110vw) translateY(110vh) rotate(-25deg);
+    }
+}
+
+.meteor-star:nth-child(3n) { animation-name: meteor-alt1; }
+.meteor-star:nth-child(5n) { animation-name: meteor-alt2; }
+
+@keyframes white-to-gray-flicker {
+    0% {
+        background: #ffffff;
+        opacity: 1;
+        box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
+    }
+    50% {
+        background: #888888;
+        opacity: 0.4;
+        box-shadow: 0 0 3px rgba(136, 136, 136, 0.4);
+    }
+    100% {
+        background: #ffffff;
+        opacity: 1;
+        box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
+    }
+}
+
+@keyframes meteor-dust {
+    0% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    80% {
+        opacity: 0.7;
+        transform: scale(0.7) rotate(-10deg);
+    }
+    100% {
+        opacity: 0;
+        transform: scale(0.3) rotate(-30deg);
+    }
+}
+.meteor-star.dusting {
+    animation-name: meteor-dust !important;
+    animation-fill-mode: forwards;
+    pointer-events: none;
+}
+.meteor-star.dusting::after {
+    opacity: 0 !important;
+    width: 0 !important;
+    transition: opacity 0.7s, width 0.7s;
+}
diff --git a/starrynight/plugin.json b/starrynight/plugin.json
new file mode 100644
index 0000000..46ace1e
--- /dev/null
+++ b/starrynight/plugin.json
@@ -0,0 +1,23 @@
+{
+    "id": "starrynight",
+    "name": "StarryNight",
+    "author": "JoanFo",
+    "version": "1.0.0",
+    "description": "Who doesn't like the night, with flickering stars?",
+    "category": "theme",
+    "url": "https://github.com/JoanFo1456/pelican-plugins",
+    "update_url": "",
+    "namespace": "JoanFo\\StarryNight",
+    "class": "StarryNightPlugin",
+    "panels": [
+        "admin",
+        "server",
+        "app"
+    ],
+    "panel_version": null,
+    "composer_packages": null,
+    "meta": {
+        "status": "not_installed",
+        "status_message": null
+    }
+}
diff --git a/starrynight/src/Providers/StarryNightPluginProvider.php b/starrynight/src/Providers/StarryNightPluginProvider.php
new file mode 100644
index 0000000..5ed6784
--- /dev/null
+++ b/starrynight/src/Providers/StarryNightPluginProvider.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace JoanFo\StarryNight\Providers;
+
+use Illuminate\Support\Facades\File;
+use Illuminate\Support\ServiceProvider;
+
+class StarryNightPluginProvider extends ServiceProvider
+{
+    public function register(): void
+    {
+        $this->ensureCssPublished();
+    }
+
+    public function boot(): void
+    {
+        $sourceDark = __DIR__.'/../../css/starry-night.css';
+        $destDark = public_path('plugins/starrynight/css/starry-night.css');
+
+        $sourceLight = __DIR__.'/../../css/starry-night-light.css';
+        $destLight = public_path('plugins/starrynight/css/starry-night-light.css');
+
+        $this->publishes([
+            $sourceDark => $destDark,
+            $sourceLight => $destLight,
+        ], 'starrynight-assets');
+    }
+
+    private function ensureCssPublished(): void
+    {
+        $pairs = [
+            [__DIR__.'/../../css/starry-night.css', public_path('plugins/starrynight/css/starry-night.css')],
+            [__DIR__.'/../../css/starry-night-light.css', public_path('plugins/starrynight/css/starry-night-light.css')],
+        ];
+
+        foreach ($pairs as [$source, $destination]) {
+            if (! File::exists($destination) && File::exists($source)) {
+                $dir = dirname($destination);
+                if (! File::isDirectory($dir)) {
+                    File::makeDirectory($dir, 0755, true);
+                }
+                File::copy($source, $destination);
+            }
+        }
+    }
+}
diff --git a/starrynight/src/StarryNightPlugin.php b/starrynight/src/StarryNightPlugin.php
new file mode 100644
index 0000000..7279ae5
--- /dev/null
+++ b/starrynight/src/StarryNightPlugin.php
@@ -0,0 +1,318 @@
+<?php
+
+namespace JoanFo\StarryNight;
+
+use Filament\Contracts\Plugin;
+use Filament\Panel;
+use Filament\Support\Colors\Color;
+use Illuminate\Support\Facades\File;
+
+class StarryNightPlugin implements Plugin
+{
+    public function getId(): string
+    {
+        return 'starrynight';
+    }
+
+    public function register(Panel $panel): void
+    {
+        $pairs = [
+            [__DIR__.'/../../css/starry-night.css', public_path('plugins/starrynight/css/starry-night.css')],
+            [__DIR__.'/../../css/starry-night-light.css', public_path('plugins/starrynight/css/starry-night-light.css')],
+        ];
+
+        foreach ($pairs as [$source, $destination]) {
+            try {
+                if (! File::exists($destination) && File::exists($source)) {
+                    $dir = dirname($destination);
+                    if (! File::isDirectory($dir)) {
+                        File::makeDirectory($dir, 0755, true);
+                    }
+                    File::copy($source, $destination);
+                }
+            } catch (\Throwable $e) {
+
+            }
+        }
+
+        $panel->colors([
+            'danger' => Color::Rose,
+            'gray' => Color::Slate,
+            'info' => Color::Pink,
+            'primary' => Color::Purple,
+            'success' => Color::Emerald,
+            'warning' => Color::Amber,
+        ]);
+
+        $panel->renderHook('panels::head.end', function () {
+            $dark = asset('plugins/starrynight/css/starry-night.css');
+            $light = asset('plugins/starrynight/css/starry-night-light.css');
+
+            return <<<HTML
+<link id="starrynight-css" rel="stylesheet">
+<script>
+(function () {
+    var dark = "{$dark}";
+    var light = "{$light}";
+
+    function detectThemeDetail() {
+        if (document.documentElement && document.documentElement.classList.contains && document.documentElement.classList.contains('dark')) {
+            return { useDark: true, source: 'html.class' };
+        }
+
+        var htmlTheme = document.documentElement && document.documentElement.getAttribute && document.documentElement.getAttribute('data-theme');
+        if (htmlTheme) {
+            var v = ('' + htmlTheme).toLowerCase();
+            return { useDark: v === 'dark', source: 'html.data-theme', details: htmlTheme };
+        }
+
+        try {
+            var keys = ['filament_theme', 'theme', 'filamentTheme'];
+            for (var i = 0; i < keys.length; i++) {
+                var k = keys[i];
+                var val = localStorage.getItem(k);
+                if (val) {
+                    var lv = ('' + val).toLowerCase();
+                    if (lv === 'dark' || lv === 'light') return { useDark: lv === 'dark', source: 'localStorage.' + k, details: val };
+                }
+            }
+
+            var cap = Math.min(localStorage.length || 0, 50);
+            for (var j = 0; j < cap; j++) {
+                var key = localStorage.key(j);
+                if (!key) continue;
+                if (!/filament|theme/i.test(key)) continue;
+                var v2 = localStorage.getItem(key);
+                if (v2) {
+                    var vl = ('' + v2).toLowerCase();
+                    if (vl === 'dark' || vl === 'light') return { useDark: vl === 'dark', source: 'localStorage.' + key, details: v2 };
+                }
+            }
+        } catch (e) {
+        }
+
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) return { useDark: true, source: 'prefers-color-scheme' };
+
+        return { useDark: false, source: 'default' };
+    }
+
+    function apply() {
+        var info = detectThemeDetail();
+
+        if (!info) {
+            return info;
+        }
+
+        var useDark = !!info.useDark;
+        var el = document.getElementById('starrynight-css');
+        if (!el) {
+            el = document.createElement('link');
+            el.rel = 'stylesheet';
+            el.id = 'starrynight-css';
+            document.head.appendChild(el);
+        }
+        var target = useDark ? dark : light;
+        if (el.getAttribute('href') !== target) el.setAttribute('href', target);
+        try {
+            var starColor = useDark ? '#ffffff' : '#b86b1a';
+            var starTrail = useDark ? 'rgba(255,255,255,0.9)' : 'rgba(184,107,26,0.95)';
+            var starGlow = useDark ? 'rgba(255,255,255,0.1)' : 'rgba(184,107,26,0.12)';
+            var meteorColor = useDark ? '#ffffff' : '#b86b1a';
+            document.documentElement.style.setProperty('--sn-star-color', starColor);
+            document.documentElement.style.setProperty('--sn-star-trail-color', starTrail);
+            document.documentElement.style.setProperty('--sn-star-glow', starGlow);
+            document.documentElement.style.setProperty('--sn-meteor-color', meteorColor);
+        } catch (e) {}
+        return info;
+    }
+
+    try {
+        var obs = new MutationObserver(apply);
+        if (document.documentElement) obs.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme'] });
+        if (document.body) obs.observe(document.body, { attributes: true, attributeFilter: ['class', 'data-theme'] });
+    } catch (e) {}
+
+    window.addEventListener('storage', function (e) { if (e && e.key === 'filament_theme') apply(); });
+    window.addEventListener('theme-changed', apply);
+    if (window.matchMedia) {
+        try { window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', apply); } catch (e) { try { window.matchMedia('(prefers-color-scheme: dark)').addListener(apply); } catch (e) {} }
+    }
+
+    try { apply(); } catch (e) {}
+})();
+</script>
+HTML;
+        });
+
+        $panel->renderHook('panels::body.start', function () {
+              $meteorHtml = '<section class="starrynight-meteors">
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+            </section>';
+                $meteorCss = <<<'CSS'
+            <style>
+            .starrynight-meteors { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 2; overflow: hidden; }
+            .starrynight-meteors span { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; background: var(--sn-meteor-color, #fff); border-radius: 50%; box-shadow: 0 0 0 4px var(--sn-star-glow, rgba(255,255,255,0.1)),0 0 0 8px var(--sn-star-glow, rgba(255,255,255,0.1)),0 0 20px var(--sn-star-glow, rgba(255,255,255,0.1)); animation: animate 3s linear infinite; }
+            .starrynight-meteors span::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 300px; height: 1px; background: linear-gradient(90deg,var(--sn-star-trail-color, #fff),transparent); }
+            @keyframes animate { 0% { transform: rotate(315deg) translateX(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: rotate(315deg) translateX(-1000px); opacity: 0; } }
+            .starrynight-meteors span:nth-child(1) { top: 0; right: 0; left: initial; animation-delay: 0s; animation-duration: 1s; }
+            .starrynight-meteors span:nth-child(2) { top: 0; right: 80px; left: initial; animation-delay: 0.2s; animation-duration: 3s; }
+            .starrynight-meteors span:nth-child(3) { top: 80px; right: 0px; left: initial; animation-delay: 0.4s; animation-duration: 2s; }
+            .starrynight-meteors span:nth-child(4) { top: 0; right: 180px; left: initial; animation-delay: 0.6s; animation-duration: 1.5s; }
+            .starrynight-meteors span:nth-child(5) { top: 0; right: 400px; left: initial; animation-delay: 0.8s; animation-duration: 2.5s; }
+            .starrynight-meteors span:nth-child(6) { top: 0; right: 600px; left: initial; animation-delay: 1s; animation-duration: 3s; }
+            .starrynight-meteors span:nth-child(7) { top: 300px; right: 0px; left: initial; animation-delay: 1.2s; animation-duration: 1.75s; }
+            .starrynight-meteors span:nth-child(8) { top: 0px; right: 700px; left: initial; animation-delay: 1.4s; animation-duration: 1.25s; }
+            .starrynight-meteors span:nth-child(9) { top: 0px; right: 1000px; left: initial; animation-delay: 0.75s; animation-duration: 2.25s; }
+            .starrynight-meteors span:nth-child(10) { top: 0px; right: 450px; left: initial; animation-delay: 2.75s; animation-duration: 2.75s; }
+            </style>
+            CSS;
+            $starDiv = '<div id="starrynight-stars" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3;"></div>';
+            $starStyle = <<<'CSS'
+<style>
+.static-star, .flickering-star {
+    transition: opacity 1.2s cubic-bezier(0.4,0,0.2,1), filter 1.2s cubic-bezier(0.4,0,0.2,1);
+    background: var(--sn-star-color, #fff);
+}
+.static-star {
+    opacity: 0.8;
+    filter: brightness(1);
+}
+.flickering-star {
+    opacity: 1;
+    filter: brightness(1.7) drop-shadow(0 0 6px var(--sn-star-color, #fff));
+}
+</style>
+CSS;
+            $starJs = <<<'JS'
+<script>
+(function () {
+    const totalStars = 400;
+    const flickerCount = 80;
+
+    function createContainerIfMissing() {
+        let container = document.getElementById('starrynight-stars');
+        if (!container) {
+            container = document.createElement('div');
+            container.id = 'starrynight-stars';
+            container.style.position = 'fixed';
+            container.style.top = '0';
+            container.style.left = '0';
+            container.style.width = '100%';
+            container.style.height = '100%';
+            container.style.pointerEvents = 'none';
+            container.style.zIndex = '3';
+            document.body.appendChild(container);
+        }
+        return container;
+    }
+
+    function initStars() {
+        const container = createContainerIfMissing();
+
+        if (container.dataset.ctInitialized === '1') return;
+
+        container.innerHTML = '';
+
+        const stars = [];
+        const starPositions = [];
+        function isFarEnough(top, left, minDist) {
+            for (const pos of starPositions) {
+                const dx = left - pos.left;
+                const dy = top - pos.top;
+                if (Math.sqrt(dx*dx + dy*dy) < minDist) return false;
+            }
+            return true;
+        }
+        let attempts = 0;
+        for (let i = 0; i < totalStars; i++) {
+            let top, left, size;
+            do {
+                top = 5 + Math.random() * 90;
+                left = 5 + Math.random() * 90;
+                size = 1 + Math.random() * 2;
+                attempts++;
+            } while (!isFarEnough(top, left, 2.5) && attempts < 1000);
+            starPositions.push({top, left});
+            const star = document.createElement('div');
+            star.style.position = 'absolute';
+            star.style.top = top + '%';
+            star.style.left = left + '%';
+            star.style.width = size + 'px';
+            star.style.height = size + 'px';
+            star.className = 'static-star';
+            container.appendChild(star);
+            stars.push(star);
+        }
+
+        function updateFlickeringStars() {
+            if (!stars.length) return;
+            stars.forEach(star => {
+                star.classList.remove('flickering-star');
+                star.classList.add('static-star');
+            });
+            const flickerIndices = new Set();
+            while (flickerIndices.size < flickerCount) {
+                flickerIndices.add(Math.floor(Math.random() * totalStars));
+            }
+            flickerIndices.forEach(idx => {
+                const star = stars[idx];
+                if (!star) return;
+                star.classList.remove('static-star');
+                star.classList.add('flickering-star');
+                star.style.animationDelay = (Math.random() * 2).toFixed(1) + 's';
+                star.style.animationDuration = (1.5 + Math.random() * 2).toFixed(1) + 's';
+            });
+        }
+
+        if (window.__starrynight_stars_interval) {
+            clearInterval(window.__starrynight_stars_interval);
+        }
+        updateFlickeringStars();
+        window.__starrynight_stars_interval = setInterval(updateFlickeringStars, 3000);
+
+        container.dataset.ctInitialized = '1';
+    }
+
+    window.StarryNight = window.StarryNight || {};
+    window.StarryNight.initStars = initStars;
+
+    function runInit() {
+        try { initStars(); } catch (e) { console.error('StarryNight init error', e); }
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', runInit);
+    } else {
+        runInit();
+    }
+
+    window.addEventListener('turbo:load', runInit);
+    window.addEventListener('turbo:render', runInit);
+    window.addEventListener('pjax:end', runInit);
+    window.addEventListener('popstate', runInit);
+    window.addEventListener('spa:navigate', runInit);
+
+    const observer = new MutationObserver(() => {
+        runInit();
+    });
+    observer.observe(document.documentElement || document.body, { childList: true, subtree: true });
+
+})();
+</script>
+JS;
+
+            return $meteorCss.$meteorHtml.$starDiv.$starStyle.$starJs;
+        });
+    }
+
+    public function boot(Panel $panel): void {}
+}