update at 2026-02-13 22:55:01
This commit is contained in:
douboer@gmail.com
777
miniapp/data/theme-presets.js
Normal file
777
miniapp/data/theme-presets.js
Normal file
@@ -0,0 +1,777 @@
|
|||||||
|
module.exports = [
|
||||||
|
{
|
||||||
|
"id": "figma-aegean",
|
||||||
|
"name": "Figma-Aegean",
|
||||||
|
"colors": [
|
||||||
|
"#264653",
|
||||||
|
"#287271",
|
||||||
|
"#2A9D8F",
|
||||||
|
"#8AB17D",
|
||||||
|
"#E9C46A",
|
||||||
|
"#EFB366",
|
||||||
|
"#F4A261",
|
||||||
|
"#F1965D",
|
||||||
|
"#EE8959",
|
||||||
|
"#E76F51"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-violet",
|
||||||
|
"name": "Figma-Violet",
|
||||||
|
"colors": [
|
||||||
|
"#F72585",
|
||||||
|
"#B5179E",
|
||||||
|
"#7209B7",
|
||||||
|
"#560BAD",
|
||||||
|
"#480CA8",
|
||||||
|
"#3A0CA3",
|
||||||
|
"#3F37C9",
|
||||||
|
"#4361EE",
|
||||||
|
"#4895EF",
|
||||||
|
"#4CC9F0"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-1",
|
||||||
|
"name": "Figma-01",
|
||||||
|
"colors": [
|
||||||
|
"#322F4F",
|
||||||
|
"#433E71",
|
||||||
|
"#554C93",
|
||||||
|
"#98958C",
|
||||||
|
"#DBDD85",
|
||||||
|
"#D8DD7D",
|
||||||
|
"#D5DB74",
|
||||||
|
"#CED56E",
|
||||||
|
"#C8CF67",
|
||||||
|
"#BAC35A"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-2",
|
||||||
|
"name": "Figma-02",
|
||||||
|
"colors": [
|
||||||
|
"#2B3B51",
|
||||||
|
"#355971",
|
||||||
|
"#3F7690",
|
||||||
|
"#91A483",
|
||||||
|
"#E2D075",
|
||||||
|
"#E4C66F",
|
||||||
|
"#E4BD69",
|
||||||
|
"#E0B464",
|
||||||
|
"#DBAA5F",
|
||||||
|
"#D19654"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-3",
|
||||||
|
"name": "Figma-03",
|
||||||
|
"colors": [
|
||||||
|
"#274D4C",
|
||||||
|
"#2B7171",
|
||||||
|
"#2F9595",
|
||||||
|
"#8B9395",
|
||||||
|
"#E79094",
|
||||||
|
"#EC878A",
|
||||||
|
"#EF7D7F",
|
||||||
|
"#EC7578",
|
||||||
|
"#E86D6F",
|
||||||
|
"#E15D5F"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-4",
|
||||||
|
"name": "Figma-04",
|
||||||
|
"colors": [
|
||||||
|
"#3D3D3D",
|
||||||
|
"#5B5B5B",
|
||||||
|
"#797979",
|
||||||
|
"#9F9F9F",
|
||||||
|
"#C4C4C4",
|
||||||
|
"#BCBCBC",
|
||||||
|
"#B3B3B3",
|
||||||
|
"#AAAAAA",
|
||||||
|
"#A1A1A1",
|
||||||
|
"#8F8F8F"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-5",
|
||||||
|
"name": "Figma-05",
|
||||||
|
"colors": [
|
||||||
|
"#F4F1DE",
|
||||||
|
"#EAB69F",
|
||||||
|
"#E07A5F",
|
||||||
|
"#8F5D5D",
|
||||||
|
"#3D405B",
|
||||||
|
"#5F797B",
|
||||||
|
"#81B29A",
|
||||||
|
"#9EB998",
|
||||||
|
"#BABF95",
|
||||||
|
"#F2CC8F"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-6",
|
||||||
|
"name": "Figma-06",
|
||||||
|
"colors": [
|
||||||
|
"#F2F3E3",
|
||||||
|
"#D6DAA5",
|
||||||
|
"#B9C167",
|
||||||
|
"#7C805D",
|
||||||
|
"#3E3D52",
|
||||||
|
"#68667A",
|
||||||
|
"#938FA1",
|
||||||
|
"#A8A6A1",
|
||||||
|
"#BBBBA1",
|
||||||
|
"#E3E6A1"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-7",
|
||||||
|
"name": "Figma-07",
|
||||||
|
"colors": [
|
||||||
|
"#F3F1E0",
|
||||||
|
"#E0C7A1",
|
||||||
|
"#CD9B62",
|
||||||
|
"#856D5D",
|
||||||
|
"#3D3F57",
|
||||||
|
"#63707A",
|
||||||
|
"#89A19D",
|
||||||
|
"#A2B09C",
|
||||||
|
"#BABD9A",
|
||||||
|
"#EBD896"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-8",
|
||||||
|
"name": "Figma-08",
|
||||||
|
"colors": [
|
||||||
|
"#F3E6E7",
|
||||||
|
"#E7A8A9",
|
||||||
|
"#DA6A6B",
|
||||||
|
"#8C5D5D",
|
||||||
|
"#3D4F4E",
|
||||||
|
"#607A7A",
|
||||||
|
"#83A4A5",
|
||||||
|
"#9FA6A7",
|
||||||
|
"#BAA7A8",
|
||||||
|
"#F0A9AB"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-9",
|
||||||
|
"name": "Figma-09",
|
||||||
|
"colors": [
|
||||||
|
"#EFEFEF",
|
||||||
|
"#C2C2C2",
|
||||||
|
"#959595",
|
||||||
|
"#6B6B6B",
|
||||||
|
"#424242",
|
||||||
|
"#717171",
|
||||||
|
"#A0A0A0",
|
||||||
|
"#ADADAD",
|
||||||
|
"#B8B8B8",
|
||||||
|
"#D0D0D0"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-10",
|
||||||
|
"name": "Figma-10",
|
||||||
|
"colors": [
|
||||||
|
"#A8B868",
|
||||||
|
"#798575",
|
||||||
|
"#4A5282",
|
||||||
|
"#393F7C",
|
||||||
|
"#313679",
|
||||||
|
"#282C75",
|
||||||
|
"#3C3C9D",
|
||||||
|
"#4E4CC3",
|
||||||
|
"#645FD4",
|
||||||
|
"#7A71E4"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-11",
|
||||||
|
"name": "Figma-11",
|
||||||
|
"colors": [
|
||||||
|
"#EF476F",
|
||||||
|
"#F78C6B",
|
||||||
|
"#FFD166",
|
||||||
|
"#83D483",
|
||||||
|
"#06D6A0",
|
||||||
|
"#001914",
|
||||||
|
"#118AB2",
|
||||||
|
"#0F7799",
|
||||||
|
"#0C637F",
|
||||||
|
"#073B4C"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-12",
|
||||||
|
"name": "Figma-12",
|
||||||
|
"colors": [
|
||||||
|
"#D06A79",
|
||||||
|
"#984B8D",
|
||||||
|
"#5E2BA1",
|
||||||
|
"#482398",
|
||||||
|
"#3D1F94",
|
||||||
|
"#311B90",
|
||||||
|
"#3D39B6",
|
||||||
|
"#4857DC",
|
||||||
|
"#567BE3",
|
||||||
|
"#629FEB"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-13",
|
||||||
|
"name": "Figma-13",
|
||||||
|
"colors": [
|
||||||
|
"#B0BC63",
|
||||||
|
"#CED674",
|
||||||
|
"#EDF186",
|
||||||
|
"#A19B9B",
|
||||||
|
"#5444B0",
|
||||||
|
"#493DAB",
|
||||||
|
"#3E35A6",
|
||||||
|
"#362E8E",
|
||||||
|
"#2C2676",
|
||||||
|
"#1A1646"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-14",
|
||||||
|
"name": "Figma-14",
|
||||||
|
"colors": [
|
||||||
|
"#D07E6A",
|
||||||
|
"#E3AF6F",
|
||||||
|
"#F6E073",
|
||||||
|
"#91B98D",
|
||||||
|
"#2C90A6",
|
||||||
|
"#2A79A9",
|
||||||
|
"#2761AD",
|
||||||
|
"#225494",
|
||||||
|
"#1B467B",
|
||||||
|
"#102949"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-15",
|
||||||
|
"name": "Figma-15",
|
||||||
|
"colors": [
|
||||||
|
"#E65D5C",
|
||||||
|
"#F1797A",
|
||||||
|
"#FC9498",
|
||||||
|
"#87A6A9",
|
||||||
|
"#10B7B9",
|
||||||
|
"#14ACAC",
|
||||||
|
"#17A09F",
|
||||||
|
"#148A88",
|
||||||
|
"#107271",
|
||||||
|
"#094443"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-16",
|
||||||
|
"name": "Figma-16",
|
||||||
|
"colors": [
|
||||||
|
"#7D7D7D",
|
||||||
|
"#A8A8A8",
|
||||||
|
"#D2D2D2",
|
||||||
|
"#B2B2B2",
|
||||||
|
"#919191",
|
||||||
|
"#7E7E7E",
|
||||||
|
"#6A6A6A",
|
||||||
|
"#5B5B5B",
|
||||||
|
"#4C4C4C",
|
||||||
|
"#2D2D2D"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-17",
|
||||||
|
"name": "Figma-17",
|
||||||
|
"colors": [
|
||||||
|
"#5F0F40",
|
||||||
|
"#7D092F",
|
||||||
|
"#9A031E",
|
||||||
|
"#CB4721",
|
||||||
|
"#FB8B24",
|
||||||
|
"#EF781C",
|
||||||
|
"#E36414",
|
||||||
|
"#AE5E26",
|
||||||
|
"#795838",
|
||||||
|
"#0F4C5C"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-18",
|
||||||
|
"name": "Figma-18",
|
||||||
|
"colors": [
|
||||||
|
"#414731",
|
||||||
|
"#515A23",
|
||||||
|
"#616C15",
|
||||||
|
"#99A32C",
|
||||||
|
"#D1D942",
|
||||||
|
"#C2CB37",
|
||||||
|
"#B3BC2C",
|
||||||
|
"#909636",
|
||||||
|
"#6C6F41",
|
||||||
|
"#252157"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-19",
|
||||||
|
"name": "Figma-19",
|
||||||
|
"colors": [
|
||||||
|
"#502939",
|
||||||
|
"#672F2A",
|
||||||
|
"#7E351A",
|
||||||
|
"#B27225",
|
||||||
|
"#E6B030",
|
||||||
|
"#D99F27",
|
||||||
|
"#CB8E1E",
|
||||||
|
"#9F782D",
|
||||||
|
"#72623C",
|
||||||
|
"#1A375A"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-20",
|
||||||
|
"name": "Figma-20",
|
||||||
|
"colors": [
|
||||||
|
"#5B2A28",
|
||||||
|
"#771E1C",
|
||||||
|
"#921211",
|
||||||
|
"#C43133",
|
||||||
|
"#F55054",
|
||||||
|
"#E94347",
|
||||||
|
"#DC363A",
|
||||||
|
"#AA3E40",
|
||||||
|
"#774547",
|
||||||
|
"#125554"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-21",
|
||||||
|
"name": "Figma-21",
|
||||||
|
"colors": [
|
||||||
|
"#2C2C2C",
|
||||||
|
"#303030",
|
||||||
|
"#333333",
|
||||||
|
"#6A6A6A",
|
||||||
|
"#A0A0A0",
|
||||||
|
"#919191",
|
||||||
|
"#808080",
|
||||||
|
"#6F6F6F",
|
||||||
|
"#5E5E5E",
|
||||||
|
"#3B3B3B"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-22",
|
||||||
|
"name": "Figma-22",
|
||||||
|
"colors": [
|
||||||
|
"#366260",
|
||||||
|
"#516765",
|
||||||
|
"#6C6B6A",
|
||||||
|
"#8E6D6C",
|
||||||
|
"#B16E6D",
|
||||||
|
"#C76E6D",
|
||||||
|
"#DE6D6D",
|
||||||
|
"#E38384",
|
||||||
|
"#E6999A"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-23",
|
||||||
|
"name": "Figma-23",
|
||||||
|
"colors": [
|
||||||
|
"#39476C",
|
||||||
|
"#515371",
|
||||||
|
"#695F75",
|
||||||
|
"#876F74",
|
||||||
|
"#A67F73",
|
||||||
|
"#BA8971",
|
||||||
|
"#CE936E",
|
||||||
|
"#D7AA7E",
|
||||||
|
"#DEC08F"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-24",
|
||||||
|
"name": "Figma-24",
|
||||||
|
"colors": [
|
||||||
|
"#3F3D66",
|
||||||
|
"#52526B",
|
||||||
|
"#656770",
|
||||||
|
"#7E8270",
|
||||||
|
"#979D70",
|
||||||
|
"#A7AE6F",
|
||||||
|
"#B7C06D",
|
||||||
|
"#C5CC81",
|
||||||
|
"#D2D794"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-25",
|
||||||
|
"name": "Figma-25",
|
||||||
|
"colors": [
|
||||||
|
"#4B4B4B",
|
||||||
|
"#575757",
|
||||||
|
"#626262",
|
||||||
|
"#707070",
|
||||||
|
"#7E7E7E",
|
||||||
|
"#878787",
|
||||||
|
"#8F8F8F",
|
||||||
|
"#A5A5A5",
|
||||||
|
"#BABABA"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-26",
|
||||||
|
"name": "Figma-26",
|
||||||
|
"colors": [
|
||||||
|
"#363636",
|
||||||
|
"#474747",
|
||||||
|
"#585858",
|
||||||
|
"#9C9C9C",
|
||||||
|
"#E0E0E0",
|
||||||
|
"#A5A5A5",
|
||||||
|
"#696969",
|
||||||
|
"#565656",
|
||||||
|
"#424242"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-27",
|
||||||
|
"name": "Figma-27",
|
||||||
|
"colors": [
|
||||||
|
"#293B3B",
|
||||||
|
"#235959",
|
||||||
|
"#1D7575",
|
||||||
|
"#84A6A6",
|
||||||
|
"#ECD7D8",
|
||||||
|
"#D58A8A",
|
||||||
|
"#BD3C3D",
|
||||||
|
"#993333",
|
||||||
|
"#732829"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-28",
|
||||||
|
"name": "Figma-28",
|
||||||
|
"colors": [
|
||||||
|
"#2B363B",
|
||||||
|
"#2B4559",
|
||||||
|
"#295477",
|
||||||
|
"#899BA6",
|
||||||
|
"#EAE2D5",
|
||||||
|
"#CBA886",
|
||||||
|
"#AC6F37",
|
||||||
|
"#8B5B2F",
|
||||||
|
"#694626"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-29",
|
||||||
|
"name": "Figma-29",
|
||||||
|
"colors": [
|
||||||
|
"#2F2E3B",
|
||||||
|
"#353159",
|
||||||
|
"#3A3376",
|
||||||
|
"#908EA6",
|
||||||
|
"#E7E8D6",
|
||||||
|
"#BEC388",
|
||||||
|
"#949D3A",
|
||||||
|
"#788031",
|
||||||
|
"#5B6127"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-30",
|
||||||
|
"name": "Figma-30",
|
||||||
|
"colors": [
|
||||||
|
"#283D3B",
|
||||||
|
"#21585A",
|
||||||
|
"#197278",
|
||||||
|
"#83A8A6",
|
||||||
|
"#EDDDD4",
|
||||||
|
"#D99185",
|
||||||
|
"#E9B5AF",
|
||||||
|
"#9E3A2E",
|
||||||
|
"#772E25"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-31",
|
||||||
|
"name": "Figma-31",
|
||||||
|
"colors": [
|
||||||
|
"#BDBDBD",
|
||||||
|
"#9D9D9D",
|
||||||
|
"#7E7E7E",
|
||||||
|
"#6B6B6B",
|
||||||
|
"#585858",
|
||||||
|
"#5D5D5D",
|
||||||
|
"#606060",
|
||||||
|
"#626262",
|
||||||
|
"#707070",
|
||||||
|
"#7D7D7D"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-32",
|
||||||
|
"name": "Figma-32",
|
||||||
|
"colors": [
|
||||||
|
"#FB5860",
|
||||||
|
"#F74046",
|
||||||
|
"#F2292C",
|
||||||
|
"#F23433",
|
||||||
|
"#F23E39",
|
||||||
|
"#B86E68",
|
||||||
|
"#9C867F",
|
||||||
|
"#7F9E96",
|
||||||
|
"#5FB4AE",
|
||||||
|
"#3DCAC5"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-33",
|
||||||
|
"name": "Figma-33",
|
||||||
|
"colors": [
|
||||||
|
"#F3D321",
|
||||||
|
"#E7B019",
|
||||||
|
"#DC8C10",
|
||||||
|
"#D67039",
|
||||||
|
"#D05460",
|
||||||
|
"#A2529A",
|
||||||
|
"#8C51B8",
|
||||||
|
"#7550D5",
|
||||||
|
"#5F5FE3",
|
||||||
|
"#476CEF"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-34",
|
||||||
|
"name": "Figma-34",
|
||||||
|
"colors": [
|
||||||
|
"#E6EB40",
|
||||||
|
"#D1DA2F",
|
||||||
|
"#BDC91E",
|
||||||
|
"#AEBE36",
|
||||||
|
"#9FB24D",
|
||||||
|
"#838F81",
|
||||||
|
"#757E9C",
|
||||||
|
"#666CB6",
|
||||||
|
"#5F5FC8",
|
||||||
|
"#5650DA"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-35",
|
||||||
|
"name": "Figma-35",
|
||||||
|
"colors": [
|
||||||
|
"#FFBE0B",
|
||||||
|
"#FD8A09",
|
||||||
|
"#FB5607",
|
||||||
|
"#FD2B3B",
|
||||||
|
"#FF006E",
|
||||||
|
"#C11CAD",
|
||||||
|
"#A22ACD",
|
||||||
|
"#8338EC",
|
||||||
|
"#5F5FF6",
|
||||||
|
"#3A86FF"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-36",
|
||||||
|
"name": "Figma-36",
|
||||||
|
"colors": [
|
||||||
|
"#6E6E6E",
|
||||||
|
"#555555",
|
||||||
|
"#3C3C3C",
|
||||||
|
"#333333",
|
||||||
|
"#2F2F2F",
|
||||||
|
"#2A2A2A",
|
||||||
|
"#4A4A4A",
|
||||||
|
"#686868",
|
||||||
|
"#888888",
|
||||||
|
"#A8A8A8"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-37",
|
||||||
|
"name": "Figma-37",
|
||||||
|
"colors": [
|
||||||
|
"#EC5B57",
|
||||||
|
"#AD635D",
|
||||||
|
"#6C6B64",
|
||||||
|
"#526660",
|
||||||
|
"#45645D",
|
||||||
|
"#37615B",
|
||||||
|
"#3E8983",
|
||||||
|
"#44B0AB",
|
||||||
|
"#4BC8C4",
|
||||||
|
"#52DFDD"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-38",
|
||||||
|
"name": "Figma-38",
|
||||||
|
"colors": [
|
||||||
|
"#05668D",
|
||||||
|
"#04738F",
|
||||||
|
"#028090",
|
||||||
|
"#019493",
|
||||||
|
"#00A896",
|
||||||
|
"#01B698",
|
||||||
|
"#02C39A",
|
||||||
|
"#79DBAC",
|
||||||
|
"#B5E7B5",
|
||||||
|
"#F0F3BD"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-39",
|
||||||
|
"name": "Figma-39",
|
||||||
|
"colors": [
|
||||||
|
"#292281",
|
||||||
|
"#2D2586",
|
||||||
|
"#31278B",
|
||||||
|
"#382D93",
|
||||||
|
"#3F329B",
|
||||||
|
"#4437A1",
|
||||||
|
"#4A3BA6",
|
||||||
|
"#9D96BA",
|
||||||
|
"#C7C4C4",
|
||||||
|
"#F1F0CD"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-40",
|
||||||
|
"name": "Figma-40",
|
||||||
|
"colors": [
|
||||||
|
"#164588",
|
||||||
|
"#184E8B",
|
||||||
|
"#19568E",
|
||||||
|
"#1B6393",
|
||||||
|
"#1E7098",
|
||||||
|
"#22799B",
|
||||||
|
"#25829F",
|
||||||
|
"#8ABAB1",
|
||||||
|
"#BED6BB",
|
||||||
|
"#F0F2C3"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-41",
|
||||||
|
"name": "Figma-41",
|
||||||
|
"colors": [
|
||||||
|
"#097C7A",
|
||||||
|
"#098281",
|
||||||
|
"#088988",
|
||||||
|
"#089393",
|
||||||
|
"#089D9E",
|
||||||
|
"#0AA4A6",
|
||||||
|
"#0BABAD",
|
||||||
|
"#7DC0C2",
|
||||||
|
"#B7CACC",
|
||||||
|
"#F0D4D6"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-42",
|
||||||
|
"name": "Figma-42",
|
||||||
|
"colors": [
|
||||||
|
"#4D4D4D",
|
||||||
|
"#555555",
|
||||||
|
"#5C5C5C",
|
||||||
|
"#676767",
|
||||||
|
"#737373",
|
||||||
|
"#7C7C7C",
|
||||||
|
"#848484",
|
||||||
|
"#B8B8B8",
|
||||||
|
"#D2D2D2",
|
||||||
|
"#EBEBEB"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-43",
|
||||||
|
"name": "Figma-43",
|
||||||
|
"colors": [
|
||||||
|
"#16697A",
|
||||||
|
"#2F8498",
|
||||||
|
"#489FB5",
|
||||||
|
"#65B0C1",
|
||||||
|
"#9DCAD2",
|
||||||
|
"#B8D4D8",
|
||||||
|
"#EDE7E3",
|
||||||
|
"#F2D7B5",
|
||||||
|
"#F6C787",
|
||||||
|
"#FFA62B"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-44",
|
||||||
|
"name": "Figma-44",
|
||||||
|
"colors": [
|
||||||
|
"#352E74",
|
||||||
|
"#4E4892",
|
||||||
|
"#6862AE",
|
||||||
|
"#817BBB",
|
||||||
|
"#ADAACF",
|
||||||
|
"#C2C0D6",
|
||||||
|
"#EAEBE4",
|
||||||
|
"#E7E9BF",
|
||||||
|
"#E4E79A",
|
||||||
|
"#DDE44F"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-45",
|
||||||
|
"name": "Figma-45",
|
||||||
|
"colors": [
|
||||||
|
"#254D77",
|
||||||
|
"#3E6795",
|
||||||
|
"#5782B2",
|
||||||
|
"#7297BE",
|
||||||
|
"#A5BBD1",
|
||||||
|
"#BDCAD7",
|
||||||
|
"#EBE8E3",
|
||||||
|
"#EDDFB9",
|
||||||
|
"#EDD68F",
|
||||||
|
"#EEC33A"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-46",
|
||||||
|
"name": "Figma-46",
|
||||||
|
"colors": [
|
||||||
|
"#1A7271",
|
||||||
|
"#338F8E",
|
||||||
|
"#4CABAA",
|
||||||
|
"#68B9B8",
|
||||||
|
"#9FCECE",
|
||||||
|
"#B9D6D6",
|
||||||
|
"#ECE4E4",
|
||||||
|
"#F0C3C5",
|
||||||
|
"#F3A2A5",
|
||||||
|
"#FA6065"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "figma-47",
|
||||||
|
"name": "Figma-47",
|
||||||
|
"colors": [
|
||||||
|
"#525252",
|
||||||
|
"#6C6C6C",
|
||||||
|
"#878787",
|
||||||
|
"#9B9B9B",
|
||||||
|
"#BDBDBD",
|
||||||
|
"#CCCCCC",
|
||||||
|
"#E8E8E8",
|
||||||
|
"#DBDBDB",
|
||||||
|
"#CDCDCD",
|
||||||
|
"#B2B2B2"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
const { parseTableByFileName, buildSankeyData } = require('../../utils/sankey');
|
const { parseTableByFileName, buildSankeyData } = require('../../utils/sankey');
|
||||||
const defaultSankeyTable = require('../../data/sankey.default.js');
|
const defaultSankeyTable = require('../../data/sankey.default.js');
|
||||||
|
const themePresets = require('../../data/theme-presets.js');
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 将表头标准化，便于做中英文别名匹配。
|
* 将表头标准化，便于做中英文别名匹配。
|
||||||
@@ -65,11 +66,39 @@ function getFileExtension(fileName) {
|
|||||||
return lowerName.slice(lastDotIndex + 1);
|
return lowerName.slice(lastDotIndex + 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const FALLBACK_THEME_COLORS = ['#9b6bc2', '#7e95f7', '#4cc9f0', '#f4a261'];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 节点配色：与当前画布渲染保持一致，双色交替。
|
* 节点配色：使用当前主题色带循环取色。
|
||||||
*/
|
*/
|
||||||
function getNodeColor(index) {
|
function getNodeColor(index, palette) {
|
||||||
return index % 2 === 0 ? '#9b6bc2' : '#7e95f7';
|
const colors = Array.isArray(palette) && palette.length > 0 ? palette : FALLBACK_THEME_COLORS;
|
||||||
|
return colors[index % colors.length];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将 16 进制颜色转换为 rgba，便于控制连线透明度。
|
||||||
|
*/
|
||||||
|
function toRgbaColor(color, alpha) {
|
||||||
|
const text = String(color || '').trim();
|
||||||
|
const safeAlpha = Number.isFinite(Number(alpha)) ? Math.max(0, Math.min(1, Number(alpha))) : 1;
|
||||||
|
const shortHex = /^#([0-9a-fA-F]{3})$/;
|
||||||
|
const longHex = /^#([0-9a-fA-F]{6})$/;
|
||||||
|
|
||||||
|
let hex = '';
|
||||||
|
if (shortHex.test(text)) {
|
||||||
|
const raw = text.slice(1);
|
||||||
|
hex = `${raw[0]}${raw[0]}${raw[1]}${raw[1]}${raw[2]}${raw[2]}`;
|
||||||
|
} else if (longHex.test(text)) {
|
||||||
|
hex = text.slice(1);
|
||||||
|
} else {
|
||||||
|
return text || `rgba(155,107,194,${safeAlpha})`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const r = parseInt(hex.slice(0, 2), 16);
|
||||||
|
const g = parseInt(hex.slice(2, 4), 16);
|
||||||
|
const b = parseInt(hex.slice(4, 6), 16);
|
||||||
|
return `rgba(${r},${g},${b},${safeAlpha})`;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -137,6 +166,14 @@ const DEFAULT_SANKEY_FILE_PATHS = [
|
|||||||
'data/sankey.xlsx',
|
'data/sankey.xlsx',
|
||||||
'miniapp/data/sankey.xlsx'
|
'miniapp/data/sankey.xlsx'
|
||||||
];
|
];
|
||||||
|
const DEFAULT_THEME_ID = 'figma-violet';
|
||||||
|
const DEFAULT_THEME_INDEX = (() => {
|
||||||
|
if (!Array.isArray(themePresets) || themePresets.length === 0) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
const index = themePresets.findIndex((item) => item && item.id === DEFAULT_THEME_ID);
|
||||||
|
return index >= 0 ? index : 0;
|
||||||
|
})();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 数值限制，避免 UI 参数导致布局异常。
|
* 数值限制，避免 UI 参数导致布局异常。
|
||||||
@@ -256,6 +293,10 @@ function buildSankeyLayout(links, width, height, renderOptions) {
|
|||||||
|
|
||||||
const sourceNames = Object.keys(sourceValueMap);
|
const sourceNames = Object.keys(sourceValueMap);
|
||||||
const targetNames = Object.keys(targetValueMap);
|
const targetNames = Object.keys(targetValueMap);
|
||||||
|
const sourceIndexMap = {};
|
||||||
|
sourceNames.forEach((name, index) => {
|
||||||
|
sourceIndexMap[name] = index;
|
||||||
|
});
|
||||||
const totalValue = sourceNames.reduce((sum, name) => sum + sourceValueMap[name], 0);
|
const totalValue = sourceNames.reduce((sum, name) => sum + sourceValueMap[name], 0);
|
||||||
if (totalValue <= 0) {
|
if (totalValue <= 0) {
|
||||||
return null;
|
return null;
|
||||||
@@ -329,7 +370,8 @@ function buildSankeyLayout(links, width, height, renderOptions) {
|
|||||||
controlX,
|
controlX,
|
||||||
sy,
|
sy,
|
||||||
ty,
|
ty,
|
||||||
linkHeight
|
linkHeight,
|
||||||
|
sourceIndex: Number.isFinite(sourceIndexMap[link.source]) ? sourceIndexMap[link.source] : 0
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -354,6 +396,12 @@ function buildSankeySvgText(links, width, height, renderOptions) {
|
|||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
const labelPositionMode = (renderOptions && renderOptions.labelPositionMode) || 'inner';
|
const labelPositionMode = (renderOptions && renderOptions.labelPositionMode) || 'inner';
|
||||||
|
const themeColors =
|
||||||
|
renderOptions &&
|
||||||
|
Array.isArray(renderOptions.themeColors) &&
|
||||||
|
renderOptions.themeColors.length > 0
|
||||||
|
? renderOptions.themeColors
|
||||||
|
: FALLBACK_THEME_COLORS;
|
||||||
|
|
||||||
const segments = [];
|
const segments = [];
|
||||||
segments.push(
|
segments.push(
|
||||||
@@ -372,7 +420,10 @@ function buildSankeySvgText(links, width, height, renderOptions) {
|
|||||||
segment.endX
|
segment.endX
|
||||||
)} ${formatSvgNumber(segment.ty)}`;
|
)} ${formatSvgNumber(segment.ty)}`;
|
||||||
segments.push(
|
segments.push(
|
||||||
`<path d="${pathData}" fill="none" stroke="#9b6bc2" stroke-opacity="0.35" stroke-width="${formatSvgNumber(
|
`<path d="${pathData}" fill="none" stroke="${toRgbaColor(
|
||||||
|
getNodeColor(segment.sourceIndex, themeColors),
|
||||||
|
0.35
|
||||||
|
)}" stroke-width="${formatSvgNumber(
|
||||||
segment.linkHeight
|
segment.linkHeight
|
||||||
)}" stroke-linecap="round" />`
|
)}" stroke-linecap="round" />`
|
||||||
);
|
);
|
||||||
@@ -385,7 +436,7 @@ function buildSankeySvgText(links, width, height, renderOptions) {
|
|||||||
segments.push(
|
segments.push(
|
||||||
`<rect x="${formatSvgNumber(layout.leftX)}" y="${formatSvgNumber(node.y)}" width="${formatSvgNumber(
|
`<rect x="${formatSvgNumber(layout.leftX)}" y="${formatSvgNumber(node.y)}" width="${formatSvgNumber(
|
||||||
layout.nodeWidth
|
layout.nodeWidth
|
||||||
)}" height="${formatSvgNumber(node.h)}" fill="${getNodeColor(index)}" />`
|
)}" height="${formatSvgNumber(node.h)}" fill="${getNodeColor(index, themeColors)}" />`
|
||||||
);
|
);
|
||||||
segments.push(
|
segments.push(
|
||||||
`<text x="${formatSvgNumber(textPlacement.x)}" y="${formatSvgNumber(textY)}" fill="#4e5969" font-size="10" text-anchor="${
|
`<text x="${formatSvgNumber(textPlacement.x)}" y="${formatSvgNumber(textY)}" fill="#4e5969" font-size="10" text-anchor="${
|
||||||
@@ -401,7 +452,7 @@ function buildSankeySvgText(links, width, height, renderOptions) {
|
|||||||
segments.push(
|
segments.push(
|
||||||
`<rect x="${formatSvgNumber(layout.rightX)}" y="${formatSvgNumber(node.y)}" width="${formatSvgNumber(
|
`<rect x="${formatSvgNumber(layout.rightX)}" y="${formatSvgNumber(node.y)}" width="${formatSvgNumber(
|
||||||
layout.nodeWidth
|
layout.nodeWidth
|
||||||
)}" height="${formatSvgNumber(node.h)}" fill="${getNodeColor(index)}" />`
|
)}" height="${formatSvgNumber(node.h)}" fill="${getNodeColor(index, themeColors)}" />`
|
||||||
);
|
);
|
||||||
segments.push(
|
segments.push(
|
||||||
`<text x="${formatSvgNumber(textPlacement.x)}" y="${formatSvgNumber(textY)}" fill="#4e5969" font-size="10" text-anchor="${
|
`<text x="${formatSvgNumber(textPlacement.x)}" y="${formatSvgNumber(textY)}" fill="#4e5969" font-size="10" text-anchor="${
|
||||||
@@ -416,7 +467,8 @@ function buildSankeySvgText(links, width, height, renderOptions) {
|
|||||||
|
|
||||||
Page({
|
Page({
|
||||||
data: {
|
data: {
|
||||||
selectedThemeIndex: 1,
|
selectedThemeIndex: DEFAULT_THEME_INDEX,
|
||||||
|
themes: Array.isArray(themePresets) ? themePresets : [],
|
||||||
showThemeSheet: false,
|
showThemeSheet: false,
|
||||||
uploadMessage: '默认加载 data/sankey.xlsx 中...',
|
uploadMessage: '默认加载 data/sankey.xlsx 中...',
|
||||||
parseError: '',
|
parseError: '',
|
||||||
@@ -525,6 +577,37 @@ Page({
|
|||||||
this.setData({ showThemeSheet: false });
|
this.setData({ showThemeSheet: false });
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 返回当前选中主题色带。
|
||||||
|
*/
|
||||||
|
getCurrentThemeColors() {
|
||||||
|
const themes = this.data.themes || [];
|
||||||
|
const selectedTheme = themes[this.data.selectedThemeIndex] || themes[0];
|
||||||
|
if (!selectedTheme || !Array.isArray(selectedTheme.colors) || selectedTheme.colors.length === 0) {
|
||||||
|
return FALLBACK_THEME_COLORS;
|
||||||
|
}
|
||||||
|
return selectedTheme.colors;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 选择主题后立即生效，并关闭底部主题弹层。
|
||||||
|
*/
|
||||||
|
onSelectTheme(e) {
|
||||||
|
const index = Number(e.currentTarget.dataset.index);
|
||||||
|
if (Number.isNaN(index)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.setData(
|
||||||
|
{
|
||||||
|
selectedThemeIndex: index,
|
||||||
|
showThemeSheet: false
|
||||||
|
},
|
||||||
|
() => {
|
||||||
|
this.drawSankey();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 更新“节点间距”下拉值并立即重绘。
|
* 更新“节点间距”下拉值并立即重绘。
|
||||||
*/
|
*/
|
||||||
@@ -931,6 +1014,7 @@ Page({
|
|||||||
drawSankey() {
|
drawSankey() {
|
||||||
const rawLinks = this.data.sankeyLinks || [];
|
const rawLinks = this.data.sankeyLinks || [];
|
||||||
const links = applyDirection(rawLinks, this.data.direction);
|
const links = applyDirection(rawLinks, this.data.direction);
|
||||||
|
const themeColors = this.getCurrentThemeColors();
|
||||||
const query = wx.createSelectorQuery().in(this);
|
const query = wx.createSelectorQuery().in(this);
|
||||||
query.select('#sankeyCanvas').boundingClientRect();
|
query.select('#sankeyCanvas').boundingClientRect();
|
||||||
query.exec((res) => {
|
query.exec((res) => {
|
||||||
@@ -960,7 +1044,7 @@ Page({
|
|||||||
}
|
}
|
||||||
|
|
||||||
layout.linkSegments.forEach((segment) => {
|
layout.linkSegments.forEach((segment) => {
|
||||||
ctx.setStrokeStyle('rgba(155,107,194,0.35)');
|
ctx.setStrokeStyle(toRgbaColor(getNodeColor(segment.sourceIndex, themeColors), 0.35));
|
||||||
ctx.setLineWidth(segment.linkHeight);
|
ctx.setLineWidth(segment.linkHeight);
|
||||||
ctx.setLineCap('round');
|
ctx.setLineCap('round');
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
@@ -979,7 +1063,7 @@ Page({
|
|||||||
layout.sourceNames.forEach((name, index) => {
|
layout.sourceNames.forEach((name, index) => {
|
||||||
const node = layout.sourcePos[name];
|
const node = layout.sourcePos[name];
|
||||||
const labelPlacement = getCanvasLabelPlacement(layout, true, this.data.labelPositionMode);
|
const labelPlacement = getCanvasLabelPlacement(layout, true, this.data.labelPositionMode);
|
||||||
ctx.setFillStyle(getNodeColor(index));
|
ctx.setFillStyle(getNodeColor(index, themeColors));
|
||||||
ctx.fillRect(layout.leftX, node.y, layout.nodeWidth, node.h);
|
ctx.fillRect(layout.leftX, node.y, layout.nodeWidth, node.h);
|
||||||
ctx.setFillStyle('#4e5969');
|
ctx.setFillStyle('#4e5969');
|
||||||
ctx.setFontSize(10);
|
ctx.setFontSize(10);
|
||||||
@@ -991,7 +1075,7 @@ Page({
|
|||||||
layout.targetNames.forEach((name, index) => {
|
layout.targetNames.forEach((name, index) => {
|
||||||
const node = layout.targetPos[name];
|
const node = layout.targetPos[name];
|
||||||
const labelPlacement = getCanvasLabelPlacement(layout, false, this.data.labelPositionMode);
|
const labelPlacement = getCanvasLabelPlacement(layout, false, this.data.labelPositionMode);
|
||||||
ctx.setFillStyle(getNodeColor(index));
|
ctx.setFillStyle(getNodeColor(index, themeColors));
|
||||||
ctx.fillRect(layout.rightX, node.y, layout.nodeWidth, node.h);
|
ctx.fillRect(layout.rightX, node.y, layout.nodeWidth, node.h);
|
||||||
ctx.setFillStyle('#4e5969');
|
ctx.setFillStyle('#4e5969');
|
||||||
ctx.setFontSize(10);
|
ctx.setFontSize(10);
|
||||||
@@ -1049,6 +1133,7 @@ Page({
|
|||||||
onExportSvg() {
|
onExportSvg() {
|
||||||
const rawLinks = this.data.sankeyLinks || [];
|
const rawLinks = this.data.sankeyLinks || [];
|
||||||
const links = applyDirection(rawLinks, this.data.direction);
|
const links = applyDirection(rawLinks, this.data.direction);
|
||||||
|
const themeColors = this.getCurrentThemeColors();
|
||||||
if (!Array.isArray(links) || links.length === 0) {
|
if (!Array.isArray(links) || links.length === 0) {
|
||||||
wx.showToast({
|
wx.showToast({
|
||||||
title: '暂无可导出的数据',
|
title: '暂无可导出的数据',
|
||||||
@@ -1073,7 +1158,8 @@ Page({
|
|||||||
nodeGap: this.data.nodeGap,
|
nodeGap: this.data.nodeGap,
|
||||||
chartPadding: this.data.chartPadding,
|
chartPadding: this.data.chartPadding,
|
||||||
labelPositionMode: this.data.labelPositionMode,
|
labelPositionMode: this.data.labelPositionMode,
|
||||||
targetAlignMode: this.data.targetAlignMode
|
targetAlignMode: this.data.targetAlignMode,
|
||||||
|
themeColors
|
||||||
});
|
});
|
||||||
if (!svgText) {
|
if (!svgText) {
|
||||||
wx.showToast({
|
wx.showToast({
|
||||||
|
|||||||
@@ -156,12 +156,30 @@
|
|||||||
<view class="theme-sheet-mask" wx:if="{{showThemeSheet}}" bindtap="onCloseThemeSheet" />
|
<view class="theme-sheet-mask" wx:if="{{showThemeSheet}}" bindtap="onCloseThemeSheet" />
|
||||||
<view class="theme-sheet" wx:if="{{showThemeSheet}}">
|
<view class="theme-sheet" wx:if="{{showThemeSheet}}">
|
||||||
<text class="theme-title">选择配色主题</text>
|
<text class="theme-title">选择配色主题</text>
|
||||||
<view class="theme-row" wx:for="{{4}}" wx:key="index">
|
<scroll-view class="theme-list" scroll-y enhanced show-scrollbar="true">
|
||||||
<image
|
<view
|
||||||
src="{{selectedThemeIndex === index ? '../../assets/icons/radiobutton.svg' : '../../assets/icons/radiobutton-no.svg'}}"
|
class="theme-row"
|
||||||
mode="aspectFit"
|
wx:for="{{themes}}"
|
||||||
/>
|
wx:key="id"
|
||||||
<view class="theme-bar" />
|
wx:for-item="theme"
|
||||||
</view>
|
wx:for-index="themeIndex"
|
||||||
|
data-index="{{themeIndex}}"
|
||||||
|
bindtap="onSelectTheme"
|
||||||
|
>
|
||||||
|
<image
|
||||||
|
src="{{selectedThemeIndex === themeIndex ? '../../assets/icons/radiobutton.svg' : '../../assets/icons/radiobutton-no.svg'}}"
|
||||||
|
mode="aspectFit"
|
||||||
|
/>
|
||||||
|
<view class="theme-bar">
|
||||||
|
<view
|
||||||
|
class="theme-color"
|
||||||
|
wx:for="{{theme.colors}}"
|
||||||
|
wx:key="*this"
|
||||||
|
wx:for-item="color"
|
||||||
|
style="background-color: {{color}};"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -385,8 +385,9 @@
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 16px 16px 0 0;
|
border-radius: 16px 16px 0 0;
|
||||||
padding: 12px;
|
padding: 12px 12px 16px;
|
||||||
z-index: 11;
|
z-index: 11;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-title {
|
.theme-title {
|
||||||
@@ -395,11 +396,21 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-row {
|
.theme-list {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
|
height: 216px;
|
||||||
|
min-height: 216px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-row + .theme-row {
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-row image {
|
.theme-row image {
|
||||||
@@ -411,5 +422,11 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background: linear-gradient(90deg, #f72585, #3f37c9, #4cc9f0);
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user