Skip to content

Commit af8b2ff

Browse files
BilalkamalBilalkamal
committed
added dark mode
1 parent fab90a6 commit af8b2ff

File tree

6 files changed

+77
-34
lines changed

6 files changed

+77
-34
lines changed

‎src/templates/base.jinja‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" class="light">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -51,7 +51,7 @@
5151
</style>
5252
{% block extra_head %}{% endblock %}
5353
</head>
54-
<body class="bg-[#FFFDF8] min-h-screen flex flex-col">
54+
<body class="bg-[#FFFDF8] dark:bg-gray-900 dark:text-white min-h-screen flex flex-col transition-colors duration-200">
5555
<canvas id="snow-canvas"></canvas>
5656
{% include 'components/navbar.jinja' %}
5757
<!-- Main content wrapper -->

‎src/templates/components/footer.jinja‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<footer class="w-full border-t-[3px] border-gray-900 mt-auto">
1+
<footer class="w-full border-t-[3px] border-gray-900 dark:border-gray-400 mt-auto">
22
<div class="max-w-4xl mx-auto px-4 py-4">
3-
<div class="flex justify-center items-center text-gray-900 text-sm">
3+
<div class="flex justify-center items-center text-gray-900 dark:text-white text-sm">
44
<div class="flex flex-col items-center">
55
<div class="flex items-center">
66
made with ❤️ by

