Skip to content

fix(theme): stop the dark scheme reading as a stock generated landing page #164

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

Merged
sanity merged 4 commits into from
Sep 2, 2026
Merged

fix(theme): stop the dark scheme reading as a stock generated landing page #164

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
6560fc6
fix(theme): stop the dark scheme reading as a stock generated landing…
sanity Sep 2, 2026
1ee3701
refactor(network-hero): drop two dead bindings
sanity Sep 2, 2026
f4e0fed
fix(theme): finish the palette migration outside freenet.css
sanity Sep 2, 2026
2d4568f
fix(theme): give the focus ring its own token; finish the glow removal
sanity Sep 2, 2026
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
28 changes: 15 additions & 13 deletions hugo-site/layouts/shortcodes/os-install.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,51 +153,53 @@

.os-install-tabs .tab-btn:hover,
.os-install-tabs .tab-btn.active {
color: #4da6ff;
color: #79a7d6;
}

.os-install-tabs .tab-btn.active {
border-bottom-color: #4da6ff;
border-bottom-color: #79a7d6;
}

.os-install-tabs .install-note {
border-left-color: #4da6ff;
background: rgba(77, 166, 255, 0.08);
border-left-color: #79a7d6;
background: rgba(121, 167, 214, 0.08);
}

.os-install-tabs .install-note strong {
color: #4da6ff;
color: #79a7d6;
}

.os-mobile-notice {
border-color: #374151;
border-left-color: #4da6ff;
background: rgba(77, 166, 255, 0.08);
border-left-color: #79a7d6;
background: rgba(121, 167, 214, 0.08);
}

.os-mobile-notice strong {
color: #4da6ff;
color: #79a7d6;
}

.os-mobile-show {
color: #4da6ff;
color: #79a7d6;
}

.os-mobile-show:hover {
color: #7cc0ff;
color: #9dc0e2;
}

.os-install-tabs .download-btn {
box-shadow: 0 4px 14px rgba(77, 166, 255, 0.25);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.os-install-tabs .download-btn:hover,
.os-install-tabs .download-btn:focus {
box-shadow: 0 6px 20px rgba(77, 166, 255, 0.4);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* The focus ring stays coloured on purpose: it is an indicator, not
decoration. Uses the new accent so it matches the site-wide ring. */
.os-install-tabs .download-btn:focus-visible {
box-shadow: 0 0 0 4px rgba(77, 166, 255, 0.6), 0 6px 20px rgba(77, 166, 255, 0.4);
box-shadow: 0 0 0 4px rgba(121, 167, 214, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5);
}
}
</style>
Expand Down
75 changes: 40 additions & 35 deletions hugo-site/static/js/network-hero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,16 @@
const SPAWN_INTERVAL = 120; // ms between particle spawns
const MAX_PARTICLES = 60;

// Event type colors (matches dashboard)
// Event type colours. These deliberately do NOT match the telemetry
// dashboard: the dashboard's ramp is tuned for a dense technical view with a
// legend, whereas here the hues are decorative (the homepage shows no key)
// and the saturated originals fluoresced against the dark ground.
const COLORS = {
connect: '#7ecfef',
put: '#fbbf24',
get: '#34d399',
update: '#a78bfa',
subscribe: '#f472b6',
connect: '#84a9c9',
put: '#c9a227',
get: '#6fa88c',
update: '#9990bd',
subscribe: '#b48a9f',
};
const COLOR_LIST = Object.values(COLORS);
const TYPE_NAMES = Object.keys(COLORS);
Expand All @@ -41,14 +44,11 @@
return window.matchMedia('(prefers-color-scheme: dark)').matches;
}

function ringColor() { return isDark() ? '#1a2a2a' : '#d0d8e0'; }
function glowColor() { return isDark() ? 'rgba(0, 212, 170, 0.08)' : 'rgba(0, 140, 120, 0.06)'; }
function peerColor() { return isDark() ? '#007FFF' : '#3388dd'; }
function peerGlow() { return isDark() ? 'rgba(0, 127, 255, 0.18)' : 'rgba(0, 100, 200, 0.12)'; }
function gwColor() { return '#f59e0b'; }
function labelColor() { return isDark() ? '#484f58' : '#8090a0'; }
function innerRing() { return isDark() ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.04)'; }
function bgColor() { return isDark() ? '#0d1117' : '#ffffff'; }
function ringColor() { return isDark() ? '#2b303a' : '#d0d8e0'; }
function peerColor() { return isDark() ? '#79a7d6' : '#3f7fbf'; }
function gwColor() { return isDark() ? '#c9922b' : '#b3801f'; }
function labelColor() { return isDark() ? '#5b6472' : '#8090a0'; }
function innerRing() { return isDark() ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.05)'; }

