Time-based rules: focus mode, night tint and weekend layouts
A rule in JustZix matches on a URL pattern — it fires when the address bar matches, and that is it. There is no "only on weekdays" toggle, no schedule field. But there does not need to be one: the rule body is JavaScript, and JavaScript can read the clock. This guide shows how to make a single rule behave one way during work hours and another way at night, on weekends, or after 6pm — all with a few lines of date logic.
Why time is a JS-side check
This is the key mental model: rules match on URL, JavaScript decides on time. The rule's URL pattern controls where the script runs; a time check at the top of the script controls whether it does anything. The rule still injects on every matching page — it just exits early when the clock says so. Once that clicks, every example below is the same shape: read new Date(), compare, then either act or return.
Reading the clock
Everything starts with new Date(), which gives you the current local time in the browser. The two methods you need most:
const now = new Date();
const hour = now.getHours(); // 0-23, local time
const day = now.getDay(); // 0 = Sunday ... 6 = Saturday
const isWeekend = day === 0 || day === 6;
const isWorkHours = hour >= 9 && hour < 17; // 09:00-16:59
const isNight = hour >= 21 || hour < 7; // 21:00-06:59Note getHours() is local to the user's machine, which is exactly what you want for "my work hours". And the night check uses || because the range wraps past midnight — a common off-by-one trap.
The guard pattern
Every time-based rule follows the same template: compute a condition, and return immediately if it is not met. Wrap it in an IIFE so the early return is legal.
(() => {
const hour = new Date().getHours();
// Only do something during work hours
if (!(hour >= 9 && hour < 17)) return;
// ...the rule's actual effect goes here...
})();That is the whole trick. The script always runs; the guard decides whether the body runs. Everything that follows just changes the condition and the body.
Recipe 1 — focus mode during work hours
Scope a rule to the sites that eat your day — social media, news, video — with a URL pattern, then have the script blank the page during work hours with a polite message.
(() => {
const hour = new Date().getHours();
const day = new Date().getDay();
const working = day >= 1 && day <= 5
&& hour >= 9 && hour < 17;
if (!working) return;
document.documentElement.innerHTML =
'<body style="margin:0;display:flex;height:100vh;'
+ 'align-items:center;justify-content:center;'
+ 'font:600 22px system-ui;background:#0f172a;color:#e2e8f0">'
+ 'Focus mode — this site is off until 17:00</body>';
// Stop the page doing anything else
window.stop();
})();Create one such rule per distraction, or use a broad pattern in a dedicated folder. Outside 9-to-5, the guard fails and the site is completely normal — no permanent block, no separate app to disable.
Recipe 2 — warm night tint
Late-night browsing is easier on the eyes with a warm, dimmed overlay. This one injects CSS from JS so it can be conditional — a plain CSS rule could not check the hour.
(() => {
const hour = new Date().getHours();
if (!(hour >= 21 || hour < 7)) return;
const tint = document.createElement('div');
Object.assign(tint.style, {
position: 'fixed', inset: '0',
background: 'rgba(255, 147, 41, 0.18)',
pointerEvents: 'none',
zIndex: 2147483600,
mixBlendMode: 'multiply',
});
document.documentElement.appendChild(tint);
// Also dim overall brightness a touch
document.documentElement.style.filter = 'brightness(0.9)';
})();The overlay uses pointer-events: none so it never blocks clicks, and mix-blend-mode: multiply so it warms colors rather than just fogging them. Apply it with a broad URL pattern for a site-wide night mode.
Recipe 3 — a weekend-only layout
Maybe a work dashboard should look calmer on Saturday and Sunday — wider margins, muted colors, no urgent-red badges. Combine the URL pattern (the dashboard) with a weekend check.
(() => {
const day = new Date().getDay();
if (day !== 0 && day !== 6) return; // weekdays: do nothing
const css = document.createElement('style');
css.textContent = `
body { max-width: 900px; margin: 0 auto; }
.badge-urgent, .alert-red { filter: grayscale(1); }
.notifications { display: none !important; }
`;
document.head.appendChild(css);
})();On weekdays the guard returns and the dashboard is its normal self. This is the cleanest way to get a "weekend mode" without maintaining two rules.
Recipe 4 — after 6pm, hide work tools
The inverse of focus mode: in the evening, gently discourage opening work apps. Scope the rule to your work tools and check for the evening window.
(() => {
const now = new Date();
const hour = now.getHours();
const day = now.getDay();
// After 18:00, or anytime on the weekend
const offHours = hour >= 18 || day === 0 || day === 6;
if (!offHours) return;
const banner = document.createElement('div');
banner.textContent = 'It is after hours. Sure you need this now?';
Object.assign(banner.style, {
position: 'fixed', top: '0', left: '0', right: '0',
background: '#b45309', color: '#fff',
font: '600 14px system-ui', textAlign: 'center',
padding: '10px', zIndex: 2147483600,
});
document.body.appendChild(banner);
document.body.style.filter = 'grayscale(0.4)';
})();A soft nudge — a banner and a slight desaturation — rather than a hard block. Adjust to taste; the structure is identical to the others.
Combining time with URL patterns
The two layers compose naturally:
- The URL pattern picks the sites —
*://*.twitter.com/*,https://news.example.com/*, or*for everywhere. - The time guard picks the moments — work hours, night, weekend, evening.
- Group several time-based rules into one folder so you can flip the whole regime on or off in one click.
You can also gate it by minute for finer control (getMinutes()), or by date for a "until end of month" rule (getDate(), getMonth()).
Things to keep in mind
- The clock is the user's local time — great for personal scheduling, but it follows the machine. Travel across time zones and the rule shifts with you.
- The check runs at injection time — when the page loads. A page left open across a boundary (say through 17:00) will not re-evaluate until you reload. Add a
setIntervalre-check if that matters. - Test the wrap-around ranges — the night window
hour >= 21 || hour < 7is the easiest place to introduce a bug. - Keep effects reversible — prefer adding an overlay or a style element over destroying the DOM, unless a hard block is the point.
See also
- Disable dark patterns and fake urgency — more JS rules that reshape how a site behaves.
- A responsive debugging overlay — another practical injected-JavaScript tool.
Rules match on URL, but JavaScript owns the clock — and that is all you need for focus modes, night tints and weekend layouts. Install JustZix and let your rules tell the time.
Rate this post
No ratings yet — be the first.