‎src/templates/components/github_form.jinja‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="relative">
22
<div class="w-full h-full absolute inset-0 bg-gray-900 rounded-xl translate-y-2 translate-x-2"></div>
3-
<div class="rounded-xl relative z-20 pl-8 sm:pl-10 pr-8 sm:pr-16 py-8 border-[3px] border-gray-900 bg-[#fff4da]">
3+
<div class="rounded-xl relative z-20 pl-8 sm:pl-10 pr-8 sm:pr-16 py-8 border-[3px] border-gray-900 dark:border-gray-600 bg-[#fff4da] dark:bg-gray-800">
44
<img src="https://cdn.devdojo.com/images/january2023/shape-1.png"
55
class="absolute md:block hidden left-0 h-[4.5rem] w-[4.5rem] bottom-0 -translate-x-full ml-3">
66
<form class="flex md:flex-row flex-col w-full h-full justify-center items-stretch space-y-5 md:space-y-0 md:space-x-5"
@@ -14,12 +14,12 @@
1414
placeholder="https://github.com/..."
1515
value="{{ github_url if github_url else '' }}"
1616
required
17-
class="border-[3px] w-full relative z-20 border-gray-900 placeholder-gray-600 text-lg font-medium focus:outline-none py-3.5 px-6 rounded">
17+
class="border-[3px] w-full relative z-20 border-gray-900 dark:border-gray-600 placeholder-gray-600 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-700 text-lg font-medium focus:outline-none py-3.5 px-6 rounded">
1818
</div>
1919
<div class="relative w-auto flex-shrink-0 h-full group">
2020
<div class="w-full h-full rounded bg-gray-800 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
2121
<button type="submit"
22-
class="py-3.5 rounded px-6 group-hover:-translate-y-px group-hover:-translate-x-px ease-out duration-300 z-20 relative w-full border-[3px] border-gray-900 font-medium bg-[#ffc480] tracking-wide text-lg flex-shrink-0 text-gray-900">
22+
class="py-3.5 rounded px-6 group-hover:-translate-y-px group-hover:-translate-x-px ease-out duration-300 z-20 relative w-full border-[3px] border-gray-900 dark:border-gray-600 font-medium bg-[#ffc480] dark:bg-[#fca847] tracking-wide text-lg flex-shrink-0 text-gray-900">
2323
Ingest
2424
</button>
2525
</div>
@@ -31,18 +31,18 @@
3131
<div class="w-[200px] sm:w-[250px] mr-9 mt-4">
3232
<div class="relative">
3333
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
34-
<div class="flex relative z-20 border-[3px] border-gray-900 rounded bg-white">
34+
<div class="flex relative z-20 border-[3px] border-gray-900 dark:border-gray-600 rounded bg-white dark:bg-gray-700">
3535
<div class="relative flex items-center">
3636
<select id="pattern_type"
3737
name="pattern_type"
38-
class="w-21 py-2 pl-2 pr-6 appearance-none bg-[#e6e8eb] focus:outline-none border-r-[3px] border-gray-900">
38+
class="w-21 py-2 pl-2 pr-6 appearance-none bg-[#e6e8eb] dark:bg-gray-600 dark:text-white focus:outline-none border-r-[3px] border-gray-900 dark:border-gray-600">
3939
<option value="exclude"
4040
{% if pattern_type == 'exclude' or not pattern_type %}selected{% endif %}>
4141
Exclude
4242
</option>
4343
<option value="include" {% if pattern_type == 'include' %}selected{% endif %}>Include</option>
4444
</select>
45-
<svg class="absolute right-2 w-4 h-4 pointer-events-none"
45+
<svg class="absolute right-2 w-4 h-4 pointer-events-none dark:text-white"
4646
xmlns="http://www.w3.org/2000/svg"
4747
viewBox="0 0 24 24"
4848
fill="none"
@@ -58,12 +58,12 @@
5858
name="pattern"
5959
placeholder="*.md, src/ "
6060
value="{{ pattern if pattern else '' }}"
61-
class=" py-2 px-2 bg-[#E8F0FE] focus:outline-none w-full">
61+
class="py-2 px-2 bg-[#E8F0FE] dark:bg-gray-600 dark:text-white focus:outline-none w-full">
6262
</div>
6363
</div>
6464
</div>
6565
<div class="w-[200px] sm:w-[200px] mt-3">
66-
<label for="file_size" class="block text-gray-700 mb-1">
66+
<label for="file_size" class="block text-gray-700 dark:text-gray-300 mb-1">
6767
Include files under: <span id="size_value" class="font-bold">50kb</span>
6868
</label>
6969
<input type="range"
@@ -73,17 +73,17 @@
7373
max="500"
7474
required
7575
value="{{ default_file_size }}"
76-
class="w-full h-3 bg-[#FAFAFA] bg-no-repeat bg-[length:50%_100%] bg-[#ebdbb7] appearance-none border-[3px] border-gray-900 rounded-sm focus:outline-none bg-gradient-to-r from-[#FE4A60] to-[#FE4A60] [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-7 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-solid [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-gray-900 [&::-webkit-slider-thumb]:shadow-[3px_3px_0_#000] ">
76+
class="w-full h-3 bg-[#FAFAFA] dark:bg-gray-600 bg-no-repeat bg-[length:50%_100%] bg-[#ebdbb7] appearance-none border-[3px] border-gray-900 dark:border-gray-600 rounded-sm focus:outline-none bg-gradient-to-r from-[#FE4A60] to-[#FE4A60] [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-7 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:dark:bg-gray-300 [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-solid [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-gray-900 [&::-webkit-slider-thumb]:dark:border-gray-600 [&::-webkit-slider-thumb]:shadow-[3px_3px_0_#000]">
7777
</div>
7878
</div>
7979
{% if show_examples %}
8080
<!-- Example repositories section -->
8181
<div class="mt-4">
82-
<p class="opacity-70 mb-1">Try these example repositories:</p>
82+
<p class="opacity-70 dark:text-gray-300 mb-1">Try these example repositories:</p>
8383
<div class="flex flex-wrap gap-2">
8484
{% for example in examples %}
8585
<button onclick="submitExample('{{ example.url }}')"
86-
class="px-4 py-1 bg-[#EBDBB7] hover:bg-[#FFC480] text-gray-900 rounded transition-colors duration-200 border-[3px] border-gray-900 relative hover:-translate-y-px hover:-translate-x-px">
86+
class="px-4 py-1 bg-[#EBDBB7] dark:bg-gray-700 hover:bg-[#FFC480] dark:hover:bg-[#fca847] text-gray-900 dark:text-white rounded transition-colors duration-200 border-[3px] border-gray-900 dark:border-gray-600 relative hover:-translate-y-px hover:-translate-x-px">
8787
{{ example.name }}
8888
</button>
8989
{% endfor %}

