Skip to content

Commit d466d51

Browse files
author
Raffael Herrmann
committed
feat: enhance light theme with nearly white backgrounds
- Change header and sidebar to pure white backgrounds - Add subtle gray borders for structure and definition - Adjust button colors for better contrast against white - Improve navigation hover effects for white backgrounds - Maintain excellent readability with proper contrast ratios
1 parent ce0c3a1 commit d466d51

2 files changed

Lines changed: 8 additions & 8 deletions

File tree

‎public/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
<link rel="stylesheet" href="styles.css">
1616
</head>
1717
<body class="bg-gray-100 font-sans flex flex-col h-screen dark:bg-gray-900 transition-colors">
18-
<header class="bg-gray-200 text-gray-900 p-4 flex items-center justify-between dark:bg-gray-900 dark:text-white transition-colors">
19-
<button id="sidebar-toggle" onclick="toggleSidebar()" class="bg-gray-300 text-gray-900 text-xl p-2 hover:bg-gray-400 rounded transition-colors dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700" type="button">☰</button>
18+
<header class="bg-white text-gray-900 p-4 flex items-center justify-between dark:bg-gray-900 dark:text-white transition-colors border-b border-gray-200 dark:border-gray-700">
19+
<button id="sidebar-toggle" onclick="toggleSidebar()" class="bg-gray-200 text-gray-900 text-xl p-2 hover:bg-gray-300 rounded transition-colors dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700" type="button">☰</button>
2020
<div class="flex items-center space-x-3 ml-4">
2121
<svg class="w-8 h-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
2222
<path d="M8 6L24 6C25.1046 6 26 6.89543 26 8V24C26 25.1046 25.1046 26 24 26H8C6.89543 26 6 25.1046 6 24V8C6 6.89543 6.89543 6 8 6Z" fill="#60A5FA" stroke="#3B82F6" stroke-width="2"/>
@@ -29,22 +29,22 @@
2929
<h1 class="text-2xl font-bold">massCode-Web</h1>
3030
</div>
3131
<div class="flex items-center space-x-2 ml-auto">
32-
<button id="theme-toggle" class="bg-gray-300 text-gray-900 p-2 rounded hover:bg-gray-400 transition-colors dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700" title="Toggle theme">
32+
<button id="theme-toggle" class="bg-gray-200 text-gray-900 p-2 rounded hover:bg-gray-300 transition-colors dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700" title="Toggle theme">
3333
🌓
3434
</button>
3535
<div class="relative">
36-
<input type="text" id="search" placeholder="Search snippets..." class="w-64 px-3 py-2 pr-8 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 transition-colors">
36+
<input type="text" id="search" placeholder="Search snippets..." class="w-64 px-3 py-2 pr-8 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 transition-colors">
3737
<button id="clear-search" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors" onclick="clearSearch()" style="display: none;">×</button>
3838
</div>
3939
</div>
4040
</header>
4141
<div class="content flex flex-1 overflow-hidden">
4242
<div id="sidebar-backdrop" class="md:hidden"></div>
43-
<aside id="sidebar" class="w-80 bg-gray-100 text-gray-900 flex flex-col transition-all duration-300 flex-shrink-0 dark:bg-gray-800 dark:text-white fixed inset-y-0 left-0 z-50 transform -translate-x-full md:relative md:w-80 md:translate-x-0 md:z-auto">
43+
<aside id="sidebar" class="w-80 bg-white text-gray-900 flex flex-col transition-all duration-300 flex-shrink-0 dark:bg-gray-800 dark:text-white fixed inset-y-0 left-0 z-50 transform -translate-x-full md:relative md:w-80 md:translate-x-0 md:z-auto border-r border-gray-200 dark:border-gray-700">
4444
<div id="sidebar-content" class="flex-1 overflow-y-auto p-4">
4545
<!-- Tree structure will be rendered here -->
4646
</div>
47-
<footer class="p-4 border-t border-gray-300 dark:border-gray-600">
47+
<footer class="p-4 border-t border-gray-200 dark:border-gray-600">
4848
<div class="flex items-center justify-between">
4949
<a href="https://github.com/codebude/masscode-web" target="_blank" class="text-gray-600 hover:text-gray-800 transition-colors dark:text-gray-400 dark:hover:text-white">
5050
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

‎public/styles.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
}
6060

6161
.tree .folder:hover {
62-
color: #374151;
62+
color: #1f2937;
6363
}
6464

6565
.tree .folder:before {
@@ -89,7 +89,7 @@
8989
}
9090

9191
.tree .snippet-item:hover {
92-
background-color: rgba(107, 114, 128, 0.1);
92+
background-color: rgba(156, 163, 175, 0.1);
9393
border-radius: 0.25rem;
9494
}
9595

0 commit comments

Comments
 (0)