text Slack的Solarized Dark

Posted 2021-05-02

/*
// First make sure the wrapper app is loaded
document.addEventListener("DOMContentLoaded", function() {

  // Then get its webviews
  let webviews = document.querySelectorAll(".TeamView webview");

  // Fetch our CSS in parallel ahead of time
  const cssPath = 'https://gist.githubusercontent.com/johanntang/e4d0c90e8a8ae7909cb38f5cfd3c8aec/raw/a490ee63a89e2bf5aa980aaba3cca44a04f38455/slacktheme';
  let cssPromise = fetch(cssPath).then(response => response.text());

  let customCustomCSS = `
  :root {
    /* Modify these to change your theme colors: */
    --primary: #61AFEF;
    --text: #FDF6E3;
  }
`

// Insert a style tag into the wrapper view
cssPromise.then(css => {
  let s = document.createElement('style');
  s.type = 'text/css';
  s.innerHTML = css + customCustomCSS;
  document.head.appendChild(s);
});

// Wait for each webview to load
webviews.forEach(webview => {
  webview.addEventListener('ipc-message', message => {
    if (message.channel == 'didFinishLoading')
      // Finally add the CSS into the webview
      cssPromise.then(css => {
        let script = `
          let s = document.createElement('style');
          s.type = 'text/css';
          s.id = 'slack-custom-css';
          s.innerHTML = \`${css + customCustomCSS}\`;
          document.head.appendChild(s);
        `
        webview.executeJavaScript(script);
        })
      });
   });
});
*/

#msgs_scroller_div::-webkit-scrollbar-track, #client_body::before, .client_container, 
#search_terms, #client_body, #footer, ts-message, .channel_header, ts-jumper ts-jumper-container,
ts-jumper input[type="text"] {
  background: #002b36 !important;
}

#client_body::before {
  border-bottom: 1px solid #1a2129 !important;
}

ts-message, .channel_title .channel_name, ts-jumper input[type="text"],
ts-jumper ol li .member_real_name, ts-jumper ol li .view_name, ts-jumper ol li .channel_name { 
  color: #FDF6E3 !important;
}

.light_theme ts-message .message_content .message_sender, #msg_input::-webkit-input-placeholder,
ts-jumper input[type="text"]::-webkit-input-placeholder {
  color: #FDF6E3 !important;
}

#msg_input, #primary_file_button {
  background: transparent !important;
  color: #FDF6E3 !important;
  border-color: #444 !important;
}

.day_divider .day_divider_label {
  color: #eee !important;
}

.day_container .day_msgs {
  border-top: 1px solid #1a2129 !important;
}

ts-message:hover, .day_divider .day_divider_label {
  background: #1A2129 !important;
}

#messages_container::after {
  background: none !important;
}

.bot_label { 
  padding: 0 4px !important;
  border-radius: 3px !important;
  background: #0a233a !important;
}