0

My goal is to add dark theme in slack windows application. I found so many threads which recommend some solution. Here, they refer to some CSS and that works fine.

Code that works:

document.addEventListener('DOMContentLoaded', function() {
 $.ajax({
   url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css',
   success: function(css) {
     $("<style></style>").appendTo('head').html(css);
   }
 });
});

I do not want to access these links due to security reasons so copied that CSS file on my machine and want to access that but I guess I am doing something wrong.

Following are my attempts:

Attempt-1

document.addEventListener('DOMContentLoaded', function() {
 $.ajax({
   href: 'C://LocalPath/slack/app-3.3.1/resources/app.asar.unpacked/src/static/slack_dark_theme.css',
   media: media || 'screen',
   type: 'text/css',
   rel: 'stylesheet'
   success: function(css) {
     $("<style></style>").appendTo('head').html(css);
   }
 });
});

Attempt-2

document.addEventListener('DOMContentLoaded', function() {
 $.ajax({
   url: 'C://LocalPath/slack/app-3.3.1/resources/app.asar.unpacked/src/static/slack_dark_theme.css',
   dataType:"script",
   success: function(css) {
     $("<style></style>").appendTo('head').html(css);
   }
 });
});

Attempt-3

document.addEventListener('DOMContentLoaded', function() {
 $.ajax({
   url: 'C://LocalPath/slack/app-3.3.1/resources/app.asar.unpacked/src/static/slack_dark_theme.css',
   dataType:"script",
   success: function(css) {
     $("head").append("<style>" + css + "</style>");
   }
 });
});

Attempt-4

document.addEventListener('DOMContentLoaded', function() {
 $.ajax({
   url: 'C://LocalPath/slack/app-3.3.1/resources/app.asar.unpacked/src/static/slack_dark_theme.css',
   dataType:"script",
   success: function(css) {
     $("<style type="text/css"></style>").appendTo('head').html(css);
   }
 });
});

Attempt-5

document.addEventListener('DOMContentLoaded', function() {
 $.ajax({
   url: 'file:///C://LocalPath/slack/app-3.3.1/resources/app.asar.unpacked/src/static/slack_dark_theme.css',
   success: function(css) {
     $("<style></style>").appendTo('head').html(css);
   }
 });
});
GThree
  • 2,708
  • 7
  • 34
  • 67
  • Your question is unclear. Why are you referring to a local path? – bart Oct 03 '18 at 18:14
  • Additionally, you don't explain what goes wrong. Do you get an error? – bart Oct 03 '18 at 18:14
  • @bart I do not get an error. Slack app goes back to white background which is default one. – GThree Oct 03 '18 at 18:15
  • @bart I do not want to load files directly into our app so copied the css locally. – GThree Oct 03 '18 at 18:17
  • 1
    Can't see that working with absolute local paths. If you'd included the CSS using a `` element, it would have a chance of working. But the problem is that you want the file via AJAX. No can do. You can't ajax something from the local filesystem - you need a server running for that. For a far better explanation, see here: https://stackoverflow.com/questions/38344612/ajax-request-to-local-file-system-not-working-in-chrome – enhzflep Oct 03 '18 at 18:37
  • @enhzflep That make sense. – GThree Oct 03 '18 at 18:41
  • I have a better idea: Use a dark theme for your browser. Works great with Slack (e.g. with Hoth theme) and does not require any hacking. e.g. Dark Mode for Firefox. Plus you stay in dark mode when opening external documents, e.g. from Google Docs – Erik Kalkoken Oct 03 '18 at 20:10

0 Answers0