update

i18n.js

@@ -142,6 +142,7 @@ export const DESIGN_THEME_LABELS = {
     nord: "Nord",
     "animal-crossing": "动森",
     minecraft: "我的世界",
+    "persona-5": "女神异闻录 5",
   },
   "zh-Hant": {
     fluent: "Fluent",
@@ -151,6 +152,7 @@ export const DESIGN_THEME_LABELS = {
     nord: "Nord",
     "animal-crossing": "動森",
     minecraft: "我的世界",
+    "persona-5": "女神異聞錄 5",
   },
   en: {
     fluent: "Fluent",
@@ -160,6 +162,7 @@ export const DESIGN_THEME_LABELS = {
     nord: "Nord",
     "animal-crossing": "Animal Crossing",
     minecraft: "Minecraft",
+    "persona-5": "Persona 5",
   },
   ja: {
     fluent: "Fluent",
@@ -169,6 +172,7 @@ export const DESIGN_THEME_LABELS = {
     nord: "Nord",
     "animal-crossing": "どうぶつの森",
     minecraft: "マインクラフト",
+    "persona-5": "ペルソナ5",
   },
   ko: {
     fluent: "Fluent",
@@ -178,6 +182,7 @@ export const DESIGN_THEME_LABELS = {
     nord: "Nord",
     "animal-crossing": "동물의 숲",
     minecraft: "마인크래프트",
+    "persona-5": "페르소나 5",
   },
   wenyan: {
     fluent: "流光",
@@ -187,6 +192,7 @@ export const DESIGN_THEME_LABELS = {
     nord: "清寒",
     "animal-crossing": "森友",
     minecraft: "方块世界",
+    "persona-5": "异闻录五",
   },
   mars: {
     fluent: "流↗光",
@@ -196,6 +202,7 @@ export const DESIGN_THEME_LABELS = {
     nord: "清↗寒★",
     "animal-crossing": "动↗森★",
     minecraft: "我↗的★世界",
+    "persona-5": "女↘神★异闻5",
   },
   garbled: {
     fluent: "◼è▦",
@@ -205,6 +212,7 @@ export const DESIGN_THEME_LABELS = {
     nord: "æ◽屯¿",
     "animal-crossing": "ä◼▤è",
     minecraft: "▤◼▦è屯",
+    "persona-5": "▦¥◼ç5",
   },
   bin: {
     fluent: "0101",
@@ -214,6 +222,7 @@ export const DESIGN_THEME_LABELS = {
     nord: "0101010",
     "animal-crossing": "01010101",
     minecraft: "0101010",
+    "persona-5": "01010101",
   },
   meow: {
     fluent: "喵喵",
@@ -223,6 +232,7 @@ export const DESIGN_THEME_LABELS = {
     nord: "喵喵喵",
     "animal-crossing": "喵喵喵喵",
     minecraft: "喵喵喵",
+    "persona-5": "喵喵喵喵喵",
   },
   emoji: {
     fluent: "💧",
@@ -232,6 +242,7 @@ export const DESIGN_THEME_LABELS = {
     nord: "❄️",
     "animal-crossing": "🌿",
     minecraft: "⛏️",
+    "persona-5": "🎭",
   },
 }
 

index.html

@@ -49,6 +49,9 @@
           <li role="option" data-value="minecraft" aria-selected="false">
             Minecraft
           </li>
+          <li role="option" data-value="persona-5" aria-selected="false">
+            Persona 5
+          </li>
         </ul>
       </label>
       <label class="design-theme language-switch">

style.css

@@ -2220,3 +2220,233 @@ html[data-theme="light"][data-design-theme="minecraft"] .beian a:hover {
     transform: none !important;
   }
 }
+
+/* ─── Persona 5 — Phantom Red UI ───────────────────────────── */
+html[data-design-theme="persona-5"] {
+  color-scheme: light;
+
+  --accent: #d71920;
+  --accent-rgb: 215, 25, 32;
+  --accent-2: #111111;
+  --accent-3: #ffffff;
+  --accent-secondary-rgb: 17, 17, 17;
+
+  --page-gradient: linear-gradient(
+    135deg,
+    #f6f1e7 0%,
+    #ffffff 55%,
+    #ffd9da 100%
+  );
+  --page-texture:
+    linear-gradient(
+      135deg,
+      rgba(215, 25, 32, 0.12) 0 12%,
+      transparent 12% 100%
+    ),
+    linear-gradient(315deg, rgba(17, 17, 17, 0.07) 0 10%, transparent 10% 100%);
+  --title-gradient: linear-gradient(
+    135deg,
+    #111111 0%,
+    #d71920 55%,
+    #111111 100%
+  );
+
+  --control-bg: rgba(255, 255, 255, 0.92);
+  --control-border: rgba(17, 17, 17, 0.6);
+  --control-inset: rgba(255, 255, 255, 0.95);
+  --control-fg: #111111;
+}
+
+html[data-theme="dark"][data-design-theme="persona-5"] {
+  color-scheme: dark;
+
+  --accent: #ff1f2d;
+  --accent-rgb: 255, 31, 45;
+  --accent-2: #ffffff;
+  --accent-3: #111111;
+  --accent-secondary-rgb: 255, 255, 255;
+
+  --page-gradient: #0a0a0a;
+  --page-texture:
+    linear-gradient(
+      135deg,
+      rgba(255, 31, 45, 0.22) 0 14%,
+      transparent 14% 100%
+    ),
+    linear-gradient(315deg, rgba(255, 255, 255, 0.08) 0 9%, transparent 9% 100%);
+  --title-gradient: linear-gradient(
+    135deg,
+    #ffffff 0%,
+    #ff1f2d 45%,
+    #ffffff 100%
+  );
+
+  --control-bg: rgba(14, 14, 14, 0.9);
+  --control-border: rgba(255, 255, 255, 0.72);
+  --control-inset: rgba(255, 255, 255, 0.08);
+  --control-fg: #ffffff;
+}
+
+html[data-design-theme="persona-5"] body::before {
+  background-size: 100% 100%;
+}
+
+html[data-design-theme="persona-5"] .title {
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  filter: drop-shadow(3px 3px 0 rgba(var(--accent-rgb), 0.25));
+}
+
+html[data-design-theme="persona-5"] .design-theme-button,
+html[data-design-theme="persona-5"] .theme-toggle {
+  border-radius: 4px;
+  border-width: 2px;
+  font-weight: 900;
+  text-transform: uppercase;
+  transform: skew(-8deg);
+  box-shadow: 6px 6px 0 rgba(var(--accent-rgb), 0.34);
+}
+
+html[data-design-theme="persona-5"] .design-theme-button::after,
+html[data-design-theme="persona-5"] .theme-icon {
+  transform: skew(8deg);
+}
+
+html[data-design-theme="persona-5"] .design-theme-button::after {
+  transform: translateY(-50%) skew(8deg);
+}
+
+html[data-design-theme="persona-5"] .design-theme-button:hover,
+html[data-design-theme="persona-5"] .theme-toggle:hover {
+  background: var(--accent);
+  border-color: #111111;
+  color: #ffffff;
+  transform: translateY(-2px) skew(-8deg);
+  box-shadow: 8px 8px 0 rgba(17, 17, 17, 0.95);
+}
+
+html[data-theme="dark"][data-design-theme="persona-5"]
+  .design-theme-button:hover,
+html[data-theme="dark"][data-design-theme="persona-5"] .theme-toggle:hover {
+  border-color: #ffffff;
+  box-shadow: 8px 8px 0 rgba(255, 255, 255, 0.88);
+}
+
+html[data-design-theme="persona-5"] .design-theme-list {
+  border: 2px solid var(--control-border);
+  border-radius: 4px;
+  background: var(--control-bg);
+  box-shadow: 8px 8px 0 rgba(var(--accent-rgb), 0.42);
+}
+
+html[data-design-theme="persona-5"] .design-theme-list [role="option"] {
+  border-radius: 2px;
+  font-weight: 900;
+}
+
+html[data-design-theme="persona-5"] .design-theme-list [role="option"]:hover,
+html[data-design-theme="persona-5"]
+  .design-theme-list
+  [role="option"][aria-selected="true"] {
+  background: var(--accent);
+  color: #ffffff;
+}
+
+html[data-design-theme="persona-5"] .card {
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.92);
+  border: 2px solid #111111;
+  border-radius: 4px;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  box-shadow: 8px 8px 0 rgba(215, 25, 32, 0.72);
+  transform: rotate(-0.4deg);
+}
+
+html[data-design-theme="persona-5"] .card:nth-child(even) {
+  transform: rotate(0.4deg);
+}
+
+html[data-design-theme="persona-5"] .card::before {
+  display: block;
+  inset: 0 auto 0 0;
+  width: 12px;
+  height: auto;
+  border-radius: 0;
+  padding: 0;
+  background: var(--accent);
+  -webkit-mask: none;
+  mask: none;
+  opacity: 1;
+}
+
+html[data-design-theme="persona-5"] .card.pin {
+  background: #fff2f2;
+}
+
+html[data-design-theme="persona-5"] .card h2 {
+  color: #111111;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0;
+}
+
+html[data-design-theme="persona-5"] .card p {
+  color: #3a3a3a;
+}
+
+html[data-design-theme="persona-5"] .card:hover,
+html[data-design-theme="persona-5"] .card:focus {
+  background: #111111;
+  border-color: var(--accent);
+  color: #ffffff;
+  transform: translateY(-4px) rotate(0deg);
+  box-shadow: 10px 10px 0 rgba(var(--accent-rgb), 0.92);
+}
+
+html[data-theme="dark"][data-design-theme="persona-5"] .card {
+  background: rgba(14, 14, 14, 0.92);
+  border-color: #ffffff;
+  box-shadow: 8px 8px 0 rgba(255, 31, 45, 0.78);
+}
+
+html[data-theme="dark"][data-design-theme="persona-5"] .card.pin {
+  background: rgba(36, 10, 12, 0.92);
+}
+
+html[data-theme="dark"][data-design-theme="persona-5"] .card h2 {
+  color: #ffffff;
+}
+
+html[data-theme="dark"][data-design-theme="persona-5"] .card p {
+  color: #d9d9d9;
+}
+
+html[data-design-theme="persona-5"] .card:hover h2,
+html[data-design-theme="persona-5"] .card:focus h2 {
+  color: #ffffff;
+}
+
+html[data-design-theme="persona-5"] .card:hover p,
+html[data-design-theme="persona-5"] .card:focus p {
+  color: #f2f2f2;
+}
+
+html[data-design-theme="persona-5"] .beian a {
+  color: var(--control-fg);
+  font-weight: 800;
+}
+
+html[data-design-theme="persona-5"] .beian a:hover {
+  color: var(--accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-design-theme="persona-5"] .card,
+  html[data-design-theme="persona-5"] .design-theme-button,
+  html[data-design-theme="persona-5"] .theme-toggle {
+    transition-duration: 0.01ms !important;
+    transform: none !important;
+  }
+}

theme.js

@@ -6,6 +6,7 @@ const DESIGN_THEMES = [
   "nord",
   "animal-crossing",
   "minecraft",
+  "persona-5",
 ]
 const FORCED_DARK_DESIGN_THEMES = new Set(["terminal", "cyberpunk"])
 const THEME_BEFORE_FORCED_KEY = "themeBeforeForcedDark"