Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add dark mode #83

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: Add dark mode #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
af8b2ff
added dark mode
Bilalkamal Dec 30, 2024
0106355
Fix toggle button
cyclotruc Dec 31, 2024
f8c181a
Merge branch 'main' into main
cyclotruc Dec 31, 2024
7562551
Adjust darkmode colors
cyclotruc Jan 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions src/templates/base.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unused class tag

Suggested change
<html lang="en" class="">
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand All @@ -22,7 +22,7 @@
<!-- Web App Meta -->
<meta name="apple-mobile-web-app-title" content="GitIngest">
<meta name="application-name" content="GitIngest">
<meta name="theme-color" content="#FCA847">
<meta name="theme-color" content="#c0c0c0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- OpenGraph Meta Tags -->
Expand All @@ -36,6 +36,15 @@
{% block title %}Git ingest{% endblock %}
</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Add Tailwind configuration right after loading Tailwind -->
<script>
tailwind.config = {
darkMode: 'class', // Enable class-based dark mode
theme: {
extend: {}
}
}
</script>
<script src="/static/js/utils.js"></script>
<script src="/static/js/snow.js"></script>
<style>
Expand All @@ -51,7 +60,7 @@
</style>
{% block extra_head %}{% endblock %}
</head>
<body class="bg-[#FFFDF8] min-h-screen flex flex-col">
<body class="bg-[#FFFDF8] dark:bg-zinc-800 dark:text-white min-h-screen flex flex-col transition-colors duration-200">
<canvas id="snow-canvas"></canvas>
{% include 'components/navbar.jinja' %}
<!-- Main content wrapper -->
Expand Down
4 changes: 2 additions & 2 deletions src/templates/components/footer.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<footer class="w-full border-t-[3px] border-gray-900 mt-auto">
<footer class="w-full border-t-[3px] border-gray-900 dark:border-gray-400 mt-auto">
<div class="max-w-4xl mx-auto px-4 py-4">
<div class="flex justify-center items-center text-gray-900 text-sm">
<div class="flex justify-center items-center text-gray-900 dark:text-white text-sm">
<div class="flex flex-col items-center">
<div class="flex items-center">
made with ❤️ by
Expand Down
22 changes: 11 additions & 11 deletions src/templates/components/github_form.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="relative">
<div class="w-full h-full absolute inset-0 bg-gray-900 rounded-xl translate-y-2 translate-x-2"></div>
<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]">
<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-900 bg-[#fff4da] dark:bg-[#343a70]">
<img src="https://cdn.devdojo.com/images/january2023/shape-1.png"
class="absolute md:block hidden left-0 h-[4.5rem] w-[4.5rem] bottom-0 -translate-x-full ml-3">
<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"
Expand All @@ -14,12 +14,12 @@
placeholder="https://github.com/..."
value="{{ github_url if github_url else '' }}"
required
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">
class="border-[3px] w-full relative z-20 border-gray-900 dark:border-gray-900 placeholder-gray-600 dark:placeholder-gray-300 text-gray-900 dark:text-white bg-white dark:bg-zinc-700 text-lg font-medium focus:outline-none py-3.5 px-6 rounded">
</div>
<div class="relative w-auto flex-shrink-0 h-full group">
<div class="w-full h-full rounded bg-gray-800 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
<button type="submit"
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">
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-900 font-medium bg-[#ffc480] dark:bg-indigo-500 tracking-wide text-lg flex-shrink-0 text-gray-900">
Ingest
</button>
</div>
Expand All @@ -31,18 +31,18 @@
<div class="w-[200px] sm:w-[250px] mr-9 mt-4">
<div class="relative">
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
<div class="flex relative z-20 border-[3px] border-gray-900 rounded bg-white">
<div class="flex relative z-20 border-[3px] border-gray-900 dark:border-gray-900 rounded bg-white dark:bg-zinc-700">
<div class="relative flex items-center">
<select id="pattern_type"
name="pattern_type"
class="w-21 py-2 pl-2 pr-6 appearance-none bg-[#e6e8eb] focus:outline-none border-r-[3px] border-gray-900">
class="w-21 py-2 pl-2 pr-6 appearance-none bg-[#e6e8eb] dark:bg-zinc-600 dark:text-white focus:outline-none border-r-[3px] border-gray-900 dark:border-gray-600">
<option value="exclude"
{% if pattern_type == 'exclude' or not pattern_type %}selected{% endif %}>
Exclude
</option>
<option value="include" {% if pattern_type == 'include' %}selected{% endif %}>Include</option>
</select>
<svg class="absolute right-2 w-4 h-4 pointer-events-none"
<svg class="absolute right-2 w-4 h-4 pointer-events-none dark:text-white"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
Expand All @@ -58,12 +58,12 @@
name="pattern"
placeholder="*.md, src/ "
value="{{ pattern if pattern else '' }}"
class=" py-2 px-2 bg-[#E8F0FE] focus:outline-none w-full">
class="py-2 px-2 bg-[#E8F0FE] dark:bg-zinc-600 dark:text-white focus:outline-none w-full">
</div>
</div>
</div>
<div class="w-[200px] sm:w-[200px] mt-3">
<label for="file_size" class="block text-gray-700 mb-1">
<label for="file_size" class="block text-gray-700 dark:text-gray-300 mb-1">
Include files under: <span id="size_value" class="font-bold">50kb</span>
</label>
<input type="range"
Expand All @@ -73,17 +73,17 @@
max="500"
required
value="{{ default_file_size }}"
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] ">
class="w-full h-3 bg-[#FAFAFA] dark:bg-zinc-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-zinc-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]">
</div>
</div>
{% if show_examples %}
<!-- Example repositories section -->
<div class="mt-4">
<p class="opacity-70 mb-1">Try these example repositories:</p>
<p class="opacity-70 dark:text-gray-300 mb-1">Try these example repositories:</p>
<div class="flex flex-wrap gap-2">
{% for example in examples %}
<button onclick="submitExample('{{ example.url }}')"
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">
class="px-4 py-1 bg-[#EBDBB7] dark:bg-zinc-700 hover:bg-[#FFC480] dark:hover:bg-indigo-500 text-gray-900 dark:text-white rounded transition-colors duration-200 border-[3px] border-gray-900 dark:border-gray-900 relative hover:-translate-y-px hover:-translate-x-px">
{{ example.name }}
</button>
{% endfor %}
Expand Down
72 changes: 67 additions & 5 deletions src/templates/components/navbar.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,27 +20,67 @@
}

