Skip to content

Commit

Permalink
Add dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
mansi066 committed Nov 10, 2024
1 parent cb68c6a commit 1745e43
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 4 deletions.
112 changes: 109 additions & 3 deletions garden-planner.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual Gardening Planner</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
/* Basic styling for the layout */
body {
Expand Down Expand Up @@ -65,9 +66,114 @@
.dragging {
opacity: 0.5;
}
</style>
</head>
<body>
:root { /* Light theme colors */
--background-color: linear-gradient(to right, #ffcccb, #ffebcd);
--text-color: #000000;
--navbar-background: #f8f9fa;
--navbar-text: #000000;
--link-color: #1a73e8;
--button-background: #008cba;
--button-text: #ffffff;
} [data-theme="dark"] { /* Dark theme colors */
--background-color: #121212;
--text-color: #ffffff;
--navbar-background: #333333;
--navbar-text: #ffffff;
--link-color: #bb86fc;
--button-background: #3d3d3d;
--button-text: #ffffff;
}
[data-theme="dark"] #container {
background-color: #222;
border-radius: 8px;
box-shadow: 0 4px 20px #f1f1f15c;
padding: 20px;
width: 80%;
max-width: 800px;
text-align: center;
}
[data-theme="dark"]
.story-builder-container {
width: 90%;
max-width: 700px;
background: #222;
padding: 20px;
box-shadow: -1px 0px 11px 6px #3d3d3d;
border-radius: 10px;
}
[data-theme="dark"]
input[type="text"] {
width: 70%;
padding: 10px;
color: #ddd;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #333;
}
[data-theme="dark"]
th {
background-color: #222;
}


* {
padding: 0;
margin: 0; box-sizing:
border-box;
}
body {
font-family: "Poppins", sans-serif;
/* background-color: var(--background-color); */
color: var(--text-color);
font-family: 'Roboto', sans-serif;
background: var(--background-color);
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Full height */
}
#navbar ul { list-style: none;
padding: 0;
} #navbar ul li {
display: inline;
margin-right: 10px;
}
#navbar ul li a {
color: var(--navbar-text);
text-decoration: none;
}
button {
border: none;
display: inline-flex;
appearance: none;
align-items: center;
justify-content: center;
border-radius: 9999px;
padding: 8px;
align-items: center;
background-color: #f43f5e;
color: #ffffff;
cursor: pointer;
}
#theme-toggle
{ position: fixed;
top: 10px;
right: 10px;
} </style>
</head>
<body data-theme="light">
<button id="theme-toggle"> <i class="fas fa-sun"></i> </button>
<section id="content"> </section>
<script> const toggleButton = document.getElementById('theme-toggle');
const body = document.body;
toggleButton.addEventListener('click', () => { if (body.getAttribute('data-theme') === 'light') { body.setAttribute('data-theme', 'dark');
toggleButton.innerHTML = '<i class="fas fa-moon"></i>';
} else {
body.setAttribute('data-theme', 'light');
toggleButton.innerHTML = '<i class="fas fa-sun"></i>';
} });
</script>

<h1>Virtual Gardening Planner</h1>
<div class="planner-container">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ object-assign

/**
* @license
* jsPDF virtual FileSystem functionality
* jsPDF FileSystem functionality
*
* Licensed under the MIT License.
* http://opensource.org/licenses/mit-license
Expand Down

0 comments on commit 1745e43

Please sign in to comment.