├── LICENSE ├── README.md ├── extension.js ├── extension_preview.png ├── icons ├── icon128.png ├── icon16.png ├── icon24.png ├── icon32.png ├── icon48.png └── icon64.png └── manifest.json /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Adam Zerella 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ext-hn-darkmode 2 | 3 | > Browser extension that toggles an opinionated dark theme for the popular website, Hacker News. 4 | 5 | A [recent HN post](https://news.ycombinator.com/item?id=23197966) has shown that the people want some dark mode themes for HN. This is a simple extension that offers some flavours people can use until HN implement a native one. 6 | 7 | ## Preview 8 | 9 | ![Hacker News Dark Theme Preview](https://github.com/adamzerella/ext-hn-darkmode/blob/master/extension_preview.png?raw=true "Hacker News Dark Theme Preview") 10 | -------------------------------------------------------------------------------- /extension.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Credits to 'deleerium' from HN. 3 | * @link https://news.ycombinator.com/item?id=23199649 4 | */ 5 | const CSS = `body { background-color: #1F2430; } 6 | #hnmain { background-color: #232834; } 7 | 8 | a:link.storylink, 9 | #hnmain > tbody > tr:first-child > td a, 10 | .commtext, .commtext a:link, td, b { 11 | color: #fafafa; 12 | } 13 | 14 | .comment > .commtext { 15 | color: #fafafa; 16 | } 17 | 18 | td > .title { 19 | color: #fafafa; 20 | } 21 | 22 | #hnmain > tbody > tr:first-child > td { background-color: #333a4a; } 23 | 24 | a:link, 25 | .sitebit, .subtext, .sitestr, .subtext a:link, 26 | .rank, a.morelink, 27 | .pagetop, .yclinks a, .yclinks > a:link, 28 | .comhead a:link, .comhead, 29 | .hnmore a:link, .reply a:link, { 30 | color: #8c96ac; 31 | } 32 | td .pagetop { 33 | color: #8c96ac; 34 | } 35 | td > a:link { 36 | color: #8c96ac; 37 | } 38 | .title > a:link { 39 | color: #8c96ac; 40 | } 41 | a > u { 42 | color: #8c96ac; 43 | } 44 | 45 | .comment .reply u > a { 46 | color: #8c96ac; 47 | } 48 | 49 | .title > a:visited { 50 | color: #979cf4; 51 | } 52 | 53 | .commtext > p > a:link { 54 | color: #fafafa; 55 | } 56 | .comment .commtext > a:link { 57 | color: #fafafa; 58 | } 59 | .comment .commtext > a:visited { 60 | color: #979cf4; 61 | } 62 | .commtext > p > a:visited { 63 | color: #979cf4; 64 | } 65 | 66 | .votearrow { 67 | overflow: visible; 68 | position: relative; 69 | } 70 | 71 | .yclinks > a, .yclinks > a:link { 72 | color: #8c96ac; 73 | } 74 | .yclinks > a:visited { 75 | color: #979cf4; 76 | } 77 | 78 | .votearrow::before { 79 | content: ""; 80 | width: 0; 81 | height: 0; 82 | left: 1px; 83 | top: 3px; 84 | display: block; 85 | position: absolute; 86 | border-left: 4px solid transparent; 87 | border-right: 4px solid transparent; 88 | border-bottom: 7px solid #bebfd1; 89 | } 90 | 91 | input[type=text], 92 | textarea { 93 | background-color: #333a4a; 94 | color: #fafafa; 95 | border: 1px solid #1F2430; 96 | } 97 | 98 | input[type=submit] { 99 | background-color: #333a4a; 100 | color: #fafafa; 101 | border: 1px solid #1F2430; 102 | } 103 | 104 | b { 105 | color: #fafafa; 106 | } 107 | } 108 | `; 109 | 110 | chrome.tabs.onUpdated.addListener(function ( tabId, info ) { 111 | if ( info.status === "complete" ) { 112 | chrome.tabs.get( tabId, function ( tab ) { 113 | if (isHackerNews( tab.url ) ) { 114 | chrome.tabs.insertCSS( tab.id, { code: CSS } ); 115 | } 116 | }); 117 | } 118 | }); 119 | 120 | function isHackerNews( url ) { 121 | return new URL( url ).host === "news.ycombinator.com"; 122 | } 123 | -------------------------------------------------------------------------------- /extension_preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azerella/ext-hn-darkmode/ae3ab8dfdfe93831474f3686002efe04683ff661/extension_preview.png -------------------------------------------------------------------------------- /icons/icon128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azerella/ext-hn-darkmode/ae3ab8dfdfe93831474f3686002efe04683ff661/icons/icon128.png -------------------------------------------------------------------------------- /icons/icon16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azerella/ext-hn-darkmode/ae3ab8dfdfe93831474f3686002efe04683ff661/icons/icon16.png -------------------------------------------------------------------------------- /icons/icon24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azerella/ext-hn-darkmode/ae3ab8dfdfe93831474f3686002efe04683ff661/icons/icon24.png -------------------------------------------------------------------------------- /icons/icon32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azerella/ext-hn-darkmode/ae3ab8dfdfe93831474f3686002efe04683ff661/icons/icon32.png -------------------------------------------------------------------------------- /icons/icon48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azerella/ext-hn-darkmode/ae3ab8dfdfe93831474f3686002efe04683ff661/icons/icon48.png -------------------------------------------------------------------------------- /icons/icon64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azerella/ext-hn-darkmode/ae3ab8dfdfe93831474f3686002efe04683ff661/icons/icon64.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "Hacker News Dark Theme", 4 | "short_name": "hndt", 5 | "author": "Adam Zerella", 6 | "homepage_url": "https://github.com/adamzerella/ext-hn-darkmode", 7 | "version": "0.1.0", 8 | "description": "A non-invaise dark theme for Hacker News.", 9 | "permissions": [ "https://news.ycombinator.com/" ], 10 | "background": { 11 | "scripts": ["extension.js"], 12 | "persistent": false 13 | }, 14 | "browser_action": { 15 | "default_icon": { 16 | "16": "icons/icon16.png", 17 | "24": "icons/icon24.png", 18 | "32": "icons/icon32.png" 19 | }, 20 | "default_title": "Hacker News Dark Theme" 21 | }, 22 | "web_accessible_resources" : [ "extension.js" ], 23 | "icons": { "16": "icons/icon16.png", "48": "icons/icon64.png", "128": "icons/icon128.png" } 24 | } --------------------------------------------------------------------------------