Una respuesta simple sería usar CSS Custom Properties (Variables), que es una técnica muy fácil y directa. La declaración de una propiedad personalizada se realiza mediante un (nombre de propiedad personalizada) que comienza con un guión doble (--) y luego un valor de propiedad que es cualquier valor CSS válido como negro, amarillo, . Como cualquier otra propiedad, esto se escribe dentro de un conjunto de reglas, por lo que es un conjunto de reglas que debe escribirse en el archivo style.css. luego, el paso 2 sería definir estas propiedades personalizadas dentro de su pseudoclase :root, de modo que se pueda aplicar para uso global en todo su documento html. Espero que hayas obtenido la respuesta. archivo HTML archivo CSS

Enlace de documentación de Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties