From e9e62ae841b0c828f845e6f2095e6eba732a61ee Mon Sep 17 00:00:00 2001 From: Safzan Pirani Date: Sun, 28 Jul 2024 23:02:06 +0530 Subject: [PATCH] dark mode test --- index.html | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) diff --git a/index.html b/index.html index 1ece14c..a341ad1 100644 --- 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); + }