System-End/shipment-viewer
1
0
Fork 0
mirror of https://github.com/System-End/shipment-viewer.git synced 2026-04-19 16:28:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Dark Mode! (#15)

Browse source 
Co-authored-by: nora <163450896+24c02@users.noreply.github.com>
This commit is contained in:
Anson Chung 2025-01-06 05:25:16 +08:00 • committed by GitHub
parent 0b1e7c8803
commit 40a0612836
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 65 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Gemfile.lock
View file

@ -57,6 +57,7 @@ GEM
PLATFORMS
arm64-darwin-23
ruby
x64-mingw-ucrt
DEPENDENCIES
faraday (~> 2.12)

49
app/public/style.css
View file

@ -53,6 +53,55 @@ body {
font-family: 'Phantom Sans', sans-serif !important;
}
body.dark-mode {
background-color: var(--dark);
color: var(--snow);
}
body.dark-mode a {
color: var(--smoke);
}
body.dark-mode .navbar,
body.dark-mode .footer {
background-color: var(--darkless);
}
body.dark-mode .card {
background: var(--steel);
color: var(--smoke);
}
body.dark-mode .navbar-brand {
color: var(--smoke);
}
body.dark-mode p {
color: var(--smoke);
}
#dark-mode-toggle {
position: absolute;
right: 20px;
top: 10px;
background-color: white;
border: none;
cursor: pointer;
size: 1.5em;
}
body.dark-mode #dark-mode-toggle {
background-color: var(--dark);
}
#dark-mode-toggle .fa-moon {
color: var(--steel);
}
body.dark-mode #dark-mode-toggle .fa-moon {
color: var(--smoke);
}
a:focus,
a:hover {
text-decoration-style: wavy;

15
app/views/layout.erb
View file

@ -15,6 +15,18 @@
window.$all = (query, el=document)=>{
return [...el.querySelectorAll(query)];
};
document.addEventListener('DOMContentLoaded', () => {
const toggle = document.getElementById('dark-mode-toggle');
const body = document.body;
toggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
localStorage.setItem('dark-mode', body.classList.contains('dark-mode'));
});
if (localStorage.getItem('dark-mode') === 'true') {
body.classList.add('dark-mode');
}
});
</script>
</head>
<body>
@ -23,6 +35,9 @@
<img src="/flag.png" />
</a>
<a href='<%= @internal ? '/internal' : '/' %>' class="navbar-brand"><b>Shipment Viewer<%= " <span class='internal'>(cool edition)</span>" if @internal %></b></a>
<button id="dark-mode-toggle" class="">
<i class="fa-solid fa-moon"></i>
</button>
</nav>
<div style="margin-top: 64px">
<% if @error %>