Если вам подойдет использование js, то можно попробовать рассмотреть такой пример:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="script.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Dynamic Text Color</title>
</head>
<body>
<div class="container">
<p id="content">Ваш текст.</p>
</div>
</body>
</html>
Css:
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: white; /* Default background color */
}
.container.dark {
background-color: black; /* Dark background color */
color: white; /* Text color for dark background */
}
JS:
const container = document.querySelector('.container');
const content = document.getElementById('content');
// Функция для определения цвета фона
function getBackgroundColor(element) {
const bgColor = window.getComputedStyle(element).backgroundColor;
return bgColor;
}
// Функция для определения оптимального цвета текста
function getTextColor(backgroundColor) {
// Пример простой проверки на светлый или тёмный цвет фона
const rgb = backgroundColor.match(/\d+/g);
const brightness = (parseInt(rgb[0]) * 299 + parseInt(rgb[1]) * 587 + parseInt(rgb[2]) * 114) / 1000;
return brightness >= 128 ? 'black' : 'white';
}
// Изменение цвета текста в зависимости от цвета фона
function updateTextColor() {
const bgColor = getBackgroundColor(container);
const textColor = getTextColor(bgColor);
content.style.color = textColor;
}
// Обновляем цвет текста при загрузке и изменении размера окна
window.addEventListener('load', updateTextColor);
window.addEventListener('resize', updateTextColor);
P.S Нагенерил код gpt
Простой
