рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ рдЖрдк рдореЗрдВ рд╕реЗ рдХрдИ рдРрд╕реА рд╕реНрдерд┐рддрд┐ рдореЗрдВ рд╣реИрдВ, рдЬрд╣рд╛рдВ рдЖрдкрдХреЛ рд╕рдЬрд╛рд╡рдЯ рдХреЗ рд▓рд┐рдП рд░рдВрдЧреЛрдВ рдХреЛ рдЬрд▓реНрджреА рд╕реЗ рдЪреБрдирдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ, рдФрд░ рдбрд┐рдЬрд╛рдЗрдирд░ рдЕрдзрд┐рдХ рдорд╣рддреНрд╡рдкреВрд░реНрдг рдХрд╛рд░реНрдпреЛрдВ рдХреЗ рд╕рд╛рде, рдЦрд░рд╛рдм рдореВрдб рдореЗрдВ рдпрд╛ рдЫреБрдЯреНрдЯреА рдкрд░ рд╡реНрдпрд╕реНрдд рд╣реИред рдХрд╛рд░реНрдп рдореБрд╢реНрдХрд┐рд▓ рдирд╣реАрдВ рд╣реИ, рд▓реЗрдХрд┐рди рдХрднреА-рдХрднреА рдЖрдкрдХреЛ рдХрдИ рджрд┐рдиреЛрдВ рддрдХ рдЬрд╡рд╛рдм рдХрд╛ рдЗрдВрддрдЬрд╛рд░ рдХрд░рдирд╛ рдкрдбрд╝рддрд╛ рд╣реИредрдореЗрд░рд╛ рдирд╛рдо рдПрдорд┐рд▓ рдлреНрд░реЛрд▓реЛрд╡ рд╣реИ, рдореИрдВ рдбреЛрдордХреНрд▓рд┐рдХ рдореЗрдВ рдЖрдВрддрд░рд┐рдХ рд╕реЗрд╡рд╛рдУрдВ рдХреА рдЯреАрдо рдореЗрдВ рдПрдХ рдЯреЗрдХрд▓рд╛рдЗрдб рд╣реВрдВред рдЗрд╕ рд▓реЗрдЦ рдореЗрдВ рдореИрдВ рдЖрдкрдХреЛ рдмрддрд╛рдКрдВрдЧрд╛ рдХрд┐ рдПрдХ рдкреБрд╕реНрддрдХрд╛рд▓рдп рдХрд╛ рд╡рд┐рдЪрд╛рд░ рдХреИрд╕реЗ рдкреИрджрд╛ рд╣реБрдЖ рдерд╛, рдЬреЛ рдЕрдм рд░рдВрдЧреЛрдВ рдХрд╛ рдЪрдпрди рдХрд░рддреЗ рд╕рдордп рдмрд╣реБрдд рд╕рдордп рдмрдЪрд╛рддрд╛ рд╣реИред рд╕рдорд╛рдзрд╛рди рд╕рд░рд▓ рд╣реИ, рд▓реЗрдХрд┐рди рдмрд╣реБрдд рдЙрдкрдпреЛрдЧреА рд╣реИ, рдЗрд╕реЗ рд╕реЗрд╡рд╛ рдореЗрдВ рд▓реЗрдВредрдЦрд╛рд╕рдХрд░ рдпрджрд┐ рдЖрдкрдХреЛ рдЕрдВрдзреЗрд░реЗ рдпреЛрдЬрдирд╛ рдХреЗ рд▓рд┐рдП рд░рдВрдЧреЛрдВ рдХрд╛ рдЪрдпрди рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИредрдХрд╛рд░реНрдп
рдбреЛрдордХрд▓рд┐рдХ рдХреЗ рдкрд╛рд╕ рдПрдХ рдХреЙрд░реНрдкреЛрд░реЗрдЯ рдкреЛрд░реНрдЯрд▓ рд╣реИ, рдЬрд┐рд╕рдХреЗ рдкреНрд░рддреНрдпреЗрдХ рдЦрдВрдб рдХреА рдЕрдкрдиреА рд░рдВрдЧ рдпреЛрдЬрдирд╛ рд╣реИред рдкрд╣рд▓реЗ, рдПрдХ рдирдпрд╛ рдЦрдВрдб рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП, рд╣рд░ рдмрд╛рд░ рдореБрдЭреЗ рдбрд┐рдЬрд╛рдЗрдирд░реЛрдВ рдХреЛ рдкреАрдбрд╝рд╛ рджреЗрдирд╛ рдкрдбрд╝рд╛ рдФрд░ рдЙрдиреНрд╣реЗрдВ рд░рдВрдЧреЛрдВ рдХрд╛ рдПрдХ рдирдпрд╛ рд╕реЗрдЯ рдЪреБрдирдиреЗ рдФрд░ рдЙрдиреНрд╣реЗрдВ рдЗрдВрдЯрд░рдлрд╝реЗрд╕ рдкрд░ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд╣рд╛ред рдпрд╣ рдЕрддрд┐рд░рд┐рдХреНрдд рдХреЛрдб рдХреА рдПрдХ рдмрдбрд╝реА рд░рд╛рд╢рд┐ рдирд┐рдХрд▓рд╛, рдкрддреНрд░рд╛рдЪрд╛рд░, рдкреНрд░рддреАрдХреНрд╖рд╛ рдФрд░ рд╕рдордиреНрд╡рдп рдкрд░ рдмрд╣реБрдд рд╕рдордп рдмрд┐рддрд╛рдпрд╛ред рдореИрдВ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдкреВрд░реА рдкреНрд░рдХреНрд░рд┐рдпрд╛ рдХреЛ рд╕рд░рд▓ рдФрд░ рддреЗрдЬ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рдерд╛редрд╣рдордиреЗ рдЗрдВрдЯрд░рдиреЗрдЯ рдкрд░ рддреИрдпрд╛рд░ рд╕рдорд╛рдзрд╛рдиреЛрдВ рдХреА рддрд▓рд╛рд╢ рдХреА, рд▓реЗрдХрд┐рди рдХреБрдЫ рднреА рдЙрдкрдпреБрдХреНрдд рдирд╣реАрдВ рдорд┐рд▓рд╛ред рдФрд░ рдлрд┐рд░ рдЙрдиреНрд╣реЛрдВрдиреЗ рдПрдХ рдкреБрд╕реНрддрдХрд╛рд▓рдп рд▓рд┐рдЦрдиреЗ рдХрд╛ рдлреИрд╕рд▓рд╛ рдХрд┐рдпрд╛: рдЖрдк рд░рдВрдЧ (рдмреНрд░рд╛рдВрдб) рджрд░реНрдЬ рдХрд░рддреЗ рд╣реИрдВ рдЬреЛ рдбрд┐рдЬрд╛рдЗрдирд░ рджреЗрддрд╛ рд╣реИ, рдФрд░ рдкреБрд╕реНрддрдХрд╛рд▓рдп рдХреБрдЫ рдФрд░ рдЙрдкрдпреБрдХреНрдд рд░рдВрдЧреЛрдВ рдХрд╛ рдЪрдпрди рдХрд░рддрд╛ рд╣реИред рд╣рдо рдпрд╣ рднреА рдЪрд╛рд╣рддреЗ рдереЗ рдХрд┐ рдкреБрд╕реНрддрдХрд╛рд▓рдп рдореЗрдВ рднреА рдЧрд╣рд░реЗ рд░рдВрдЧ рдХреА рдпреЛрдЬрдирд╛рдПрдБ рдмрдиреЗрдВредрдпрд╣ рдЦреБрд╢реА рдХрд╛ рдиреБрд╕реНрдЦрд╛ рдирд╣реАрдВ рд╣реИ, рдмрд▓реНрдХрд┐ рдПрдХ рд╡рд┐рдЪрд╛рд░ рд╣реИ рдХрд┐ рд╣рд░ рдХреЛрдИ рдЕрдкрдиреА рдкрд░рд┐рдпреЛрдЬрдирд╛ рдХреЗ рдврд╛рдВрдЪреЗ рдХреЗ рднреАрддрд░ рд╡рд┐рдХрд╕рд┐рдд рд╣реЛ рд╕рдХрддрд╛ рд╣реИред рдЖрдк рдпрд╣рд╛рдВ рдПрдХ рдЫреЛрдЯрд╛ рдбреЗрдореЛ рджреЗрдЦ рд╕рдХрддреЗ рд╣реИрдВ ред
рд╡рд┐рдЪрд╛рд░ рдФрд░ рд╕рдорд╛рдзрд╛рди
рд╣рдордиреЗ рд╕реЛрдЪрд╛ рдХрд┐ рдпрд╣ рдХреИрд╕реЗ рдХрд░рдирд╛ рд╣реИред рд╣рдордиреЗ рдПрдХ рдмреЗрд╕рд┐рдХ-рдмреЗрд╕реНрдб рдХрд▓рд░-рдЬрдирд░реЗрд╢рди рдПрд▓реНрдЧреЛрд░рд┐рдердо рдХреЗ рд╕рд╛рде рд╢реБрд░реБрдЖрдд рдХреАред рддреБрдореНрд╣рд╛рд░рд╛ рдЗрди рдЗрдВрдЯрд░рдиреЗрдЯ рдкрд░ рдлрд┐рд░ рд╕реЗ рддреИрдпрд╛рд░ рдХреБрдЫ рднреА рдирд╣реАрдВ рдорд┐рд▓рд╛ред рд▓реЗрдХрд┐рди рдЙрдиреНрд╣реЗрдВ рдПрдХ рдкреБрд╕реНрддрдХрд╛рд▓рдп рдорд┐рд▓рд╛, рдЬреЛ рд╡рд┐рднрд┐рдиреНрди рд░рдВрдЧ рд╕реЗрдЯрд┐рдВрдЧреНрд╕ рдХреЛ рдмрджрд▓ рд╕рдХрддрд╛ рд╣реИредрдмрд╣реБрдд рд╕реЗ рд▓реЛрдЧ рдЬрд╛рдирддреЗ рд╣реИрдВ рдХрд┐ рдХрдИ рдЕрд▓рдЧ-рдЕрд▓рдЧ рд░рдВрдЧ рдорд┐рд▓рд╛рди рдПрд▓реНрдЧреЛрд░рд┐рджрдо рд╣реИрдВ:
рдореБрдЭреЗ рдЙрдиреНрд╣реЗрдВ рдЪрд┐рддреНрд░рд┐рдд рдХрд░рдиреЗ рдореЗрдВ рдХреЛрдИ рд╕рдордЭрджрд╛рд░реА рдирд╣реАрдВ рд╣реИ, рдЙрдиреНрд╣реЛрдВрдиреЗ рдореБрдЭрд╕реЗ рдкрд╣рд▓реЗ рд╕реИрдХрдбрд╝реЛрдВ рдмрд╛рд░ рдРрд╕рд╛ рдХрд┐рдпрд╛ рд╣реИред рд▓реЗрдХрд┐рди рдХреБрдЫ рдкреНрд░рдореБрдЦ рдмрд┐рдВрджреБ рд╣реИрдВ:- рд╣рдорд╛рд░реЗ рд▓рд┐рдП рд╡реЗ рдмреЗрдорд╛рдиреА рд╣реИрдВред
- рдореИрдВ рдЕрдкрдиреЗ рд▓рд┐рдП рд░рдВрдЧ рдЪреБрдирдирд╛ рдЪрд╛рд╣рддрд╛ рдерд╛ред
рдЗрд╕рд▓рд┐рдП, рдбрд┐рдЬрд╛рдЗрдирд░ рдФрд░ рдбреЗрд╡рд▓рдкрд░, рдПрдХ рд╣реА рдЖрд╡реЗрдЧ рдореЗрдВ рд╡рд┐рд▓реАрди рд╣реЛ рдЧрдП, рдпреЛрдЬрдирд╛ рдХреЛ рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗ рдПрдХ рдмрд╛рд░ рд▓реЗрдиреЗ рдХрд╛ рдлреИрд╕рд▓рд╛ рдХрд┐рдпрд╛редрд╢реБрд░реВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рд╣рдордиреЗ рдореВрд▓ рд░рдВрдЧреЛрдВ рдХрд╛ рд╡рд░реНрдгрди рдХрд┐рдпрд╛:export const getColors = (projectColor, inverse) => {
...
const BASE_SUCCESS = '#00985f';
const BASE_WARNING = '#ff9900';
const BASE_PROGRESS = '#fe5c05';
const BASE_ALERT = '#ff3333';
const BASE_SYSTEM = '#778a9b';
const BASE_NORMAL = '#dde3e5';
const BASE_WHITE = '#ffffff';
const BASE_BLACK = '#000';
const TYPO_BASE_BLACK = '#242629';
const TYPO_LINK = '#33BDFF';
...
}
рдЗрд╕рдХреЗ рдЖрдзрд╛рд░ рдкрд░, рдЖрдк рдмрдирд╛рдирд╛ рд╢реБрд░реВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рд╣рдореЗрдВ рдореВрд▓ рд░рдВрдЧреЛрдВ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╡рд╕реНрддреБрдПрдВ рдорд┐рд▓рддреА рд╣реИрдВред import color from 'color-js';
export const getColors = (projectColor, inverse) => {
...
const baseWhite = color(BASE_WHITE);
const baseBlack = color(BASE_BLACK);
const baseTypoBlack = color(TYPO_BASE_BLACK);
...
}
рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд░рдВрдЧреЛрдВ рдХреЗ рдкреВрд░реЗ рдЪрдпрди рдХрд╛ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рд╡рд░реНрдгрди рдХрд░рдиреЗ рдХрд╛ рдХреЛрдИ рдорддрд▓рдм рдирд╣реАрдВ рд╣реИ, рд▓реЗрдХрд┐рди рдПрдХ рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП рдореИрдВ рдХреБрдЫ рдкрдВрдХреНрддрд┐рдпрд╛рдБ рджреВрдВрдЧрд╛:export const getColors = (projectColor, inverse) => {
...
const bgBrand = baseProject;
const bgHard = baseColor.setLightness(0.4);
const bgSharp = baseColor.setLightness(0.18);
const bgStripe = baseColor.setLightness(0.1);
const bgGhost = baseColor.setLightness(0.07);
...
}
рдЬрдм рд╣рдордиреЗ рдкреНрд░рд╛рдердорд┐рдХ рд░рдВрдЧреЛрдВ рдХреЛ рдЪреБрдирдирд╛ рд╕рдорд╛рдкреНрдд рдХрд░ рд▓рд┐рдпрд╛, рддреЛ рд╣рдореЗрдВ рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░рдирд╛ рдкрдбрд╝рд╛редрдФрд░ рддрддреНрд╡реЛрдВ рдкрд░ рдкрд╛рда рдХрд┐рд╕ рд░рдВрдЧ рдХреЛ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░рддрд╛ рд╣реИ?рдпрд╣ рдХрд╛рд░реНрдп рдЙрддрдирд╛ рдХрдард┐рди рдирд╣реАрдВ рдерд╛ рдЬрд┐рддрдирд╛ рдХрд┐ рдпрд╣ рд▓рдЧ рд░рд╣рд╛ рдерд╛ред рд╣реЗрдХреНрд╕ рдореВрд▓реНрдп рд╕реЗ рдЗрд╕реЗ рд╣рд▓ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рд╣рдореЗрдВ рддрддреНрд╡ рдХреА рдЪрдордХ рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рд╣рдордиреЗ рджреЛ рд╕рд╣рд╛рдпрдХ рдХрд╛рд░реНрдпреЛрдВ рдХреЗ рд╕рд╛рде рдРрд╕рд╛ рдХрд┐рдпрд╛ред рдкрд╣рд▓рд╛ рдЕрдиреБрд╡рд╛рдж рд╣реЗрдХреНрд╕ рдЯреВ рдЖрд░рдЬреАрдмреА:const hexToRgb = (hex) => {
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
const newHex = hex.replace(shorthandRegex, (
magenta,
red,
green,
blue
) => red + red + green + green + blue + blue);
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(newHex);
return result ? {
red: parseInt(result[1], 16),
green: parseInt(result[2], 16),
blue: parseInt(result[3], 16)
} : null;
};
RGB рдХреЗ рджреВрд╕рд░реЗ рдлрдВрдХреНрд╢рди рд╕реЗ рдмреИрдХрдЧреНрд░рд╛рдЙрдВрдб рдХреА рдмреНрд░рд╛рдЗрдЯрдиреЗрд╕ рдорд┐рд▓рддреА рд╣реИ рдФрд░ рдпрд╣ рддрдп рд╣реЛрддрд╛ рд╣реИ рдХрд┐ рдХрд▓рд░ рдбрд╛рд░реНрдХ рд╣реИ рдпрд╛ рд▓рд╛рдЗрдЯ:export const getBgTextColor = (bgColor) => {
const rgb = hexToRgb(bgColor);
const light = (rgb.red * 0.8 + rgb.green + rgb.blue * 0.2) / 510 * 100;
return light > 70 ? '#000000' : '#ffffff';
};
рдЖрдк рд╕реЛрдЪ рд╕рдХрддреЗ рд╣реИрдВ рдХрд┐ рдЕрдм рд╕рдм рдХреБрдЫ рдЕрдЧрд▓реЗ рдЪрд░рдг рдХреЗ рд▓рд┐рдП рддреИрдпрд╛рд░ рд╣реИред рд▓реЗрдХрд┐рди рдирд╣реАрдВ, рд╣рдо рдЕрднреА рднреА рдмреЙрдХреНрд╕ рдХреЗ рдмрд╛рд╣рд░ рдПрдХ рдЕрдВрдзреЗрд░реЗ рд╡рд┐рд╖рдп рдХреЗ рд▓рд┐рдП рд╕рдорд░реНрдерди рдЪрд╛рд╣рддреЗ рд╣реИрдВ? рд╣рд╛рдБ! рд╣рдо рдЗрд╕реЗ рдЪрд╛рд╣рддреЗ рд╣реИрдВ!рдЖрдкрдиреЗ рд╢рд╛рдпрдж рдЧреМрд░ рдХрд┐рдпрд╛ рдХрд┐ рд╣рдо рдЕрдкрдиреЗ рд╕рдорд╛рд░реЛрд╣ рдореЗрдВ рдПрдХ рдЭрдВрдбрд╛ рдкрд╛рд╕ рдХрд░рддреЗ рд╣реИрдВ inverse
ред рдЖрдЗрдП рдЗрд╕ рдЭрдВрдбреЗ рдХреЛ рдзреНрдпрд╛рди рдореЗрдВ рд░рдЦрддреЗ рд╣реБрдП рдЕрдкрдирд╛ рдХреЛрдб рдереЛрдбрд╝рд╛ рдмрджрд▓реЗрдВ:import color from 'color-js';
export const getColors = (projectColor, inverse) => {
...
const BASE_SUCCESS = '#00985f';
const BASE_WARNING = '#ff9900';
const BASE_PROGRESS = '#fe5c05';
const BASE_ALERT = '#ff3333';
const BASE_SYSTEM = '#778a9b';
const BASE_NORMAL = '#dde3e5';
const BASE_WHITE = '#ffffff';
const BASE_BLACK = '#000';
const TYPO_BASE_BLACK = '#242629';
const TYPO_LINK = '#33BDFF';
...
const baseWhite = color(BASE_WHITE);
const baseBlack = color(BASE_BLACK);
const baseTypoBlack = color(TYPO_BASE_BLACK);
const baseColor = inverse ? baseWhite : baseBlack;
const typoColor = inverse ? baseWhite : baseTypoBlack;
...
const bgHard = inverse ? baseColor.setLightness(0.4) : baseColor.lightenByAmount(0.85);
const bgSharp = inverse ? baseColor.setLightness(0.18) : baseColor.lightenByAmount(0.95);
const bgStripe = inverse ? baseColor.setLightness(0.1) : baseColor.lightenByAmount(0.96);
const bgGhost = inverse ? baseColor.setLightness(0.07) : baseColor.lightenByAmount(0.99);
...
}
рдмрд╕ рдЗрддрдирд╛ рд╣реАред рд╣рдо рд░рдВрдЧреЛрдВ рдХреА рдПрдХ рд╕реВрдЪреА рджреЗ рд╕рдХрддреЗ рд╣реИрдВ:return {
...
'color-bg-hard': bgHard.toString(),
'color-bg-sharp': bgSharp.toString(),
'color-bg-stripe': bgStripe.toString(),
'color-bg-ghost': bgGhost.toString(),
'color-bg-primary': bgDefault.toString(),
...
}
рджреЛ рджрд┐рдиреЛрдВ рдореЗрдВ, рд╣рдорд╛рд░реЗ рдбрд┐рдЬрд╛рдЗрдирд░ рдХреА рдорджрдж рд╕реЗ, рдореИрдВрдиреЗ рдПрдХ рдкреБрд╕реНрддрдХрд╛рд▓рдп рдмрдирд╛рдпрд╛, рдЬреЛ рдЖрдЙрдЯрдкреБрдЯ рдкрд░ рдПрдХ рдЕрдВрдзреЗрд░реЗ рдФрд░ рд╣рд▓реНрдХреЗ рд╡рд┐рд╖рдп рдХреЗ рд▓рд┐рдП рдПрдХ рд░рдВрдЧ рдкреИрд▓реЗрдЯ рджреЗрддрд╛ рд╣реИредрдЕрдЧрд▓рд╛ рдкреНрд░рд╢реНрди: рдЗрд╕рдХрд╛ рдЙрдкрдпреЛрдЧ рдХреИрд╕реЗ рдХрд░реЗрдВ?рдмрд╣реБрдд рдЖрд╕рд╛рдиред рдЙрддреНрдкрдиреНрди рд░рдВрдЧ рдпреЛрдЬрдирд╛ рдХреЛ рд▓рд╛рдЧреВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рд╣рдордиреЗ рд╕реНрдЯрд╛рдЗрд▓ рдмреНрд▓реЙрдХ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рд╕реАрдПрд╕рдПрд╕ рдЪрд░ рдХрд╛ рд╕рдореНрдорд┐рд▓рди рдХрд┐рдпрд╛ред рдпрд╣ рд╕реАрдПрд╕рдПрд╕ рдЪрд░ рдХреЗ рд╕рд╛рде рд╕рдВрдШрд░реНрд╖ рд╕реЗ рдмрдЪрд╛ рдЬрд╛рддрд╛ рд╣реИ рдЬреЛ рдЕрдиреНрдп рд╕реАрдПрд╕рдПрд╕ рдкреБрд╕реНрддрдХрд╛рд▓рдпреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВред const colors = getColors(color, themeKey === 'dark');
const colorsVars = Object.keys(colors).map((key) => `--${key}: ${customColors[key]}`).join(';');
const link = document.createElement('style');
const headTag = document.getElementsByTagName('head')[0];
link.type = 'text/css';
link.id = 'project-theme-scope';
const stylesBody = `:root {${colorsVars}}`;
link.innerText = stylesBody;
headTag.append(link);
рдФрд░ рдЕрдм рд╕рдмрд╕реЗ рд╕реНрд╡рд╛рджрд┐рд╖реНрдЯред рдзреНрдпрд╛рди рджреЛ! рдЕрдм, рдХреБрдЫ рдкрдВрдХреНрддрд┐рдпреЛрдВ рдХреЗ рд╕рд╛рде, рдЬрдм рд╣рдо рдЖрдзреЗ рддрддреНрд╡реЛрдВ рдХреЗ рд▓рд┐рдП рдбрд╛рд░реНрдХ рдереАрдо рд╕рдкреЛрд░реНрдЯ рдЬреЛрдбрд╝рддреЗ рд╣реИрдВ: body {
background: var(--color-bg-ghost);
color: var(--color-typo-primary);
}
рдкрд░рд┐рдгрд╛рдо рдПрдХ рдкреБрд╕реНрддрдХрд╛рд▓рдп рд╣реИ рдЬрд┐рд╕рдореЗрдВ рд╣рдо рдореБрдЦреНрдп рдмреНрд░рд╛рдВрдб рд░рдВрдЧ рдкрд╛рд╕ рдХрд░рддреЗ рд╣реИрдВ рдФрд░ рд╕реАрдПрд╕рдПрд╕ рдЪрд░ рдХрд╛ рдПрдХ рд╕реЗрдЯ рдкреНрд░рд╛рдкреНрдд рдХрд░рддреЗ рд╣реИрдВ, рдЬрд┐рд╕реЗ рд╣рдо рддрдм рдЕрдкрдиреА рдкрд░рд┐рдпреЛрдЬрдирд╛ рдХреЛ рд░рдВрдЧ рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВредрдЬреНрдпрд╛рджрд╛рддрд░ рд╕рдордп рдПрдХ рд░рдВрдЧ рдпреЛрдЬрдирд╛ рдЪреБрдирдиреЗ рдкрд░ рдЦрд░реНрдЪ рдХрд┐рдпрд╛ рдЧрдпрд╛ рдерд╛ред рдореБрдЭреЗ рдЕрд▓рдЧ-рдЕрд▓рдЧ рдорд╛рдкрджрдВрдбреЛрдВ рдХреЗ рдПрдХ рдЧреБрдЪреНрдЫрд╛ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗ рд╕реЙрд░реНрдЯ рдХрд░рдирд╛ рдерд╛ рддрд╛рдХрд┐ рд░рдВрдЧреЛрдВ рдХреЛ рдПрдХ-рджреВрд╕рд░реЗ рдХреЗ рд╕рд╛рде рдЬреЛрдбрд╝рд╛ рдЬрд╛рдПред рд▓реЗрдХрд┐рди рдЕрдм, рдкреЛрд░реНрдЯрд▓ рдХреЗ рдирдП рд╡рд░реНрдЧреЛрдВ рдХреЗ рд▓рд┐рдП рд░рдВрдЧреЛрдВ рдХреЗ рдЪрдпрди рдХреЗ рдкреНрд░рддреНрдпреЗрдХ рдкреБрдирд░рд╛рд╡реГрддреНрддрд┐ рдкрд░, рд╣рдо рдХрдИ рджрд┐рдиреЛрдВ рддрдХ рдмрдЪрд╛рддреЗ рд╣реИрдВредрдЪреВрдВрдХрд┐ рдбрд┐рдЬрд╛рдЗрдирд░ рдиреЗ рдПрд▓реНрдЧреЛрд░рд┐рдереНрдо рдХреЗ рдирд┐рд░реНрдорд╛рдг рдореЗрдВ рднрд╛рдЧ рд▓рд┐рдпрд╛ рдерд╛, рддрдм рднреА рдХреЛрдИ рдорд╛рдорд▓рд╛ рдирд╣реАрдВ рдерд╛ рдХрд┐ рд╡рд╣ рдкреБрд╕реНрддрдХрд╛рд▓рдп рджреНрд╡рд╛рд░рд╛ рдЙрддреНрдкрдиреНрди рд░рдВрдЧреЛрдВ рд╕реЗ рдЕрд╕рдВрддреБрд╖реНрдЯ рдерд╛ред рд╣рд╛рдВ, рдФрд░ рд░рдВрдЧ рдпреЛрдЬрдирд╛рдПрдВ рдмрд╣реБрдд рдмрдбрд╝реА рдирд╣реАрдВ рд╣реИрдВ, рдЧрд▓рддрд┐рдпрд╛рдВ рдХрд░рдирд╛ рдореБрд╢реНрдХрд┐рд▓ рд╣реИредрдореИрдВ рдПрдХ рдмрд╛рд░ рдлрд┐рд░ рдЗрд╕ рдмрд╛рдд рдкрд░ рдЬреЛрд░ рджреЗрддрд╛ рд╣реВрдВ рдХрд┐ рд╣рдо рдХреЗрд╡рд▓ рд╕рд╣реА рдирд┐рд░реНрдгрдп рд╣реЛрдиреЗ рдХрд╛ рджрд╛рд╡рд╛ рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВред рдпрд╣ рд╡рд┐рдЪрд╛рд░ рд▓рд╛рдЧреВ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ, рдФрд░ рдпрд╣ рдЕрдЪреНрдЫреА рддрд░рд╣ рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред рдореИрдВрдиреЗ рдЖрдкрдХреЛ рдореБрдЦреНрдп рдмрд┐рдВрджреБрдУрдВ рдХреЛ рд▓рд╛рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА, рдФрд░ рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди рдХрд╛ рд╡рд┐рд╡рд░рдг рдФрд░ рджрд╛рдпрд░рд╛ рдХреЗрд╡рд▓ рдЖрдкрдХреЗ рдФрд░ рдЖрдкрдХреЗ рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдкрд░ рдирд┐рд░реНрднрд░ рдХрд░рддрд╛ рд╣реИредрдзреНрдпрд╛рди рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдЖрдкрдХреЛ рдзрдиреНрдпрд╡рд╛рджред