System-End/hackatime
1
0
Fork 0
mirror of https://github.com/System-End/hackatime.git synced 2026-04-19 22:15:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

zap out lightmode to prefer dark

Browse source
This commit is contained in:
Echo 2025-06-23 10:18:20 -04:00
parent ce2b0c6f12
commit 57ad1bd1c7
No known key found for this signature in database
15 changed files with 69 additions and 171 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/assets/stylesheets/activity_graph.css
View file

@ -83,12 +83,3 @@
.lvl3 { background-color: #2ea043; }
.lvl4 { background-color: #56d364; }
@media (prefers-color-scheme: light) { /* eww */
.lvl0 { background-color: #eff2f5; }
.lvl1 { background-color: #aceebb; }
.lvl2 { background-color: #4bc26b; }
.lvl3 { background-color: #2da44e; }
.lvl4 { background-color: #116329; }
}

40
app/assets/stylesheets/application.css
View file

@ -13,14 +13,24 @@
@import "https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css";
@import "settings.css";
/* Force dark mode for all elements */
*, *::before, *::after {
color-scheme: dark;
}
/* Ensure forms and inputs respect dark mode */
input, textarea, select {
color-scheme: dark;
}
/* colors */
:root {
--muted-color: var(--uchu-gray);
--black: rgb(42, 42, 42);
--smoke: rgb(242, 242, 242);
/* color: var(--black); */
/* background-color: var(--smoke); */
/* Force dark mode colors */
color-scheme: dark;
}
:root.development {
@ -49,18 +59,12 @@
.admin-tool {
border-radius: 5px;
border: 1px dashed hsl(24.9, 100%, 67.8%);
background-color: hsl(44.6, 100%, 92.4%);
background-color: rgba(255, 255, 255, 0.02);
}
.dev-tool {
border-radius: 5px;
border: 1px dashed var(--color-green);
background-color: hsl(127.5, 61.5%, 89.8%);
}
@media (prefers-color-scheme: dark) {
.admin-tool, .dev-tool {
background-color: rgba(255, 255, 255, 0.02);
}
background-color: rgba(255, 255, 255, 0.02);
}
.loading {
@ -153,7 +157,7 @@
.auth-divider {
margin: 1rem 0;
color: #666;
color: #ccc;
position: relative;
}
@ -164,7 +168,7 @@
top: 50%;
width: 45%;
height: 1px;
background-color: #ddd;
background-color: #555;
}
.auth-divider::before {
@ -182,20 +186,22 @@
.email-auth-form input[type="email"] {
width: 100%;
padding: 0.75rem;
border: 1px solid #ddd;
border: 1px solid #555;
border-radius: 4px;
font-size: 1rem;
background-color: var(--background-color);
color: var(--color);
}
.super {
font-style: italic;
font-size: 0.9rem;
color: #666;
color: #ccc;
margin: 0 0 0.1rem;
}
.super a {
color: #666;
color: #ccc;
}
.auto-scroll {
@ -370,7 +376,7 @@ select {
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
border-bottom: 10px solid #333;
}
.hover-user-list {
@ -390,7 +396,7 @@ select {
}
.user-item:hover {
background-color: #f5f5f5;
background-color: #555;
}
.user-avatar {

47
app/assets/stylesheets/filterable_dashboard.css
View file

@ -136,7 +136,6 @@
display: none;
}
@media (prefers-color-scheme: light) {
.filter .options-container {
background: white;
border: 1px solid #ddd;
@ -192,7 +191,7 @@
.filter .option input[type="checkbox"]:hover {
border-color: rgba(0, 0, 0, 0.4);
}
}
.dashboard-wrapper {
display: flex;
@ -340,47 +339,6 @@
font-style: italic;
}
@media (prefers-color-scheme: light) {
.dashboard-wrapper .stat-card {
background: var(--smoke);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.dashboard-wrapper .stat-label {
color: #666;
}
.dashboard-wrapper .stat-value {
color: var(--text-color);
}
.dashboard-wrapper .card {
background: white;
border: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.dashboard-wrapper .card h2 {
color: var(--text-color);
}
.dashboard-wrapper .bar-label {
color: var(--text-color);
}
.dashboard-wrapper .bar-container {
background: var(--smoke);
}
.dashboard-wrapper .bar-value {
color: var(--text-inverse);
}
.dashboard-wrapper .no-data {
color: #666;
}
}
.container {
max-width: 1200px;
margin: 0 auto;
@ -670,7 +628,6 @@ h1 {
font-size: 0.9em;
}
@media (prefers-color-scheme: dark) {
.interval-dropdown-trigger {
background: #23272f;
color: #f5f5f5;
@ -706,7 +663,7 @@ h1 {
.dropdown-arrow {
color: #f5f5f5;
}
}
.compact-options-list {
max-height: 220px;

2
app/assets/stylesheets/flash.css
View file

@ -56,7 +56,6 @@ footer a:hover {
font-weight: bold;
}
@media (prefers-color-scheme: dark) {
footer {
color: rgba(180, 180, 180, 0.6);
}
@ -68,4 +67,3 @@ footer a:hover {
.impersonate-link {
color: #ff9999 !important;
}
}

4
app/assets/stylesheets/leaderboard.css
View file

@ -14,8 +14,6 @@ turbo-frame#mini_leaderboard[aria-busy="true"]::before {
opacity: 0.6;
}
/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
.mini-leaderboard {
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
@ -54,7 +52,7 @@ turbo-frame#mini_leaderboard[aria-busy="true"]::before {
.period-toggle-btn:hover:not(.active) {
background-color: rgba(255, 255, 255, 0.1);
}
}
.mini-leaderboard.loading .leaderboard-entry {
opacity: 0.7;

4
app/assets/stylesheets/project_duration.css
View file

@ -92,8 +92,7 @@
transition: width 0.5s ease;
}
/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
.project-duration-card {
background-color: rgba(255, 255, 255, 0.05);
}
@ -105,4 +104,3 @@
.project-time {
color: rgba(255, 255, 255, 0.5);
}
}

12
app/assets/stylesheets/scrapyard.css
View file

@ -1,6 +1,7 @@
.scrapyard-notice {
background-color: var(--uchu-light-green);
background-color: rgba(var(--uchu-green-rgb), 0.2);
border-radius: 5px;
border: 1px solid var(--uchu-green);
color: var(--uchu-yellow) !important;
position: relative;
padding: 1rem;
@ -14,11 +15,4 @@
max-height: 100px;
top: -50px;
right: 20px;
}
@media (prefers-color-scheme: dark) {
.scrapyard-notice {
background-color: rgba(var(--uchu-green-rgb), 0.2);
border: 1px solid var(--uchu-green);
}
}
}

3
app/assets/stylesheets/scrapyard_leaderboard.css
View file

@ -196,8 +196,6 @@
opacity: 0.7;
}
/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
.event-card {
background: rgba(var(--uchu-green-rgb), 0.1);
border-color: rgba(var(--uchu-green-rgb), 0.2);
@ -244,4 +242,3 @@
.sort-link.active {
color: var(--uchu-yellow);
}
}

23
app/assets/stylesheets/settings.css
View file

@ -146,16 +146,15 @@
}
}
@media (prefers-color-scheme: dark) {
.settings-page article {
background: var(--pico-card-background-color, #1e293b);
border-color: var(--pico-card-border-color, #334155);
}
.settings-page article:hover {
box-shadow: var(
--pico-card-box-shadow-hover,
0 0.125rem 1rem rgba(0, 0, 0, 0.3)
);
}
/* Dark mode styles (now default) */
.settings-page article {
background: var(--pico-card-background-color, #1e293b);
border-color: var(--pico-card-border-color, #334155);
}
.settings-page article:hover {
box-shadow: var(
--pico-card-box-shadow-hover,
0 0.125rem 1rem rgba(0, 0, 0, 0.3)
);
}

4
app/assets/stylesheets/tools.css
View file

@ -39,8 +39,7 @@
border-radius: 4px;
}
/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
.admin-tool::before {
opacity: 1;
background-color: rgba(255, 166, 0, 0.02); /* Orange with very low opacity */
@ -68,4 +67,3 @@
.dev-tool a:hover {
color: var(--uchu-orange);
}
}

16
app/assets/tailwind/application.css
View file

@ -27,18 +27,14 @@
--color-primary: #ec3750;
--color-secondary: #8492a6;
--color-accent: #5bc0de;
--color-text: var(--color-white);
--color-background: var(--color-darker);
--color-elevated: var(--color-dark);
--color-sheet: var(--color-darkless);
--color-sunken: var(--color-darkless);
--color-border: var(--color-darkless);
}
@media (prefers-color-scheme: dark) {
:root {
--color-text: var(--color-white);
--color-background: var(--color-darker);
--color-elevated: var(--color-dark);
--color-sheet: var(--color-darkless);
--color-sunken: var(--color-darkless);
--color-border: var(--color-darkless);
}
}
@layer base {
.bg-primary {

3
app/views/docs/index.html.erb
View file

@ -231,14 +231,13 @@
</div>
</details>
<style>
@media (prefers-color-scheme: dark) {
.tip-box, #all-editors {
background: #1a2233 !important;
border-left-color: #4fd1c5 !important;
color: #e6e6e6 !important;
}
.tip-box a { color: #4fd1c5 !important; }
}
</style>
<hr style="margin: 2rem 0;">

3
app/views/layouts/application.html.erb
View file

@ -1,10 +1,11 @@
<!DOCTYPE html>
<html class="<%= Rails.env == "production" ? "production" : "development" %>">
<html class="<%= Rails.env == "production" ? "production" : "development" %>" data-theme="dark">
<head>
<title><%= @page_title || content_for(:title) || "Hackatime" %></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="color-scheme" content="dark">
<!-- SEO Meta Tags -->
<meta name="description" content="<%= @meta_description || content_for(:meta_description) || 'Track your coding time easily with Hackatime. A free tool to see how much time you spend programming in different languages and editors. Better than WakaTime and totally free!' %>">

34
app/views/shared/_interval_selector.html.erb
View file

@ -131,39 +131,5 @@
.interval-custom-range .primary-button:hover {
filter: brightness(1.1);
}
/* Ensure dropdown is visible in light mode */
@media (prefers-color-scheme: light) {
.interval-dropdown-trigger {
background: white;
color: #333;
border: 1px solid #ccc;
}
.interval-dropdown-menu {
background: white;
color: #333;
border: 1px solid #ccc;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.interval-options-list li {
color: #333;
}
.interval-options-list li:hover {
background: #f5f5f5;
}
.interval-custom-range label {
color: #333;
}
.interval-custom-range input[type="date"] {
background: white;
color: #333;
border: 1px solid #ccc;
}
}
</style>
<% end %>

36
app/views/static_pages/_streak.erb
View file

@ -7,26 +7,26 @@
show_text = local_assigns.fetch(:show_text, false)
c = streak_count.to_i
if c >= 30
bg = "from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20"
hbg = "hover:from-blue-100 hover:to-indigo-100 dark:hover:from-blue-800/30 dark:hover:to-indigo-800/30"
bc = "border-blue-200 dark:border-blue-700"
ic = "text-blue-500 dark:text-blue-400 group-hover:text-blue-600 dark:group-hover:text-blue-300"
tc = "text-blue-700 dark:text-blue-300 group-hover:text-blue-800 dark:group-hover:text-blue-200"
tm = "text-blue-600 dark:text-blue-400"
bg = "from-blue-900/20 to-indigo-900/20"
hbg = "hover:from-blue-800/30 hover:to-indigo-800/30"
bc = "border-blue-700"
ic = "text-blue-400 group-hover:text-blue-300"
tc = "text-blue-300 group-hover:text-blue-200"
tm = "text-blue-400"
elsif c >= 7
bg = "from-red-50 to-orange-50 dark:from-red-900/20 dark:to-orange-900/20"
hbg = "hover:from-red-100 hover:to-orange-100 dark:hover:from-red-800/30 dark:hover:to-orange-800/30"
bc = "border-red-200 dark:border-red-700"
ic = "text-red-500 dark:text-red-400 group-hover:text-red-600 dark:group-hover:text-red-300"
tc = "text-red-700 dark:text-red-300 group-hover:text-red-800 dark:group-hover:text-red-200"
tm = "text-red-600 dark:text-red-400"
bg = "from-red-900/20 to-orange-900/20"
hbg = "hover:from-red-800/30 hover:to-orange-800/30"
bc = "border-red-700"
ic = "text-red-400 group-hover:text-red-300"
tc = "text-red-300 group-hover:text-red-200"
tm = "text-red-400"
else
bg = "from-orange-50 to-yellow-50 dark:from-orange-900/20 dark:to-yellow-900/20"
hbg = "hover:from-orange-100 hover:to-yellow-100 dark:hover:from-orange-800/30 dark:hover:to-yellow-800/30"
bc = "border-orange-200 dark:border-orange-700"
ic = "text-orange-500 dark:text-orange-400 group-hover:text-orange-600 dark:group-hover:text-orange-300"
tc = "text-orange-700 dark:text-orange-300 group-hover:text-orange-800 dark:group-hover:text-orange-200"
tm = "text-orange-600 dark:text-orange-400"
bg = "from-orange-900/20 to-yellow-900/20"
hbg = "hover:from-orange-800/30 hover:to-yellow-800/30"
bc = "border-orange-700"
ic = "text-orange-400 group-hover:text-orange-300"
tc = "text-orange-300 group-hover:text-orange-200"
tm = "text-orange-400"
end
%>