‎src/templates/components/navbar.jinja‎

Lines changed: 48 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,27 +20,58 @@
2020
}
2121
2222
fetchGitHubStars();
23+
24+
// Dark mode toggle functionality
25+
function initDarkMode() {
26+
const isDark = localStorage.getItem('darkMode') === 'true' ||
27+
(!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches);
28+
29+
document.documentElement.classList.toggle('dark', isDark);
30+
updateDarkModeIcon(isDark);
31+
}
32+
33+
function toggleDarkMode() {
34+
const isDark = document.documentElement.classList.toggle('dark');
35+
localStorage.setItem('darkMode', isDark);
36+
updateDarkModeIcon(isDark);
37+
}
38+
39+
function updateDarkModeIcon(isDark) {
40+
const moonIcon = document.getElementById('moon-icon');
41+
const sunIcon = document.getElementById('sun-icon');
42+
43+
if (isDark) {
44+
moonIcon.classList.add('hidden');
45+
sunIcon.classList.remove('hidden');
46+
} else {
47+
moonIcon.classList.remove('hidden');
48+
sunIcon.classList.add('hidden');
49+
}
50+
}
51+
52+
// Initialize dark mode on page load
53+
document.addEventListener('DOMContentLoaded', initDarkMode);
2354
</script>
24-
<header class="sticky top-0 bg-[#FFFDF8] border-b-[3px] border-gray-900 z-50">
55+
<header class="sticky top-0 bg-[#FFFDF8] dark:bg-gray-900 border-b-[3px] border-gray-900 dark:border-gray-400 z-50">
2556
<div class="max-w-4xl mx-auto px-4">
2657
<div class="flex justify-between items-center h-16">
2758
<!-- Logo -->
2859
<div class="flex items-center gap-4">
2960
<h1 class="text-2xl font-bold tracking-tight">
3061
<a href="/" class="hover:opacity-80 transition-opacity">
31-
<span class="text-gray-900">Git</span><span class="text-[#fca847]">ingest</span>
62+
<span class="text-gray-900 dark:text-white">Git</span><span class="text-[#fca847] dark:text-[#5CF1A4]">ingest</span>
3263
</a>
3364
</h1>
3465
</div>
3566
<!-- Navigation with updated styling -->
3667
<nav class="flex items-center space-x-6">
3768
<a href="/api"
38-
class="text-gray-900 hover:-translate-y-0.5 transition-transform">API</a>
69+
class="text-gray-900 dark:text-white hover:-translate-y-0.5 transition-transform">API</a>
3970
<div class="flex items-center gap-2">
4071
<a href="https://github.com/cyclotruc/gitingest"
4172
target="_blank"
4273
rel="noopener noreferrer"
43-
class="text-gray-900 hover:-translate-y-0.5 transition-transform flex items-center gap-1.5">
74+
class="text-gray-900 dark:text-white hover:-translate-y-0.5 transition-transform flex items-center gap-1.5">
4475
<svg class="w-4 h-4"
4576
fill="currentColor"
4677
viewBox="0 0 24 24"
@@ -50,7 +81,7 @@
5081
</svg>
5182
GitHub
5283
</a>
53-
<div class="flex items-center text-sm text-gray-600">
84+
<div class="flex items-center text-sm text-gray-600 dark:text-gray-300">
5485
<svg class="w-4 h-4 text-[#ffc480] mr-1"
5586
fill="currentColor"
5687
viewBox="0 0 20 20">
@@ -59,6 +90,18 @@
5990
<span id="github-stars">0</span>
6091
</div>
6192
</div>
93+
<button onclick="toggleDarkMode()"
94+
class="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
95+
aria-label="Toggle dark mode">
96+
<!-- Moon icon -->
97+
<svg id="moon-icon" class="w-5 h-5 text-gray-900 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
98+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
99+
</svg>
100+
<!-- Sun icon -->
101+
<svg id="sun-icon" class="hidden w-5 h-5 text-gray-900 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
102+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
103+
</svg>
104+
</button>
62105
</nav>
63106
</div>
64107
</div>

0 commit comments

Comments
 (0)