Skip to content

Commit b7275e0

Browse files
omroy07omroy07
authored
Merge pull request #180 from nagarjunpl/feature-toggle
Add Dark/Light Mode Toggle for All Pages
2 parents 64d8179 + 8e27761 commit b7275e0

44 files changed

Lines changed: 1492 additions & 392 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎Crop Recommendation/templates/index.html‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,17 @@
1212
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
1313
rel="stylesheet"
1414
/>
15+
<link rel="stylesheet" href="../../theme.css" />
1516
<style>
1617
* {
1718
box-sizing: border-box;
19+
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
1820
}
1921

2022
body {
2123
font-family: "Poppins", sans-serif;
22-
background: linear-gradient(135deg, #d4fc79, #96e6a1);
24+
background-color: var(--bg-secondary, #d4fc79);
25+
color: var(--text-primary, #333);
2326
background-size: 400% 400%;
2427
animation: gradientShift 8s ease infinite;
2528
margin: 0;
@@ -43,12 +46,12 @@
4346
}
4447

4548
.container {
46-
background: rgba(255, 255, 255, 0.95);
49+
background: var(--bg-primary, rgba(255, 255, 255, 0.95));
4750
backdrop-filter: blur(10px);
4851
padding: 50px 40px;
4952
border-radius: 24px;
50-
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1),
51-
0 10px 20px rgba(0, 0, 0, 0.05),
53+
box-shadow: 0 20px 40px var(--shadow-medium, rgba(0, 0, 0, 0.1)),
54+
0 10px 20px var(--shadow-light, rgba(0, 0, 0, 0.05)),
5255
inset 0 1px 0 rgba(255, 255, 255, 0.8);
5356
text-align: center;
5457
max-width: 700px;
@@ -57,6 +60,7 @@
5760
overflow: hidden;
5861
transform: translateY(0);
5962
animation: slideIn 0.8s ease-out;
63+
color: var(--text-primary, #333);
6064
}
6165

6266
@keyframes slideIn {
@@ -97,7 +101,7 @@
97101

98102
h1 {
99103
margin-bottom: 40px;
100-
color: #2e7d32;
104+
color: var(--primary-green, #2e7d32);
101105
font-size: 32px;
102106
font-weight: 700;
103107
text-shadow: 0 2px 4px rgba(46, 125, 50, 0.1);
@@ -122,14 +126,15 @@
122126
border-radius: 12px;
123127
font-size: 16px;
124128
font-family: inherit;
125-
background: rgba(255, 255, 255, 0.9);
129+
background: var(--bg-primary, rgba(255, 255, 255, 0.9));
130+
color: var(--text-primary, #333);
126131
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
127132
outline: none;
128133
}
129134

130135
.input-group input:focus {
131136
border-color: #66bb6a;
132-
background: #ffffff;
137+
background: var(--bg-primary, #ffffff);
133138
box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.1),
134139
0 4px 12px rgba(102, 187, 106, 0.15);
135140
transform: translateY(-2px);
@@ -140,7 +145,7 @@
140145
}
141146

142147
.input-group input::placeholder {
143-
color: #81c784;
148+
color: var(--text-muted, #81c784);
144149
font-weight: 500;
145150
}
146151

@@ -378,6 +383,14 @@
378383
<body>
379384
<header></header>
380385
<div class="container">
386+
<div style="position: absolute; top: 20px; right: 20px;">
387+
<button class="theme-toggle" aria-label="Toggle dark/light mode" style="background: rgba(46, 125, 50, 0.1); border: 1px solid rgba(46, 125, 50, 0.3); color: #2e7d32; padding: 8px 12px; border-radius: 20px; font-size: 12px;">
388+
<i class="fas fa-sun sun-icon"></i>
389+
<i class="fas fa-moon moon-icon"></i>
390+
<span class="theme-text">Light</span>
391+
</button>
392+
</div>
393+
381394
<h1>🌾 Crop Recommendation System</h1>
382395

383396
<form action="/" method="POST" id="cropForm">
@@ -554,5 +567,6 @@ <h1>🌾 Crop Recommendation System</h1>
554567
});
555568
});
556569
</script>
570+
<script src="../../theme.js"></script>
557571
</body>
558572
</html>

‎Crop Recommendation/templates/result.html‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,17 @@
1212
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
1313
rel="stylesheet"
1414
/>
15+
<link rel="stylesheet" href="../../theme.css" />
1516
<style>
1617
* {
1718
box-sizing: border-box;
19+
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
1820
}
1921

2022
body {
2123
font-family: "Poppins", sans-serif;
22-
background: linear-gradient(135deg, #a8edea, #fed6e3);
24+
background-color: var(--bg-secondary, #a8edea);
25+
color: var(--text-primary, #333);
2326
background-size: 400% 400%;
2427
animation: gradientShift 10s ease infinite;
2528
display: flex;
@@ -43,19 +46,20 @@
4346
}
4447

4548
.container {
46-
background: rgba(255, 255, 255, 0.95);
49+
background: var(--bg-primary, rgba(255, 255, 255, 0.95));
4750
backdrop-filter: blur(15px);
4851
padding: 50px 40px;
4952
border-radius: 24px;
50-
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1),
51-
0 15px 30px rgba(0, 0, 0, 0.05),
53+
box-shadow: 0 25px 50px var(--shadow-medium, rgba(0, 0, 0, 0.1)),
54+
0 15px 30px var(--shadow-light, rgba(0, 0, 0, 0.05)),
5255
inset 0 1px 0 rgba(255, 255, 255, 0.9);
5356
text-align: center;
5457
max-width: 650px;
5558
width: 100%;
5659
position: relative;
5760
overflow: hidden;
5861
animation: slideInUp 0.8s ease-out;
62+
color: var(--text-primary, #333);
5963
}
6064

6165
@keyframes slideInUp {
@@ -96,7 +100,7 @@
96100

97101
h2 {
98102
margin-bottom: 30px;
99-
color: #333;
103+
color: var(--text-primary, #333);
100104
font-size: 28px;
101105
font-weight: 700;
102106
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -454,6 +458,14 @@
454458
</head>
455459
<body>
456460
<div class="container">
461+
<div style="position: absolute; top: 20px; right: 20px;">
462+
<button class="theme-toggle" aria-label="Toggle dark/light mode" style="background: rgba(46, 125, 50, 0.1); border: 1px solid rgba(46, 125, 50, 0.3); color: #2e7d32; padding: 8px 12px; border-radius: 20px; font-size: 12px;">
463+
<i class="fas fa-sun sun-icon"></i>
464+
<i class="fas fa-moon moon-icon"></i>
465+
<span class="theme-text">Light</span>
466+
</button>
467+
</div>
468+
457469
<div class="success-icon">✓</div>
458470
<h2>🌿 Recommended Crop</h2>
459471

@@ -547,5 +559,6 @@ <h2>🌿 Recommended Crop</h2>
547559
});
548560
});
549561
</script>
562+
<script src="../../theme.js"></script>
550563
</body>
551564
</html>

‎Crop Yield Prediction/crop_yield_app/static/style.css‎

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1+
/* Import theme system */
2+
@import url('../../../theme.css');
3+
14
/* === Reset and Box Sizing === */
25
* {
36
margin: 0;
47
padding: 0;
58
box-sizing: border-box;
9+
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
610
}
711

812
/* === Root Variables === */
@@ -26,8 +30,8 @@
2630
/* === Base Typography and Layout === */
2731
body {
2832
font-family: "Poppins", sans-serif;
29-
background: var(--background);
30-
color: var(--text-dark);
33+
background-color: var(--bg-secondary, #f0f9ff);
34+
color: var(--text-primary, #333);
3135
line-height: 1.6;
3236
min-height: 100vh;
3337
position: relative;
@@ -100,10 +104,14 @@ body::before {
100104

101105
/* === Container === */
102106
.container {
103-
max-width: 1000px;
107+
max-width: 1200px;
104108
margin: 0 auto;
105-
padding: 20px;
106-
animation: fadeInUp 0.8s ease-out;
109+
padding: 2rem;
110+
background: var(--bg-primary, white);
111+
border-radius: 20px;
112+
box-shadow: 0 20px 40px var(--shadow-medium, rgba(0, 0, 0, 0.1));
113+
margin-bottom: 2rem;
114+
animation: slideUp 0.8s ease;
107115
}
108116

109117
/* === Navigation Back === */
@@ -192,9 +200,9 @@ body::before {
192200

193201
/* === Prediction Card === */
194202
.prediction-card {
195-
background: var(--white);
203+
background: var(--bg-primary, #ffffff);
196204
border-radius: var(--border-radius-large);
197-
box-shadow: var(--shadow-medium);
205+
box-shadow: 0 8px 30px var(--shadow-medium, rgba(0, 0, 0, 0.15));
198206
padding: 40px;
199207
position: relative;
200208
overflow: hidden;
@@ -237,6 +245,32 @@ body::before {
237245
transition: var(--transition);
238246
}
239247

248+
input,
249+
select {
250+
width: 100%;
251+
padding: 1rem;
252+
border: 2px solid #e1e5e9;
253+
border-radius: 12px;
254+
font-size: 1rem;
255+
background: var(--bg-primary, white);
256+
color: var(--text-primary, #333);
257+
transition: all 0.3s ease;
258+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
259+
}
260+
261+
input:focus,
262+
select:focus {
263+
outline: none;
264+
border-color: #2e7d32;
265+
box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.1);
266+
transform: translateY(-2px);
267+
}
268+
269+
input::placeholder {
270+
color: var(--text-muted, #999);
271+
font-style: italic;
272+
}
273+
240274
.form-group input,
241275
.form-group select {
242276
width: 100%;
@@ -535,4 +569,4 @@ body::before {
535569
font-size: 1.2em;
536570
opacity: 0;
537571
animation: pulse 0.6s ease-out forwards;
538-
}
572+
}

0 commit comments

Comments
 (0)