Skip to content

Example custom HTML that supports automatic day night modes

Jump to bottom
evilbunny2008 edited this page Oct 19, 2025 · 1 revision 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Custom Weather Info</title>
<style>
  body {
    font-family: sans-serif;
    padding: 10px;
    margin: 0;
    background: #ffffff; /* default light */
    color: #000000;      /* default light */
  }

  table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* cells scale evenly */
  }

  th, td {
    padding: 8px;
    text-align: left;
    word-wrap: break-word;
    border-bottom: 1px solid #ccc;
  }

  th {
    background-color: #f0f0f0;
    text-align: center;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  iframe {
    max-width: 100%;
    width: 100%;
    height: 210px;
    border: none;
  }

  /* Responsive adjustments for small screens */
  @media (max-width: 480px) {
    th, td {
      font-size: 14px;
      padding: 6px;
    }
  }

  /* Dark mode styles */
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #121212;
      color: #e0e0e0;
    }

    th {
      background-color: #1e1e1e;
      color: #ffffff;
    }

    td {
      border-bottom: 1px solid #333333;
    }

    a {
      color: #82b1ff;
    }

    iframe {
      filter: brightness(0.9) contrast(0.9);
    }

    img {
      filter: brightness(0.9) contrast(0.9);
    }
  }
</style>
</head>
<body>
Custom weather info goes here!
</body
</html>

© 2024-2026 by evilbunny

Clone this wiki locally