{"id":14988502,"url":"https://github.com/jgthms/hacker-news-dark-mode","last_synced_at":"2025-10-07T19:51:55.577Z","repository":{"id":65982003,"uuid":"264438527","full_name":"jgthms/hacker-news-dark-mode","owner":"jgthms","description":"Hacker News Dark Mode","archived":false,"fork":false,"pushed_at":"2020-05-16T13:47:47.000Z","size":452,"stargazers_count":19,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-05T11:51:08.766Z","etag":null,"topics":["css","dark-mode","dark-theme","hacker-news"],"latest_commit_sha":null,"homepage":"https://jgthms.com/hacker-news-dark-mode/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jgthms.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-16T13:02:28.000Z","updated_at":"2024-01-30T11:30:24.000Z","dependencies_parsed_at":"2023-02-19T19:01:23.372Z","dependency_job_id":null,"html_url":"https://github.com/jgthms/hacker-news-dark-mode","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jgthms/hacker-news-dark-mode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgthms%2Fhacker-news-dark-mode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgthms%2Fhacker-news-dark-mode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgthms%2Fhacker-news-dark-mode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgthms%2Fhacker-news-dark-mode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jgthms","download_url":"https://codeload.github.com/jgthms/hacker-news-dark-mode/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgthms%2Fhacker-news-dark-mode/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278838324,"owners_count":26054720,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","dark-mode","dark-theme","hacker-news"],"created_at":"2024-09-24T14:16:49.797Z","updated_at":"2025-10-07T19:51:55.559Z","avatar_url":"https://github.com/jgthms.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hacker News Dark Mode\n\n\u003ca href=\"https://jgthms.com/hacker-news-dark-mode/\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/jgthms/hacker-news-dark-mode/master/screenshot.png\" alt=\"Hacker News Dark Mode screenshot\" style=\"max-width:100%;\" width=\"1200\"\u003e\u003c/a\u003e\n\n## Process\n\nI took the [original CSS file](https://news.ycombinator.com/news.css) and applied as few as possible changes in order to set up a Dark Mode.\nI took the original literal color values (like `#000000`) and used them to set up a list of initial [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties):\n\n```css\n:root {\n  --black: #000000;\n  --dark-grey: #222;\n  --light-grey: #828282;\n  --lightest-grey: #eee;\n  --white: #ffffff;\n  --orange: #ff6600;\n  --beige: #f6f6ef;\n}\n```\n\nI then set up semantic variables by referencing initial variables:\n\n```css\n:root {\n  --page-background: var(--white);\n  --accent: var(--orange);\n  --text: var(--light-grey);\n  --text-strong: var(--black);\n  --border: var(--dark-grey);\n  --background: var(--beige);\n  --input-background: var(--white);\n  --input-border: var(--lightest-grey);\n}\n```\n\nAt this point, the site should look exactly the same.\n\nFor Dark Mode, we could use the CSS media query [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).\nHowever, the user might prefer Hacker News in light mode, whilst having his OS in Dark Mode.\nSince there is no way to setup a color scheme preference per website, we'll be using a `data` attribute on the `\u003chtml\u003e` element:\n\n```html\n\u003chtml lang=\"en\" op=\"news\" data-theme=\"dark\"\u003e\n```\n\nThis also makes it easier me to force the Dark Mode for demonstration purposes.\n\nThis theme attribute can be targeted with CSS:\n\n```css\n:root[data-theme=\"dark\"] {\n  --page-background: var(--darkest-blue);\n  --accent: var(--blue);\n  --text: var(--light-blue);\n  --text-strong: var(--lightest-grey);\n  --border: var(--light-blue);\n  --background: var(--dark-blue);\n  --input-border: var(--dark-blue);\n  --input-background: var(--darkest-blue);\n  --input-border: var(--accent);\n}\n```\n\nThere were also some additional changes I had to make for the Dark Mode to work.\n\n## Dark Mode detection\n\nFor demonstration purposes, the Dark Mode is forced here by setting a `data` attribute on the `\u003chtml\u003e` element.\nIdeally, this preference would be a user one, and the server would return the appropriate HTML.\nIt is possible to detect the user's OS preference in JS:\n\n```js\nwindow.matchMedia(\"(prefers-color-scheme: dark)\").matches; // True if useOS preference is dark\n```\n\nBut swapping the theme client-side causes **flickering** on load, so it should be avoided.\nIt could however be used to detect a user's OS preference and set a default value server-side.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgthms%2Fhacker-news-dark-mode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjgthms%2Fhacker-news-dark-mode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgthms%2Fhacker-news-dark-mode/lists"}