dark mode test

safzanpirani · Jul 28, 2024 · e9e62ae · e9e62ae
1 parent 9c2debf
commit e9e62ae
Showing 1 changed file with 82 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -71,6 +71,88 @@
     .blog a:hover {
       color: #23527c;
     }
+    :root {
+      --background-color: #ffffff;
+      --text-color: #333333;
+      --link-color: #337ab7;
+      --header-background-color: #f7f7f7;
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --background-color: #333333;
+        --text-color: #ffffff;
+        --link-color: #66d9ef;
+        --header-background-color: #444444;
+      }
+    }
+    body {
+      font-family: Arial, sans-serif;
+      margin: 20px;
+      background-color: var(--background-color);
+      color: var(--text-color);
+    }
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 20px;
+      background-color: var(--background-color);
+    }
+    .header {
+      padding: 40px;
+      text-align: left;
+      padding-left: 0;
+      background-color: var(--header-background-color);
+    }
+    .header h1 {
+      margin: 0;
+      padding: 0;
+      font-size: 64px;
+      font-weight: bold;
+      color: var(--text-color);
+    }
+    .content {
+      padding: 20px;
+    }
+    .projects {
+      padding: 20px;
+      padding-left: 0;
+    }
+    .project {
+      margin-bottom: 20px;
+      padding: 20px;
+      border-bottom: 1px solid #cccccc;
+      text-align: left;
+      padding-left: 0px;
+    }
+    .project h2 {
+      margin: 0;
+      padding: 0;
+      color: var(--text-color);
+    }
+    .project p {
+      margin: 0;
+      padding: 0;
+      color: var(--text-color);
+    }
+    .list-spacer li {
+      margin-bottom: 0.5em;
+    }
+    .blog {
+      padding: 20px;
+      background-color: var(--background-color);
+      border: 1px solid #cccccc;
+    }
+    .blog h2 {
+      margin: 0;
+      padding: 0;
+      color: var(--text-color);
+    }
+    .blog a {
+      color: var(--link-color);
+    }
+    .blog a:hover {
+      color: var(--link-color);
+    }
   </style>
 </head>
 <body>