// --- Geometry helpers ---
function locationToXY(loc) {
Expand Down Expand Up @@ -169,15 +169,6 @@

// --- Draw static ring elements ---
function drawRing(ctx) {
var dark = isDark();

// Outer glow
ctx.beginPath();
ctx.arc(CENTER, CENTER, RADIUS + 5, 0, Math.PI * 2);
ctx.strokeStyle = glowColor();
ctx.lineWidth = 20;
ctx.stroke();

// Inner reference circles
[0.6, 0.3].forEach(function (scale) {
ctx.beginPath();
Expand Down Expand Up @@ -214,9 +205,9 @@
ctx.lineWidth = 0.7;
ctx.lineCap = 'round';
var dark = isDark();
var alpha = dark ? 0.09 : 0.05;
var alpha = dark ? 0.16 : 0.13;

ctx.strokeStyle = dark ? 'rgba(0, 127, 255, ' + alpha + ')' : 'rgba(0, 80, 180, ' + alpha + ')';
ctx.strokeStyle = dark ? 'rgba(121, 167, 214, ' + alpha + ')' : 'rgba(40, 90, 150, ' + alpha + ')';
ctx.beginPath();
for (var i = 0; i < connections.length; i++) {
var c = connections[i];
Expand All @@ -243,7 +234,9 @@
var p = peers[i];
ctx.beginPath();
ctx.arc(p.pos.x, p.pos.y, p.isGateway ? gwGlowR : glowR, 0, Math.PI * 2);
ctx.fillStyle = p.isGateway ? 'rgba(245, 158, 11, 0.25)' : peerGlow();
ctx.fillStyle = p.isGateway
? 'rgba(201, 146, 43, 0.16)'
: (isDark() ? 'rgba(121, 167, 214, 0.07)' : 'rgba(63, 127, 191, 0.07)');
ctx.fill();
}
// Solid pass
Expand Down Expand Up @@ -453,15 +446,28 @@

loopStart = performance.now();

// Static frame for reduced-motion
// Static frame for reduced-motion. There is no animation loop on this
// path, so the scheme poll in frame() never runs; redraw on the media
// query instead or the ring keeps the old scheme's colours for the life
// of the page.
if (prefersReduced) {
var ctx = canvas.getContext('2d');
var scale = dims.displayW / SIZE;
ctx.setTransform(dims.dpr * scale, 0, 0, dims.dpr * scale, 0, 0);
drawRing(ctx);
drawConnections(ctx, peers, connections);
drawPeers(ctx, peers);
drawCenterLabel(ctx);
var drawStatic = function () {
dims = sizeCanvas();
var ctx = canvas.getContext('2d');
var scale = dims.displayW / SIZE;
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.setTransform(dims.dpr * scale, 0, 0, dims.dpr * scale, 0, 0);
drawRing(ctx);
drawConnections(ctx, peers, connections);
drawPeers(ctx, peers);
drawCenterLabel(ctx);
};
drawStatic();
var schemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
if (schemeQuery.addEventListener) schemeQuery.addEventListener('change', drawStatic);
else if (schemeQuery.addListener) schemeQuery.addListener(drawStatic);
window.addEventListener('resize', drawStatic);
return;
}

Expand Down Expand Up @@ -523,7 +529,6 @@
}

// Mark static dirty on resize
var origResize = window.onresize;
window.addEventListener('resize', function () { dims = sizeCanvas(); staticDirty = true; });

requestAnimationFrame(frame);
Expand Down
2 changes: 1 addition & 1 deletion hugo-site/themes/freenet/assets/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ a:focus-visible,
button:focus-visible,
label:focus-visible,
summary:focus-visible {
outline: 2px solid var(--color-primary);
outline: 2px solid var(--focus-ring, var(--color-primary));
outline-offset: 1px;
}

Expand Down
Loading
Loading