Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-01-11 20:10:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added new theme called skyRealm

Browse source
This commit is contained in:
Chris-tian123 2025-10-01 19:12:23 +03:00
parent 28e6d97e9e
commit 0ed0496692
4 changed files with 258 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/assets/locales/en.json
View file

@ -951,7 +951,8 @@
"wolverine": "Wolverine",
"popsicle": "Popsicle",
"hulk": "Hulk",
"autumn": "Autumn"
"autumn": "Autumn",
"skyrealm": "SkyRealm"
},
"title": "Appearance",
"options": {

5
src/pages/parts/settings/AppearancePart.tsx
View file

@ -108,6 +108,11 @@ const availableThemes = [
selector: "theme-popsicle",
key: "settings.appearance.themes.popsicle",
},
{
id: "skyRealm",
selector: "theme-skyrealm",
key: "settings.appearance.themes.skyrealm",
},
];
function ThemePreview(props: {

4
themes/all.ts
View file

@ -17,6 +17,7 @@ import wolverine from "./list/wolverine";
import popsicle from "./list/popsicle";
import hulk from "./list/hulk";
import autumn from "./list/autumn";
import skyRealm from "./list/skyrealm";
export const allThemes = [
teal,
@ -38,4 +39,5 @@ export const allThemes = [
hulk,
wolverine,
popsicle,
]
skyRealm,
];

248
themes/list/skyrealm.ts Normal file
View file

@ -0,0 +1,248 @@
import { createTheme } from "../types";
const tokens = {
petal: {
c50: "#fff0f5",
c100: "#ffdde9",
c200: "#ffbbd1",
c300: "#ff99bb",
c400: "#ff77a5",
c500: "#e65f8f",
c600: "#cc4779",
c700: "#b33263",
c800: "#991e4d",
c900: "#800f3a",
},
dawn: {
c25: "#f0e9f5",
c50: "#e6d9f0",
c100: "#d7c2e8",
c200: "#c2a6dd",
c300: "#ad8ad2",
c400: "#9970c7",
c500: "#8558b5",
c600: "#6b4599",
c700: "#52337d",
c800: "#3a2361",
c900: "#261547",
},
silk: {
c50: "#fdfdfd",
c100: "#faf8f9",
c200: "#f5f0f3",
c300: "#ede5ec",
c400: "#e6dae5",
c500: "#dfd0de",
c600: "#d0b8d0",
c700: "#c29fc2",
c800: "#b386b3",
c900: "#a66ea6",
},
nectar: {
c50: "#fff9e6",
c100: "#fff3cc",
c200: "#ffe899",
c300: "#ffdd66",
c400: "#ffd233",
c500: "#e6b800",
c600: "#cca000",
c700: "#b38900",
c800: "#997100",
c900: "#805a00",
},
};
export default createTheme({
name: "skyRealm",
extend: {
colors: {
themePreview: {
primary: tokens.petal.c200,
secondary: tokens.dawn.c50,
},
pill: {
background: tokens.dawn.c300,
backgroundHover: tokens.dawn.c200,
highlight: tokens.petal.c200,
activeBackground: tokens.dawn.c300,
},
global: {
accentA: tokens.petal.c200,
accentB: tokens.petal.c300,
},
lightBar: {
light: tokens.petal.c400,
},
buttons: {
toggle: tokens.nectar.c300,
toggleDisabled: tokens.silk.c500,
secondary: tokens.silk.c700,
secondaryHover: tokens.silk.c600,
purple: tokens.dawn.c500,
purpleHover: tokens.dawn.c400,
cancel: tokens.silk.c500,
cancelHover: tokens.silk.c300,
},
background: {
main: tokens.dawn.c900,
secondary: tokens.dawn.c600,
secondaryHover: tokens.dawn.c400,
accentA: tokens.nectar.c500,
accentB: tokens.petal.c500,
},
modal: {
background: tokens.dawn.c800,
},
type: {
logo: tokens.nectar.c100,
text: tokens.silk.c50,
dimmed: tokens.silk.c50,
divider: tokens.silk.c500,
secondary: tokens.silk.c100,
link: tokens.petal.c100,
linkHover: tokens.petal.c50,
},
search: {
background: tokens.dawn.c500,
hoverBackground: tokens.dawn.c600,
focused: tokens.dawn.c400,
placeholder: tokens.dawn.c100,
icon: tokens.dawn.c100,
},
mediaCard: {
hoverBackground: tokens.dawn.c600,
hoverAccent: tokens.dawn.c25,
hoverShadow: tokens.dawn.c900,
shadow: tokens.dawn.c700,
barColor: tokens.silk.c200,
barFillColor: tokens.petal.c100,
badge: tokens.dawn.c700,
badgeText: tokens.silk.c100,
},
largeCard: {
background: tokens.dawn.c600,
icon: tokens.petal.c400,
},
dropdown: {
background: tokens.dawn.c600,
altBackground: tokens.dawn.c700,
hoverBackground: tokens.dawn.c500,
text: tokens.silk.c50,
secondary: tokens.dawn.c100,
border: tokens.dawn.c400,
contentBackground: tokens.dawn.c500,
},
authentication: {
border: tokens.dawn.c300,
inputBg: tokens.dawn.c600,
inputBgHover: tokens.dawn.c500,
wordBackground: tokens.dawn.c500,
copyText: tokens.dawn.c100,
copyTextHover: tokens.silk.c50,
},
settings: {
sidebar: {
activeLink: tokens.dawn.c600,
badge: tokens.dawn.c900,
type: {
secondary: tokens.dawn.c200,
inactive: tokens.dawn.c50,
icon: tokens.dawn.c50,
iconActivated: tokens.petal.c200,
activated: tokens.petal.c50,
},
},
card: {
border: tokens.dawn.c400,
background: tokens.dawn.c400,
altBackground: tokens.dawn.c400,
},
saveBar: {
background: tokens.dawn.c800,
},
},
utils: {
divider: tokens.silk.c300,
},
errors: {
card: tokens.dawn.c800,
border: tokens.silk.c500,
type: {
secondary: tokens.silk.c100,
},
},
about: {
circle: tokens.silk.c500,
circleText: tokens.silk.c50,
},
editBadge: {
bg: tokens.silk.c500,
bgHover: tokens.silk.c400,
text: tokens.silk.c50,
},
progress: {
background: tokens.silk.c50,
preloaded: tokens.silk.c50,
filled: tokens.petal.c200,
},
video: {
buttonBackground: tokens.silk.c200,
autoPlay: {
background: tokens.silk.c700,
hover: tokens.silk.c500,
},
scraping: {
card: tokens.dawn.c700,
loading: tokens.petal.c200,
noresult: tokens.silk.c100,
},
audio: {
set: tokens.petal.c200,
},
context: {
background: tokens.silk.c900,
light: tokens.dawn.c50,
border: tokens.silk.c600,
hoverColor: tokens.silk.c600,
buttonFocus: tokens.silk.c500,
flagBg: tokens.silk.c500,
inputBg: tokens.silk.c600,
buttonOverInputHover: tokens.silk.c500,
inputPlaceholder: tokens.silk.c200,
cardBorder: tokens.silk.c700,
slider: tokens.silk.c50,
sliderFilled: tokens.petal.c200,
buttons: {
list: tokens.silk.c700,
active: tokens.silk.c900,
},
closeHover: tokens.silk.c800,
type: {
secondary: tokens.silk.c200,
accent: tokens.petal.c200,
},
},
},
},
},
});