mirror of
https://github.com/lutinglt/gitea-github-theme.git
synced 2025-10-27 05:31:04 +00:00
颜色变量计算&颜色主题迁移
This commit is contained in:
lutinglt
@@ -1,13 +0,0 @@
|
||||
import { defineTheme } from "src";
|
||||
import dark_theme from "themes/dark";
|
||||
|
||||
export default defineTheme({
|
||||
...dark_theme,
|
||||
color: {
|
||||
...dark_theme.color,
|
||||
primary: {
|
||||
...dark_theme.color.primary,
|
||||
hover: "pink",
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -1,52 +1,172 @@
|
||||
import type { Primary } from "src/types";
|
||||
import type { Based, Console, Diff } from "src";
|
||||
import { defineTheme, themeVars } from "src";
|
||||
|
||||
const dark = {
|
||||
num1: "#739cb3",
|
||||
num2: "#40aaff",
|
||||
num3: "#92b4c4",
|
||||
num4: "#a1bbcd",
|
||||
num5: "#cfddc1",
|
||||
num6: "#e7eee0",
|
||||
num7: "#f8faf6",
|
||||
const console: Console = {
|
||||
fg: {
|
||||
self: "#f0f6fc",
|
||||
subtle: "#9198a1",
|
||||
},
|
||||
bg: "#010409",
|
||||
border: "#2b3139",
|
||||
active: {
|
||||
bg: "#2a313c",
|
||||
},
|
||||
hover: {
|
||||
bg: "#15191f",
|
||||
},
|
||||
menu: {
|
||||
bg: themeVars.color.body,
|
||||
border: themeVars.color.light.border,
|
||||
},
|
||||
};
|
||||
|
||||
const light = {
|
||||
num1: themeVars.color.primary.self,
|
||||
num2: "#437aad",
|
||||
num3: "#415b8b",
|
||||
num4: "#25425a",
|
||||
num5: "#223546",
|
||||
num6: "#131923",
|
||||
num7: "#06090b",
|
||||
const diff: Diff = {
|
||||
added: {
|
||||
linenum: {
|
||||
bg: "#1c4428",
|
||||
},
|
||||
row: {
|
||||
bg: "#12261e",
|
||||
border: "#314a37",
|
||||
},
|
||||
word: {
|
||||
bg: "#1d572d",
|
||||
},
|
||||
},
|
||||
removed: {
|
||||
linenum: {
|
||||
bg: "#542426",
|
||||
},
|
||||
row: {
|
||||
bg: "#25171c",
|
||||
border: "#634343",
|
||||
},
|
||||
word: {
|
||||
bg: "#792e2d",
|
||||
},
|
||||
},
|
||||
moved: {
|
||||
row: {
|
||||
bg: "#818044",
|
||||
border: "#bcca6f",
|
||||
},
|
||||
},
|
||||
inactive: "#353846",
|
||||
};
|
||||
|
||||
const alpha = {
|
||||
num10: "#3683c019",
|
||||
num20: "#3683c033",
|
||||
num30: "#3683c04b",
|
||||
num40: "#3683c066",
|
||||
num50: "#3683c080",
|
||||
num60: "#3683c099",
|
||||
num70: "#3683c0b3",
|
||||
num80: "#3683c0cc",
|
||||
num90: "#3683c0e1",
|
||||
};
|
||||
|
||||
const primary: Primary = {
|
||||
self: themeVars.color.blue,
|
||||
contrast: "#fff",
|
||||
dark,
|
||||
light,
|
||||
alpha,
|
||||
hover: light.num1,
|
||||
active: light.num2,
|
||||
const based: Based = {
|
||||
git: "#f05133",
|
||||
body: "#0d1117",
|
||||
box: {
|
||||
header: "#151b23",
|
||||
body: {
|
||||
self: "#0d1117",
|
||||
highlight: "#262c36",
|
||||
},
|
||||
},
|
||||
text: {
|
||||
self: "#dce2e7",
|
||||
dark: "#dbe0ea",
|
||||
light: {
|
||||
self: "#a6aab5",
|
||||
num1: "rgb(125, 133, 144)",
|
||||
num2: "#8a8e99",
|
||||
num3: "#707687",
|
||||
},
|
||||
},
|
||||
footer: "#010409",
|
||||
timeline: "#4c525e",
|
||||
input: {
|
||||
text: "#d5dbe6",
|
||||
background: "#2c2f35",
|
||||
toggleBackgound: "#454a57",
|
||||
border: {
|
||||
self: themeVars.color.light.border,
|
||||
hover: themeVars.color.light.border,
|
||||
},
|
||||
},
|
||||
light: {
|
||||
self: "#00000028",
|
||||
mimicEnabled: "rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)))",
|
||||
border: "#3d444d",
|
||||
},
|
||||
hover: {
|
||||
self: "#656c7633",
|
||||
opaque: "#656c7666",
|
||||
},
|
||||
active: "#161a21",
|
||||
menu: "#0d1117",
|
||||
card: "#0d1117",
|
||||
markup: {
|
||||
tableRow: "#ffffff06",
|
||||
code: {
|
||||
block: "#ffffff16",
|
||||
inline: "#ffffff26",
|
||||
},
|
||||
},
|
||||
button: "#212830",
|
||||
codeBg: "#0d1117",
|
||||
shadow: {
|
||||
self: "#00000060",
|
||||
opaque: "#00000080",
|
||||
},
|
||||
secondaryBg: "#ffffff26",
|
||||
expandButton: "#3c404d",
|
||||
placeholderText: "#8a8e99",
|
||||
editorLineHighlight: themeVars.color.primary.light.num5,
|
||||
projectColumnBg: themeVars.color.secondary.light.num2,
|
||||
caret: themeVars.color.text.self,
|
||||
reaction: {
|
||||
bg: "#ffffff12",
|
||||
hoverBg: themeVars.color.primary.light.num4,
|
||||
activeBg: themeVars.color.primary.light.num5,
|
||||
},
|
||||
tooltip: {
|
||||
text: "#fff",
|
||||
bg: "#000000f0",
|
||||
},
|
||||
nav: {
|
||||
bg: "#010409",
|
||||
hoverBg: themeVars.color.hover.self,
|
||||
text: themeVars.color.text.self,
|
||||
},
|
||||
secondaryNavBg: "#181c20",
|
||||
label: {
|
||||
text: "#fff",
|
||||
bg: "#7c84974b",
|
||||
hoverBg: "#7c8497a0",
|
||||
activeBg: "#7c8497",
|
||||
},
|
||||
accent: themeVars.color.primary.light.num1,
|
||||
smallAccent: themeVars.color.primary.light.num5,
|
||||
highlight: {
|
||||
bg: "#87651e",
|
||||
fg: "#352c1c",
|
||||
},
|
||||
overlayBackdrop: "#080808c0",
|
||||
};
|
||||
|
||||
export default defineTheme({
|
||||
isDarkTheme: "true",
|
||||
color: {
|
||||
blue: "blue",
|
||||
primary: primary,
|
||||
},
|
||||
isDarkTheme: true,
|
||||
primary: "#4493f8",
|
||||
primaryContrast: "#fff",
|
||||
secondary: "#3d444d",
|
||||
red: "#da3737",
|
||||
orange: "#f17a2b",
|
||||
yellow: "#f3c640",
|
||||
olive: "#c8df36",
|
||||
green: "#39d353",
|
||||
teal: "#69d4cf",
|
||||
blue: "#4493f8",
|
||||
violet: "#754ad3",
|
||||
purple: "#8957e5",
|
||||
pink: "#e04b9f",
|
||||
brown: "#a86d45",
|
||||
black: "#141516",
|
||||
grey: "#505665",
|
||||
gold: "#b1983b",
|
||||
white: "#ffffff",
|
||||
console,
|
||||
diff,
|
||||
based,
|
||||
});
|
||||
|
||||
@@ -1,268 +0,0 @@
|
||||
/* Made by Luting ^-^ */
|
||||
:root {
|
||||
--is-dark-theme: true;
|
||||
--border-radius: 6px;
|
||||
|
||||
--color-primary: var(--color-blue);
|
||||
--color-primary-contrast: #fff;
|
||||
--color-primary-dark-1: #739cb3;
|
||||
--color-primary-dark-2: #40aaff;
|
||||
--color-primary-dark-3: #92b4c4;
|
||||
--color-primary-dark-4: #a1bbcd;
|
||||
--color-primary-dark-5: #cfddc1;
|
||||
--color-primary-dark-6: #e7eee0;
|
||||
--color-primary-dark-7: #f8faf6;
|
||||
--color-primary-light-1: var(--color-blue);
|
||||
--color-primary-light-2: #437aad;
|
||||
--color-primary-light-3: #415b8b;
|
||||
--color-primary-light-4: #25425a;
|
||||
--color-primary-light-5: #223546;
|
||||
--color-primary-light-6: #131923;
|
||||
--color-primary-light-7: #06090b;
|
||||
--color-primary-alpha-10: #3683c019;
|
||||
--color-primary-alpha-20: #3683c033;
|
||||
--color-primary-alpha-30: #3683c04b;
|
||||
--color-primary-alpha-40: #3683c066;
|
||||
--color-primary-alpha-50: #3683c080;
|
||||
--color-primary-alpha-60: #3683c099;
|
||||
--color-primary-alpha-70: #3683c0b3;
|
||||
--color-primary-alpha-80: #3683c0cc;
|
||||
--color-primary-alpha-90: #3683c0e1;
|
||||
--color-primary-hover: var(--color-primary-light-1);
|
||||
--color-primary-active: var(--color-primary-light-2);
|
||||
|
||||
--color-secondary: #3d444d;
|
||||
--color-secondary-dark-1: #505665;
|
||||
--color-secondary-dark-2: #5b6273;
|
||||
--color-secondary-dark-3: #71798e;
|
||||
--color-secondary-dark-4: #7f8699;
|
||||
--color-secondary-dark-5: #8c93a4;
|
||||
--color-secondary-dark-6: #9aa0af;
|
||||
--color-secondary-dark-7: #a8adba;
|
||||
--color-secondary-dark-8: #c4c7d0;
|
||||
--color-secondary-dark-9: #dfe1e6;
|
||||
--color-secondary-dark-10: #edeef1;
|
||||
--color-secondary-dark-11: #fbfbfc;
|
||||
--color-secondary-dark-12: #eeeff2;
|
||||
--color-secondary-dark-13: #fbfbfc;
|
||||
--color-secondary-light-1: #373b46;
|
||||
--color-secondary-light-2: #292c34;
|
||||
--color-secondary-light-3: #1c1e23;
|
||||
--color-secondary-light-4: #0e0f11;
|
||||
--color-secondary-alpha-10: #2c2f35;
|
||||
--color-secondary-alpha-20: #2c2f3533;
|
||||
--color-secondary-alpha-30: #2c2f354b;
|
||||
--color-secondary-alpha-40: #2c2f3566;
|
||||
--color-secondary-alpha-50: #ffffff28;
|
||||
--color-secondary-alpha-60: #161b22;
|
||||
--color-secondary-alpha-70: #2c2f35b3;
|
||||
--color-secondary-alpha-80: #2c2f35cc;
|
||||
--color-secondary-alpha-90: #2c2f35e1;
|
||||
|
||||
--color-red: #da3737;
|
||||
--color-orange: #f17a2b;
|
||||
--color-yellow: #f3c640;
|
||||
--color-olive: #c8df36;
|
||||
--color-green: #39d353;
|
||||
--color-teal: #69d4cf;
|
||||
--color-blue: #4493f8;
|
||||
--color-violet: #754ad3;
|
||||
--color-purple: #8957e5;
|
||||
--color-pink: #e04b9f;
|
||||
--color-brown: #a86d45;
|
||||
--color-black: #141516;
|
||||
--color-grey: #797c85;
|
||||
--color-gold: #d4b74c;
|
||||
--color-white: #ffffff;
|
||||
|
||||
--color-red-light: #d15a5a;
|
||||
--color-orange-light: #f6a066;
|
||||
--color-yellow-light: #eaaf03;
|
||||
--color-olive-light: #abc016;
|
||||
--color-green-light: #93b373;
|
||||
--color-teal-light: #00b6ad;
|
||||
--color-blue-light: #4e96cc;
|
||||
--color-violet-light: #9b79e4;
|
||||
--color-purple-light: #ba6ad5;
|
||||
--color-pink-light: #d74397;
|
||||
--color-brown-light: #b08061;
|
||||
--color-black-light: #3f4555;
|
||||
|
||||
--color-red-dark-1: #c23636;
|
||||
--color-orange-dark-1: #f38236;
|
||||
--color-yellow-dark-1: #b88a03;
|
||||
--color-olive-dark-1: #839311;
|
||||
--color-green-dark-1: #238636;
|
||||
--color-teal-dark-1: #00837c;
|
||||
--color-blue-dark-1: #347cb3;
|
||||
--color-violet-dark-1: #7b4edb;
|
||||
--color-purple-dark-1: #a742c9;
|
||||
--color-pink-dark-1: #be297d;
|
||||
--color-brown-dark-1: #94674a;
|
||||
--color-black-dark-1: #292d38;
|
||||
|
||||
--color-red-dark-2: #ad3030;
|
||||
--color-orange-dark-2: #f16e17;
|
||||
--color-yellow-dark-2: #a37a02;
|
||||
--color-olive-dark-2: #74820f;
|
||||
--color-green-dark-2: #6c8c4c;
|
||||
--color-teal-dark-2: #00746e;
|
||||
--color-blue-dark-2: #2e6e9f;
|
||||
--color-violet-dark-2: #6733d6;
|
||||
--color-purple-dark-2: #9834b9;
|
||||
--color-pink-dark-2: #a9246f;
|
||||
--color-brown-dark-2: #835b42;
|
||||
--color-black-dark-2: #252832;
|
||||
|
||||
--color-ansi-black: var(--color-black);
|
||||
--color-ansi-red: var(--color-red);
|
||||
--color-ansi-green: var(--color-green);
|
||||
--color-ansi-yellow: var(--color-yellow);
|
||||
--color-ansi-blue: var(--color-blue);
|
||||
--color-ansi-magenta: var(--color-pink);
|
||||
--color-ansi-cyan: var(--color-teal);
|
||||
--color-ansi-white: var(--color-console-fg-subtle);
|
||||
--color-ansi-bright-black: var(--color-black-light);
|
||||
--color-ansi-bright-red: var(--color-red-light);
|
||||
--color-ansi-bright-green: var(--color-green-light);
|
||||
--color-ansi-bright-yellow: var(--color-yellow-light);
|
||||
--color-ansi-bright-blue: var(--color-blue-light);
|
||||
--color-ansi-bright-magenta: var(--color-pink-light);
|
||||
--color-ansi-bright-cyan: var(--color-teal-light);
|
||||
--color-ansi-bright-white: var(--color-console-fg);
|
||||
|
||||
--color-console-fg: #f0f6fc;
|
||||
--color-console-fg-subtle: #9198a1;
|
||||
--color-console-bg: #010409;
|
||||
--color-console-border: #2b3139;
|
||||
--color-console-active-bg: #2a313c;
|
||||
--color-console-hover-bg: #15191f;
|
||||
--color-console-menu-bg: var(--color-body);
|
||||
--color-console-menu-border: var(--color-light-border);
|
||||
|
||||
--color-grey: #505665;
|
||||
--color-grey-light: #a1a6b7;
|
||||
--color-gold: #b1983b;
|
||||
--color-white: #fff;
|
||||
|
||||
--color-diff-removed-word-bg: #792e2d;
|
||||
--color-diff-added-word-bg: #1d572d;
|
||||
--color-diff-removed-row-bg: #25171c;
|
||||
--color-diff-moved-row-bg: #818044;
|
||||
--color-diff-added-row-bg: #12261e;
|
||||
--color-diff-removed-row-border: #634343;
|
||||
--color-diff-moved-row-border: #bcca6f;
|
||||
--color-diff-added-row-border: #314a37;
|
||||
--color-diff-inactive: #353846;
|
||||
|
||||
--color-error-border: #792e2e;
|
||||
--color-error-bg: #26181d;
|
||||
--color-error-bg-active: #744;
|
||||
--color-error-bg-hover: #633;
|
||||
--color-error-text: #f85149;
|
||||
|
||||
--color-success-border: #1d572d;
|
||||
--color-success-bg: #12261e;
|
||||
--color-success-text: #39d353;
|
||||
|
||||
--color-warning-border: #624711;
|
||||
--color-warning-bg: #272115;
|
||||
--color-warning-text: #fbbd08;
|
||||
|
||||
--color-info-border: #214a81;
|
||||
--color-info-bg: #121d2f;
|
||||
--color-info-text: #4493f8;
|
||||
|
||||
--color-red-badge: #db2828;
|
||||
--color-red-badge-bg: #db28281a;
|
||||
--color-red-badge-hover-bg: #db28284d;
|
||||
|
||||
--color-green-badge: #39d353;
|
||||
--color-green-badge-bg: #12261e;
|
||||
--color-green-badge-hover-bg: #153d22;
|
||||
|
||||
--color-yellow-badge: #fbbd08;
|
||||
--color-yellow-badge-bg: #fbbd081a;
|
||||
--color-yellow-badge-hover-bg: #fbbd084d;
|
||||
|
||||
--color-orange-badge: #f2711c;
|
||||
--color-orange-badge-bg: #f2711c1a;
|
||||
--color-orange-badge-hover-bg: #f2711c4d;
|
||||
|
||||
--color-git: #f05133;
|
||||
--color-body: #0d1117;
|
||||
|
||||
--color-box-header: #151b23;
|
||||
--color-box-body: #0d1117;
|
||||
--color-box-body-highlight: #262c36;
|
||||
|
||||
--color-text-dark: #dbe0ea;
|
||||
--color-text: #dce2e7;
|
||||
--color-text-light: #a6aab5;
|
||||
--color-text-light-1: rgb(125, 133, 144);
|
||||
--color-text-light-2: #8a8e99;
|
||||
--color-text-light-3: #707687;
|
||||
|
||||
--color-footer: #010409;
|
||||
--color-timeline: #4c525e;
|
||||
|
||||
--color-input-text: #d5dbe6;
|
||||
--color-input-background: #2c2f35;
|
||||
--color-input-toggle-background: #454a57;
|
||||
--color-input-border: var(--color-light-border);
|
||||
--color-input-border-hover: var(--color-light-border);
|
||||
|
||||
--color-light: #00000028;
|
||||
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
|
||||
--color-light-border: #3d444d;
|
||||
|
||||
--color-hover: #656c7633;
|
||||
--color-hover-opaque: ;
|
||||
|
||||
--color-active: #161a21;
|
||||
--color-menu: #0d1117;
|
||||
--color-card: #0d1117;
|
||||
--color-markup-table-row: #ffffff06;
|
||||
--color-markup-code-block: #ffffff16;
|
||||
--color-markup-code-inline: ;
|
||||
|
||||
--color-button: #212830;
|
||||
--color-code-bg: #0d1117;
|
||||
|
||||
--color-shadow: #00000060;
|
||||
--color-shadow-opaque: ;
|
||||
|
||||
--color-secondary-bg: #ffffff26;
|
||||
|
||||
--color-expand-button: #3c404d;
|
||||
--color-placeholder-text: #8a8e99;
|
||||
--color-editor-line-highlight: var(--color-primary-light-5);
|
||||
--color-project-column-bg: var(--color-secondary-light-2);
|
||||
|
||||
--color-caret: var(--color-text);
|
||||
|
||||
--color-reaction-bg: #ffffff12;
|
||||
--color-reaction-hover-bg: var(--color-primary-light-4);
|
||||
--color-reaction-active-bg: var(--color-primary-light-5);
|
||||
|
||||
--color-tooltip-text: #fff;
|
||||
--color-tooltip-bg: #000000f0;
|
||||
|
||||
--color-nav-bg: #010409;
|
||||
--color-nav-hover-bg: var(--color-hover);
|
||||
--color-nav-text: ;
|
||||
--color-secondary-nav-bg: ;
|
||||
|
||||
--color-label-text: #fff;
|
||||
--color-label-bg: #7c84974b;
|
||||
--color-label-hover-bg: #7c8497a0;
|
||||
--color-label-active-bg: #7c8497;
|
||||
--color-accent: var(--color-primary-light-1);
|
||||
--color-small-accent: var(--color-primary-light-5);
|
||||
|
||||
--color-highlight-bg: ;
|
||||
--color-highlight-fg: ;
|
||||
--color-overlay-backdrop: ;
|
||||
accent-color: var(--color-accent);
|
||||
color-scheme: dark;
|
||||
}
|
||||
Reference in New Issue
Block a user