Search code examples
htmlcolorsembed

Can I change the text color of an HTML file that I embeded?


I just made a light mode option on my website, and I ran into a problem. I embed the version of the site from a separate HTML file so I can edit just that 1 file instead of all of the pages. That text color happens to be white, as my website background color is black.

I've tried using the CSS variables from the home page and tried to edit the text color using style

Heres the version file:

<center><h2 style="color:white; font-family:monospace;"><pre>Site Version 1.8.8</pre><h2></div></center>

Heres where I embed it:

<center><embed style="height:60px;" src="version.html"></center>

It needs to change to black when I change to light mode. The CSS variable for text color is --color


Solution

  • I don't think you can, given the source in your question. You may want to include/insert/embed your version.html file using a different technology.

    A server technology like Server Side Includes, PHP, or ASP, would be best, but you could also get the job done with javascript.


    Another solution to the problem, if I understand the problem correctly, is to just use CSS and javascipt/cookies to jump between themes. css like:

    body { color: black; background-color: white; }
    body.dark-theme { color: white; background-color: black; }
    

    Then read you cookie - if the cookie says you should be using the dark theme, then just use javascript to add the dark-theme class to the body.