Skip to main content

Cách cài đặt chế độ Dark (không chính thức) cho Slack

Cách cài đặt chế độ Dark (không chính thức) cho Slack

Geoffrey Carr

Slack vẫn không có chế độ tối. Họ có chủ đề tối, nhưng những người chỉ cho phép bạn tùy chỉnh các màu sắc bên, để lại cửa sổ chính màu trắng. Với việc phát hành các chế độ tối trên toàn hệ thống trên MacOS Mojave và Windows 10, Slack cảm thấy rất lạc hậu.

Phương pháp này là không chính thức và liên quan đến đào bới xung quanh trong các tập tin nguồn cho Slack. Nó khá dễ dàng để làm, nhưng vì nó sẽ được ghi đè mỗi khi bạn cập nhật, bạn sẽ phải làm điều này nhiều lần.

Tải xuống một chủ đề

Vì Slack chạy trên Electron, một khuôn khổ để phát triển các ứng dụng Node.js trên máy tính để bàn, bạn có thể chỉnh sửa các kiểu cho ứng dụng như bạn muốn chỉnh sửa CSS của trang web. Nhưng các tệp CSS cho Slack được chôn trong nguồn, vì vậy bạn sẽ phải tải các chủ đề của riêng mình.

Chủ đề chế độ tối thực sự phổ biến nhất là Widget đen. Và kể từ khi mã cổ phiếu Electron trên nền tảng, chủ đề này cũng sẽ hoạt động trên Windows và Linux. Chúng tôi thấy có một số vấn đề với chủ đề trên macOS Mojave, vì vậy nếu nó không hoạt động thì bạn có thể thử cái nĩa này, nó chỉ hoạt động trên macOS nhưng cũng có thể hoạt động với người dùng Windows.

Patching Slack

Phần này, bạn sẽ phải làm lại mỗi lần Slack cập nhật. Trên macOS, bạn có thể truy cập thư mục nguồn của Slack bằng cách nhấp chuột phải vào chính ứng dụng và chọn "Hiển thị nội dung gói". Trên Windows, bạn sẽ tìm thấy nó tại~AppDataLocalslack .

Sau đó, điều hướng một vài thư mục xuống resources/app.asar.unpacked/src/static/ . Bạn sẽ muốn tìm ssb-interop.js tệp, nơi bạn sẽ chỉnh sửa mã. Đảm bảo Slack đã đóng, mở tệp đó trong trình chỉnh sửa văn bản yêu thích của bạn và cuộn xuống dưới cùng:

Sao chép và dán mã sau vào cuối ssb-interop.js tập tin:

// 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://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css'; let cssPromise = fetch(cssPath).then(response => response.text()); let customCustomCSS = ` :root { /* Modify these to change your theme colors: */ --primary: #09F; --text: #CCC; --background: #080808; --background-elevated: #222; } ` // 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); }) }); }); });

Có thể bạn sẽ muốn sao chép tệp này và lưu tệp ở một vị trí khác, do đó bạn không phải chỉnh sửa mã mỗi lần. Bằng cách này, bạn chỉ có thể kéo nó vào thư mục để ghi đè lên phiên bản mới nhất:

Sau khi bạn hoàn tất, mở lại Slack và sau vài giây, chế độ tối sẽ khởi động. Màn hình tải sẽ vẫn có màu trắng nhưng cửa sổ ứng dụng chính sẽ kết hợp tốt hơn với phần còn lại của hệ thống:

Thêm chủ đề của riêng bạn

Nếu bạn không thích giao diện của nó, bạn có thể chỉnh sửa CSS với bất kỳ kiểu nào bạn muốn. Tất cả mã này đều tải các kiểu tùy chỉnh từ https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css; bạn có thể tải xuống tệp đó, chỉnh sửa tệp đó bằng các thay đổi của mình và thay thế URL bằng mã của riêng bạn. Lưu, khởi chạy lại Slack và các thay đổi của bạn sẽ hiển thị. Nếu bạn không biết CSS hoặc chỉ muốn thực hiện thay đổi nhỏ, có bốn biến màu được xác định trước khi tải CSS, vì vậy bạn chỉ có thể chỉnh sửa các biến đó bằng màu của riêng mình.

Link
Plus
Send
Send
Pin