I am designing a website and I am currently working on compatibility for light/dark mode.
Here is my HTML for clarity:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no" />
<link rel="stylesheet" href="/css/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png">
<link rel="manifest" href="/assets/icons/site.webmanifest">
<link rel="shortcut icon" href="/assets/icons/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/assets/icons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/showForm.js"></script>
<title>ejach</title>
</head>
<body>
<div class="card">
<img src="assets/profilepic.jpg" alt="Name" style="width:100%" draggable="false">
<h1>My-Name</h1>
<p class="title">Computer Information Systems</p>
<p style="font-size: 30px">My Uni</p>
<div style="margin: 24px 0;">
<div class="contact">
<a href="https://www.linkedin.com/in/xxxx/">
<img alt="LinkdeIn" width="55px" src="https://raw.githubusercontent.com/ejach/ejach.github.io/master/assets/icons/linkedin.svg" />
</a>
<a href="https://github.com/ejach">
<img ali alt="Github" width="55px" src="https://raw.githubusercontent.com/ejach/ejach.github.io/master/assets/icons/github.svg" />
</a>
<a href="https://www.snapchat.com/add/xxxx">
<img aligalt="Snapchat" width="55px" src="https://raw.githubusercontent.com/ejach/ejach.github.io/master/assets/icons/snapchat.svg" />
</a>
<a href="https://www.instagram.com/xxxxx/">
<img aligalt="Instagram" width="55px" src="https://raw.githubusercontent.com/ejach/ejach.github.io/master/assets/icons/instagram.svg" />
</a>
</a>
</div>
</div>
<p><button id="showForm">Contact</button></p>
<form id="formElement" action="https://formspree.io/xxxxx" method="POST">
<input type="text" name="name" placeholder="Name" required>
<input type="text" name="company" placeholder="Company">
<input type="email" name="_replyto" placeholder="Email" required>
<textarea name="message" placeholder="Message" required></textarea>
<button type="submit">Send</button>
</form>
</div>
</body>
</html>
I edited the CSS to change the colors when dark mode is enabled/disabled using prefers-color-scheme:
@media all and (prefers-color-scheme: dark) {
.card {
background-color: #2d333b;
}
body {
background-color: #22272e;
}
button {
background-color: #373e47;
color: #9eaab7;
}
input, textarea {
background-color: #9eaab7;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #696969;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #696969;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #696969;
}
p, h1 {
color: #9eaab7;
}
.title {
color: #575d64;
}
}
And I edited the SVG's to respond to the color scheme as well:
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301.165-.088.344-.104.464-.104.182 0 .359.029.509.09.45.149.734.479.734.838.015.449-.39.839-1.213 1.168-.089.029-.209.075-.344.119-.45.135-1.139.36-1.333.81-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014.255.044.435.27.42.509 0 .075-.015.149-.045.225-.24.569-1.273.988-3.146 1.271-.059.091-.12.375-.164.57-.029.179-.074.36-.134.553-.076.271-.27.405-.555.405h-.03c-.135 0-.313-.031-.538-.074-.36-.075-.765-.135-1.273-.135-.3 0-.599.015-.913.074-.6.104-1.123.464-1.723.884-.853.599-1.826 1.288-3.294 1.288-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288-.599-.42-1.107-.779-1.707-.884-.314-.045-.629-.074-.928-.074-.54 0-.958.089-1.272.149-.211.043-.391.074-.54.074-.374 0-.523-.224-.583-.42-.061-.192-.09-.389-.135-.567-.046-.181-.105-.494-.166-.57-1.918-.222-2.95-.642-3.189-1.226-.031-.063-.052-.15-.055-.225-.015-.243.165-.465.42-.509 3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869-.195-.434-.884-.658-1.332-.809-.121-.029-.24-.074-.346-.119-1.107-.435-1.257-.93-1.197-1.273.09-.479.674-.793 1.168-.793.146 0 .27.029.383.074.42.194.789.3 1.104.3.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837C7.392 1.077 10.739.807 11.727.807l.419-.015h.06z"/>
<foreignObject>
<style>
path {
fill: #000;
}
@media (prefers-color-scheme: dark) {
path {
fill: #9eaab7;
}
}
</style>
</foreignObject>
</svg>
And this worked as expected on the Desktop viewport as shown here.
But when I switched to the mobile version, the changes I saw in the Desktop viewport were not existent as shown here.
Is there something that I am missing? I can provide any additional information upon request. Thanks.