fetchGitHubStars();

// Dark mode toggle functionality
function initDarkMode() {
// Check if user has previously set a preference
const isDark = localStorage.getItem('darkMode') === 'true' ||
(!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches);

if (isDark) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
updateDarkModeIcon(isDark);
}

function toggleDarkMode() {
const isDark = document.documentElement.classList.toggle('dark');
localStorage.setItem('darkMode', isDark);
updateDarkModeIcon(isDark);
}

function updateDarkModeIcon(isDark) {
const moonIcon = document.getElementById('moon-icon');
const sunIcon = document.getElementById('sun-icon');

if (isDark) {
moonIcon.classList.add('hidden');
sunIcon.classList.remove('hidden');
} else {
moonIcon.classList.remove('hidden');
sunIcon.classList.add('hidden');
}
}

// Initialize dark mode on page load
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initDarkMode);
} else {
initDarkMode();
}
</script>
<header class="sticky top-0 bg-[#FFFDF8] border-b-[3px] border-gray-900 z-50">
<header class="sticky top-0 bg-[#FFFDF8] dark:bg-zinc-900 border-b-[3px] border-gray-900 dark:border-gray-400 z-50">
<div class="max-w-4xl mx-auto px-4">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<div class="flex items-center gap-4">
<h1 class="text-2xl font-bold tracking-tight">
<a href="/" class="hover:opacity-80 transition-opacity">
<span class="text-gray-900">Git</span><span class="text-[#fca847]">ingest</span>
<span class="text-gray-900 dark:text-white">Git</span><span class="text-[#FE4A60] dark:text-[#CBD538]">ingest</span>
</a>
</h1>
</div>
<!-- Navigation with updated styling -->
<nav class="flex items-center space-x-6">
<a href="/api"
class="text-gray-900 hover:-translate-y-0.5 transition-transform">API</a>
class="text-gray-900 dark:text-white hover:-translate-y-0.5 transition-transform">API</a>
<div class="flex items-center gap-2">
<a href="https://github.com/cyclotruc/gitingest"
target="_blank"
rel="noopener noreferrer"
class="text-gray-900 hover:-translate-y-0.5 transition-transform flex items-center gap-1.5">
class="text-gray-900 dark:text-white hover:-translate-y-0.5 transition-transform flex items-center gap-1.5">
<svg class="w-4 h-4"
fill="currentColor"
viewBox="0 0 24 24"
Expand All @@ -50,7 +90,7 @@
</svg>
GitHub
</a>
<div class="flex items-center text-sm text-gray-600">
<div class="flex items-center text-sm text-gray-600 dark:text-gray-300">
<svg class="w-4 h-4 text-[#ffc480] mr-1"
fill="currentColor"
viewBox="0 0 20 20">
Expand All @@ -59,6 +99,28 @@
<span id="github-stars">0</span>
</div>
</div>
<button onclick="toggleDarkMode()"
class="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
aria-label="Toggle dark mode">
<!-- Moon icon -->
<svg id="moon-icon"
class="w-5 h-5 text-gray-900 dark:text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<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>
</svg>
<!-- Sun icon -->
<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">
<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>
</svg>
</button>
</nav>
</div>
</div>
Expand Down
Loading