{"id":13471146,"url":"https://github.com/widget-/slack-black-theme","last_synced_at":"2025-09-28T20:32:03.407Z","repository":{"id":89544609,"uuid":"84956318","full_name":"widget-/slack-black-theme","owner":"widget-","description":"A darker, more contrasty, Slack theme.","archived":true,"fork":false,"pushed_at":"2019-07-30T20:07:30.000Z","size":35,"stargazers_count":1747,"open_issues_count":65,"forks_count":408,"subscribers_count":46,"default_branch":"master","last_synced_at":"2024-09-27T03:03:36.942Z","etag":null,"topics":["dark-theme","slack","slack-hacks","slack-theme"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/widget-.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-03-14T14:07:38.000Z","updated_at":"2024-09-03T20:08:24.000Z","dependencies_parsed_at":"2023-03-08T22:30:54.642Z","dependency_job_id":null,"html_url":"https://github.com/widget-/slack-black-theme","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/widget-%2Fslack-black-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/widget-%2Fslack-black-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/widget-%2Fslack-black-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/widget-%2Fslack-black-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/widget-","download_url":"https://codeload.github.com/widget-/slack-black-theme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234563123,"owners_count":18853056,"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","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":["dark-theme","slack","slack-hacks","slack-theme"],"created_at":"2024-07-31T16:00:40.506Z","updated_at":"2025-09-28T20:31:58.124Z","avatar_url":"https://github.com/widget-.png","language":"CSS","readme":"# Slack Black Theme\n\nA darker, more contrasty, Slack theme.\n\n# Preview\n\n![Screenshot](https://cloud.githubusercontent.com/assets/7691630/24120350/4cbb643e-0d82-11e7-8353-5d4eb65dfd6a.png)\n\n# Installing into Slack\n\nFind your Slack's application directory.\n\n* Windows: `%homepath%\\AppData\\Local\\slack\\`\n* Mac: `/Applications/Slack.app/Contents/`\n* Linux: `/usr/lib/slack/` (Debian-based)\n\n\nOpen up the most recent version (e.g. `app-2.5.1`) then open\n`resources\\app.asar.unpacked\\src\\static\\index.js`\n\nFor versions after and including `3.0.0` the same code must be added to the following file\n`resources\\app.asar.unpacked\\src\\static\\ssb-interop.js`\n\nAt the very bottom, add\n\n```js\n// First make sure the wrapper app is loaded\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n\n   // Then get its webviews\n   let webviews = document.querySelectorAll(\".TeamView webview\");\n\n   // Fetch our CSS in parallel ahead of time\n   const cssPath = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css';\n   let cssPromise = fetch(cssPath).then(response =\u003e response.text());\n\n   let customCustomCSS = `\n   :root {\n      /* Modify these to change your theme colors: */\n      --primary: #09F;\n      --text: #CCC;\n      --background: #080808;\n      --background-elevated: #222;\n   }\n   `\n\n   // Insert a style tag into the wrapper view\n   cssPromise.then(css =\u003e {\n      let s = document.createElement('style');\n      s.type = 'text/css';\n      s.innerHTML = css + customCustomCSS;\n      document.head.appendChild(s);\n   });\n\n   // Wait for each webview to load\n   webviews.forEach(webview =\u003e {\n      webview.addEventListener('ipc-message', message =\u003e {\n         if (message.channel == 'didFinishLoading')\n            // Finally add the CSS into the webview\n            cssPromise.then(css =\u003e {\n               let script = `\n                     let s = document.createElement('style');\n                     s.type = 'text/css';\n                     s.id = 'slack-custom-css';\n                     s.innerHTML = \\`${css + customCustomCSS}\\`;\n                     document.head.appendChild(s);\n                     `\n               webview.executeJavaScript(script);\n            })\n      });\n   });\n});\n```\n\nNotice that you can edit any of the theme colors using the custom CSS (for\nthe already-custom theme.) Also, you can put any CSS URL you want here,\nso you don't necessarily need to create an entire fork to change some small styles.\n\nThat's it! Restart Slack and see how well it works.\n\nNB: You'll have to do this every time Slack updates.\n\n# Color Schemes\n\nHere's some example color variations you might like.\n\n## Default\n![Default](https://cloud.githubusercontent.com/assets/7691630/24120350/4cbb643e-0d82-11e7-8353-5d4eb65dfd6a.png)\n```\n--primary: #09F;\n--text: #CCC;\n--background: #080808;\n--background-elevated: #222;\n```\n\n## One Dark\n![One Dark](https://user-images.githubusercontent.com/806101/27455546-826b3d88-5752-11e7-8a6b-87285b90eb3e.png)\n```\n--primary: #61AFEF;\n--text: #ABB2BF;\n--background: #282C34;\n--background-elevated: #3B4048;\n```\n\n## Low Contrast\n![Low Contrast](https://cloud.githubusercontent.com/assets/7691630/24120352/4ccdedf2-0d82-11e7-8ff7-c88e48b8e917.png)\n```\n--primary: #CCC;\n--text: #999;\n--background: #222;\n--background-elevated: #444;\n```\n\n## Navy\n![Navy](https://cloud.githubusercontent.com/assets/7691630/24120353/4cd08c4c-0d82-11e7-851a-4c62340456ad.png)\n```\n--primary: #FFF;\n--text: #CCC;\n--background: #225;\n--background-elevated: #114;\n```\n\n## Hot Dog Stand\n![Hot Dog Stand](https://cloud.githubusercontent.com/assets/7691630/24120351/4cca6182-0d82-11e7-8de8-7ab99dcde042.png)\n```\n--primary: #000;\n--text: #FFF;\n--background: #F00;\n--background-elevated: #FF0;\n```\n\n# Development\n\n`git clone` the project and `cd` into it.\n\nChange the CSS URL to `const cssPath = 'http://localhost:8080/custom.css';`\n\nRun a static webserver of some sort on port 8080:\n\n```bash\nnpm install -g static\nstatic .\n```\n\nIn addition to running the required modifications, you will likely want to add auto-reloading:\n\n```js\nconst cssPath = 'http://localhost:8080/custom.css';\nconst localCssPath = '/Users/bryankeller/Code/slack-black-theme/custom.css';\n\nwindow.reloadCss = function() {\n   const webviews = document.querySelectorAll(\".TeamView webview\");\n   fetch(cssPath + '?zz=' + Date.now(), {cache: \"no-store\"}) // qs hack to prevent cache\n      .then(response =\u003e response.text())\n      .then(css =\u003e {\n         console.log(css.slice(0,50));\n         webviews.forEach(webview =\u003e\n            webview.executeJavaScript(`\n               (function() {\n                  let styleElement = document.querySelector('style#slack-custom-css');\n                  styleElement.innerHTML = \\`${css}\\`;\n               })();\n            `)\n         )\n      });\n};\n\nfs.watchFile(localCssPath, reloadCss);\n```\n\nInstead of launching Slack normally, you'll need to enable developer mode to be able to inspect things.\n\n* Mac: `export SLACK_DEVELOPER_MENU=true; open -a /Applications/Slack.app`\n\n* Linux: (todo)\n\n* Windows: (todo)\n\n# License\n\nApache 2.0\n","funding_links":[],"categories":["CSS","HarmonyOS"],"sub_categories":["Windows Manager"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwidget-%2Fslack-black-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwidget-%2Fslack-black-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwidget-%2Fslack-black-theme/lists"}