♈️ 🕡 🖖 Membuat Tema Gelap untuk Stack Overflow 🦒 😆 ⛽️

Pada 30 Maret 2020, pengembang Stack Overflow memberi pengunjung situs web kesempatan untuk menggunakan versi beta dari tema gelap. Bahan, terjemahan yang kami terbitkan, didedikasikan untuk kisah bagaimana tema gelap Stack Overflow dibuat.

Banner on Stack Overflow, yang memungkinkan Anda memasukkan tema gelap

Nama saya Aaron Sheki. Saya adalah kepala desain di Stack Overflow. Saya berpartisipasi dalam desain komponen antarmuka yang mendasari fitur-fitur baru proyek.

Untuk memulainya, sedikit ironi. Secara pribadi, saya bukan penggemar tema antarmuka gelap.

Saya sering melihat bahwa tingkat kontras antarmuka gelap terlalu rendah. Desain antarmuka seperti itu sulit untuk menggunakan berbagai macam warna. Hal yang sama berlaku untuk mensimulasikan volume menggunakan bayangan, dan untuk menerapkan efek visual lainnya. Ketika saya membaca teks terang, terletak di latar belakang gelap, mata saya lelah. Sulit untuk menghadapi fenomena seperti kontras simultan ketika menggunakan tema terang, dan jika tema gelap digunakan, maka semuanya menjadi lebih rumit.

Tapi saya orang yang upayanya mengangkat tema gelap di Stack Overflow.

Pekerjaan yang ingin saya bicarakan tidak pernah ditujukan secara khusus untuk mengembangkan topik gelap, meskipun banyak pengguna telah lama meminta untuk melengkapi sumber daya dengan topik seperti itu. Tetapi dalam perjalanan menuju topik gelap, kami harus menyelesaikan banyak masalah. Secara khusus, kode front-end Stack Overflow telah ditingkatkan, aksesibilitas konten telah ditingkatkan. Bekerja pada topik gelap, kami mendapat insentif untuk menggunakan sistem desain kami lebih luas dalam proyek .

Bisakah kita memberi pengguna tema gelap, dan sekaligus membuka jalan untuk meningkatkan aksesibilitas proyek? Kami menjawab pertanyaan ini dengan tegas, setelah melakukan semua yang akan saya sampaikan sekarang.

Penelitian warna

Saat membuat skala warna asli untuk proyek, kami, mungkin sedikit naif, mengambil nilai warna tertentu dan memodifikasinya menggunakan transformasi yang diimplementasikan menggunakan Less . Jadi, misalnya, kita bisa mendeklarasikan variabel Kurang @reddan membuat warna lebih gelap beberapa kali menggunakan desain darken(@red, 10%). Hal yang sama berlaku untuk klarifikasi beberapa warna menggunakan tint(@red, 10%). Ini dapat memberikan skala warna di mana warna berada dalam kisaran mulai dari @red-050dengan @red-900peningkatan 10%.

Ketika saya pertama kali mencoba memahami bagaimana sumber daya Stack Overflow mungkin terlihat dalam mode gelap, saya memutuskan untuk hanya mencoba mengubah latar belakang putih menjadi hitam dan "membalik" skala warna. Dengan pendekatan ini, warna @red-050menjadi warna@red-900, warna secara bersesuaian berubah antara warna awal dan akhir skala. Namun warna-warna ini sendiri tetap sama dengan yang digunakan sebelumnya.

Sisik warna terang dan gelap untuk merah

Dengan pendekatan ini, kontras elemen telah berkurang. Apa yang terjadi ternyata mengandung sesuatu yang, secara umum, saya tidak suka tentang topik gelap. Misalnya, jika Anda memperhatikan dengan seksama versi merah yang paling gelap, yang terletak di latar belakang gelap, Anda akan melihat bahwa warnanya hampir tidak bisa dibedakan. Kami akan berbicara lebih banyak tentang ini di bawah ini.

Kita pasti perlu membuat sesuatu yang lebih baik.

▍ Mulai: desain tata letak

Hanya mencoba menggambar skala warna, saya sebenarnya tidak mencapai apa-apa. Langkah ini tidak bisa disebut sebagai awal nyata pekerjaan pada topik gelap. Oleh karena itu, saya memutuskan untuk mulai mengembangkan tata letak dan memilih warna secara manual dalam Figma . Saya memilih warna, berfokus pada bagaimana, menurut pendapat saya, Stack Overflow akan terlihat, dan tidak memikirkan bagaimana warna baru akan berhubungan dengan yang sudah ada. Mengurangi kontras keseluruhan adalah kunci untuk mempertahankan efek kedalaman pada antarmuka, untuk mendukung bayangan elemen, untuk menerapkan spektrum penuh warna.

Memulai dengan desain tata letak memungkinkan kami, pertama-tama, untuk memahami apa efek estetika yang kami perjuangkan, sementara tidak memperhatikan persyaratan teknis untuk proyek tersebut

ElPilihan algoritma yang ditingkatkan untuk bekerja dengan warna

Setelah saya mengambil latar belakang yang lebih terang untuk tema gelap, saya mendapat kesempatan untuk lebih mengeksplorasi skala warna. Pertama, saya harus berurusan dengan beberapa masalah warna dari sistem desain yang ada, yang muncul ketika menerapkan tema ringan. Pada ujung spektrum yang cerah, warna merah dan kuning tidak tampak seperti yang saya inginkan. Beberapa warna memiliki nilai paling terang, terlalu dekat dengan putih. Ada warna, nilai-nilai paling terang yang terlalu gelap.

Versi kuning yang paling

terang tidak bisa dibedakan dari putih, dan yang paling gelap tidak bisa dibedakan dari hitam . Kami punya masalah di ujung spektrum yang gelap. Dengan menggunakan, sebagai latar belakang, warna@red-900dan@blue-900, kami memperhatikan bahwa warna-warna ini tidak dapat dibedakan dari hitam dan dari satu sama lain. Kami membutuhkan algoritme yang akan memberi kami warna yang nada utamanya dapat dibedakan untuk versi paling terang dan paling gelap. Ini akan memungkinkan pembuatan komponen menggunakan nilai warna ini.

Variasi paling gelap dari warna kami tidak dapat dibedakan dari hitam dan dari satu sama lain.

Membuat komponen yang menerapkan pemberitahuan, kami tidak dapat menggunakan warna dari sistem desain kami. Sebagai gantinya, kami perlu memilih warna kami sendiri di mata.

Warna-warna ini indah, tetapi mereka tidak didasarkan pada nilai warna dari skala warna kami.

Saya menggunakan alat ColorBox yang indahdari Lyft Designuntuk menormalkan warna. Alih-alih mengubah warna dengan cara yang paling sederhana, secara linear, dengan peningkatan 10%, saya menerapkan kurva Bezier. Ini memungkinkan kami untuk mencapai peningkatan signifikan dalam posisi ekstrem skala warna.

Setelah menormalkan warna pada bagian terang dari spektrum, saya dapat membuat notifikasi yang warnanya diambil dari warna sistem desain kami

▍ Warna gelap

Setelah kami mengurutkan versi terang situs tersebut, saatnya untuk mencoba warna baru dengan latar belakang yang gelap. Akibatnya, saya menggunakan pengaturan manual tentang apa yang dihasilkan algoritma pencocokan warna, melakukan ini untuk mempertahankan warna korporat yang telah digunakan untuk waktu yang sangat lama. Ini memungkinkan saya untuk menggunakan warna baru dalam produksi dan pada saat yang sama melakukan tanpa perubahan drastis dalam penampilan proyek.

Gamut warna yang dinormalisasi penuh

Menerapkan tema gelap di antarmuka Stacks

Jika saya entah bagaimana berharap untuk melengkapi Stack Overflow dengan tema gelap, pertama-tama saya perlu menerapkan tema gelap dalam sistem desain Stacks kami , menggunakannya sebagai tempat pengujian untuk menguji teknologi baru.

AriVariabel

Saya perlu mengubah nilai warna heksadesimal statis yang kurang dikompilasi menjadi properti CSS kustom yang dirancang untuk digunakan saat program sedang berjalan. Intinya adalah bahwa nilai warna harus disimpan menggunakan struktur tampilan var(--red-500), daripada menggunakan struktur tampilan statis @red-500. Itu adalah tugas yang menarik - baik dalam desain sistem kami, dan di dalam seluruh situs. Kami biasanya mengambil nilai warna tunggal, seperti @red-500, dan membuatnya lebih terang atau lebih gelap untuk menyorot keadaan elemen yang berbeda (seperti keadaan yang diambil elemen ketika mereka melayang di atasnya, atau ketika mereka mendapatkan fokus), untuk digunakan sebagai warna latar belakang atau warna batas elemen.

Jika kita berbicara tentang warna dari masing-masing tombol, yang kita miliki banyak, tentang warna dari masing-masing tombol, maka kita dapat mengatakan bahwa warna-warna ini diperoleh dalam rangkaian transformasi dari satu nilai warna yang dikompilasi. Itu mengingatkan saya pada satu adegan dari film "The game for a fall." Di sana mereka berbicara tentang kemungkinan mengubah investasi sepersepuluh juta menjadi miliaran dolar. Tidak mengherankan bahwa "transformasi" seperti itu menyebabkan krisis keuangan.

Masalah dengan variabel CSS biasa adalah bahwa Anda tidak dapat menerapkan kurang transformasi untuk mereka. Nilai variabel CSS dihitung pada saat runtime, jadi konstruksi seperti ini darken(var(--red-500), 5%)menyebabkan kesalahan kompilasi.

Semua ini berarti saya perlu mengerjakan ulang kode yang bertanggung jawab, misalnya, untuk tombol styling. Awalnya dia terlihat seperti ini:

.s-btn {
    color: @white;
    background-color: @blue-600;
    border: 1px solid darken(@blue-600, 5%);
    
    &:hover {
        background-color: darken(@blue-600, 5%);
        border-color: darken(@blue-600, 10%);
    }
}

Saya perlu melanjutkan untuk menunjukkan nilai warna yang tepat yang dijelaskan dalam sistem warna kami. Karenanya, saya perlu membuka versi kode ini:

.s-btn {
    color: var(--white);
    background-color: var(--blue-600);
    border: 1px solid var(--blue-700);
    
    &:hover {
        background-color: var(--blue-700);
        border-color: var(--blue-800);
    }
}

Pada saat yang sama, jelas bahwa semuanya tidak terbatas pada tombol. Karena itu, saya perlu mengerjakan ulang gaya semua komponen yang tersedia di Stacks. Hal yang sama berlaku untuk notifikasi, menu pop-up, jendela modal, tautan, dan banyak komponen lainnya.

▍ Kompatibilitas Browser

Jika kita berbicara tentang variabel CSS, aplikasinya berarti perlunya mempertimbangkan dukungan mereka oleh browser. Secara khusus, mereka tidak didukung oleh Internet Explorer 11 - browser yang tidak pernah kita lupakan. Akibatnya, kami memutuskan untuk meninggalkan dukungan IE11, menyingkirkan semua peretasan CSS yang kami tambahkan ke sistem selama bertahun-tahun pengembangannya, dengan mempertimbangkan fitur-fitur browser ini. Selain itu, kami memutuskan untuk mengirim pemberitahuan kepada pengguna IE11 dengan proposal untuk memasang browser baru. Keputusan ini tidak mudah bagi kami. Implementasinya membutuhkan berminggu-minggu refactoring.

Classes Kelas bersyarat

IE11 tidak membatasi saya lagi dan saya dapat bekerja dengan warna di Stacks. Saya memutuskan untuk menambahkan bodykelas ke elemen .theme-system. Setelah melakukan ini, saya dapat mengganti warna terang dengan padanan gelapnya menggunakan kueri media yang sesuai. Selain itu, kami dapat sepenuhnya menolak permintaan media dengan hanya menambahkan ke bodykelas .theme-dark. Ini akan memungkinkan pengguna untuk menggunakan tema gelap situs terlepas dari pengaturan sistem mereka. Inilah yang saya dapatkan sebagai hasilnya:

body {
    --red-600: #c02d2e;
}

body.theme-system {
    @media (prefers-color-scheme: dark) {
        --red-600: #d25d5d;
    }
}

body.theme-dark {
    --red-600: #d25d5d;
}

Untuk mencapai fleksibilitas penuh, Stacks memungkinkan untuk bekerja dengan kelas warna atom, yang berlaku hanya ketika tema gelap diaktifkan. Detail tentang dukungan CSS di Stacks dapat ditemukan di sini . Misalnya, menambahkan kelas ke elemen. d:bg-green-100, perancang menyatakan pemikiran berikut: "Dalam mode gelap, Anda harus menggunakan hijau untuk latar belakang bg-green-100." Kelas bersyarat tambahan yang dirancang untuk mode gelap memungkinkan kita untuk menghapus batas elemen, mengubah latar belakang, dan menyesuaikan warna teks. Di tweet ini Anda bisa melihat contoh penyesuaian warna yang menarik. Pengaturan seperti itu kadang-kadang diperlukan dalam mode gelap. Saya ingin mencatat bahwa salah satu sumber inspirasi ketika mengerjakan mode gelap situs bagi saya adalah kerangka CSS Tailwind .

▍Gunakan tema gelap di Stacks

Setelah tema gelap diimplementasikan di Stacks, kami memutuskan untuk menambahkan tombol ke bagian atas antarmuka sistem yang memungkinkan Anda untuk beralih di antara tema. Karyawan perusahaan seharusnya memiliki kemampuan yang cepat dan nyaman untuk beralih di antara berbagai tema warna situs.

Beralih antara tema terang dan gelap di Stacks

Menerapkan tema gelap di situs utama Stack Overflow

Saya menyelesaikan tugas-tugas yang terkait dengan implementasi tema gelap di antarmuka sistem desain Stacks relatif mudah. Refactoring, yang mempertimbangkan pertimbangan pengembangan sistem di masa depan, membuatnya lebih mudah bagi Stacks untuk menjadi lebih kecil daripada situs utama dari konsekuensi keputusan yang salah yang dibuat di masa lalu. Untuk melengkapi Stack Overflow dengan tema gelap, saya perlu memberikan dukungan untuk variabel Kurang demi kompatibilitas mundur dari solusi. Ini memungkinkan kami untuk mengatur aplikasi tema gelap secara bertahap, di bagian antarmuka yang terpisah.

Karena sebagian besar antarmuka kami, dibuat setelah 2018, didasarkan pada Stacks, bagian antarmuka ini menerima, tanpa upaya tambahan dari pihak kami, tema gelap dan tata letak responsif. Bagaimana dengan bagian utama antarmuka? Semuanya di sini jauh dari sederhana.

▍Warna utama situs

Untuk memulainya, saya perlu membuat perubahan terbesar pada situs yang dapat dibuat tanpa melanggar tema standar ringan Stack Overflow. Tugas yang harus saya selesaikan terutama untuk mengganti variabel Less statis dengan variabel CSS yang setara dengannya. Pertama, saya menerapkan gaya background-color: var(--white)ke latar belakang situs, menggantikannya dengan gaya background-color: @white. Berkat ini, area utama desa sekarang dapat dengan mudah dicat ulang di latar belakang warna gelap. Lalu saya melakukan operasi yang sama dengan warna font dan beberapa elemen lainnya. Pekerjaan ini terutama terdiri dari menghilangkan sejumlah besar kode CSS, karena, misalnya, kami sering menyukai gaya yang terlalu rinci, mengatur warna font elemen anak, meskipun kami bisa bertahan dengan nilai warna yang diwarisi dari elemen induk.

▍ Demonstrasi desain baru untuk karyawan perusahaan

Setelah saya bekerja di blok besar situs, saya meminta programmer kami Adam Lear dan Nick Craver untuk membantu saya menemukan cara untuk menunjukkan versi awal dari tema gelap kepada staf Stack Overflow. Ini akan memungkinkan karyawan untuk memasukkan topik gelap, yang masih sangat jauh dari siap untuk melihat area mana dari situs yang masih perlu ditingkatkan. Ini, saya pikir, akan mendorong mereka untuk membantu memperbaiki bagian situs dengan lalu lintas terbanyak. Ini akan memungkinkan saya untuk mengatasi penghalang utama untuk desain baru. Yaitu, itu akan membantu mengintegrasikan desain baru ke dalam basis kode yang ada.

UttTombol

Jika area situs yang saya kerjakan dibuat menggunakan Stacks, maka untuk mempersiapkannya menggunakan mode gelap, perlu untuk menyelesaikan tidak banyak masalah. Katakanlah, selama pekerjaan, mungkin untuk memutuskan bahwa di suatu tempat perbatasan tidak diperlukan, atau - bahwa di suatu tempat, warna abu-abu khusus diperlukan sebagai warna latar belakang. Persiapan untuk penggunaan rezim gelap ini bisa dibatasi. Sayangnya, sebagian besar situs dibuat tanpa menggunakan tumpukan.

Ini paling jelas dimanifestasikan ketika datang ke tombol. Selama bertahun-tahun bekerja di situs, banyak implementasi tombol telah digunakan di dalamnya. Ini sangat membuat frustrasi ketika kami menyesuaikan elemennya sendiri button. Ini berarti bahwa elemen apa pun button, atau elemen, dihiasi sebagaiinput type=«button», ditugaskan gaya default. Gaya ini memiliki tingkat kekhususan yang sangat tinggi dan didasarkan pada seperangkat aturan yang ketinggalan zaman.

Fakta di atas telah menyebabkan perlunya banyak refactoring, yang masih berlangsung. Ini bertujuan untuk menghapus gaya CSS tingkat elemen buttondan menggantinya dengan yang setara dari Stacks. Secara khusus, kita berbicara tentang fakta bahwa ratusan elemen input type=«submit»perlu diganti <button type="submit" class="s-btn s-btn__primary">. Selain menambahkan pekerjaan, saya perhatikan bahwa kami sering menautkan fungsi JavaScript ke penyeleksi visual. Jika Anda mengubah kelas yang memengaruhi tampilan elemen, ini dapat merusak fungsi tombol. Akibatnya, selama pemrosesan ribuan tombol, saya perlu menambahkan kelas terlebih dahulujs-, sambungkan penangan ke mereka, dan kemudian singkirkan gaya lama yang menentukan tampilan tombol.

Ini pada akhirnya membuat saya menghapus sebagian besar kelas tombol lama, yang memungkinkan tombol untuk mengubah warna dengan benar ketika menghidupkan tema gelap.

▍ Judul Situs Web

Untuk menyulitkan tugas, tajuk yang digunakan di seluruh situs dapat bekerja dalam mode yang berbeda. Kita berbicara tentang mode terang dan gelap, dan tentang mode dukungan untuk topik khusus. Opsi situs untuk tim (Stack Overflow untuk Tim) dan untuk sistem perusahaan secara paksa menggunakan tema tajuk gelap. Selain itu, versi perintah menggunakan warna yang ditentukan oleh warna avatar tim. Seperti banyak komponen kami yang lain, CSS untuk judul situs menyediakan satu warna, yang menentukan apakah judulnya terang atau gelap. Warna ini kemudian, menggunakan instruksi Less kompleks, diubah, yang memungkinkan Anda untuk mendapatkan opsi yang berbeda. Namun, kami tidak dapat melakukan apa yang kami lakukan ketika kami memproses kode dari sistem desain. Artinya, mereka tidak bisa membuang semua CSS lama dan menggantinya dengan kode,yang menggunakan variabel CSS. Faktanya adalah bahwa klien perusahaan kami, pada kenyataannya, sepenuhnya, dengan bantuan tema, menyesuaikan tampilan header. Dalam hal ini, opsi warna dihasilkan berdasarkan satu warna.

Heading ringan

Judul gelap

Command heading

Dalam kasus heading Stack Overflow terang, kami perlu menemukan mekanisme untuk mengetahui apakah warna tertentu ditetapkan menggunakan variabel CSS, atau menggunakan nilai hex statis. Jika warna disetel menggunakan variabel CSS, maka kita bisa sepenuhnya melewatkan transformasi Kurangnya, menciptakan tajuk yang bisa mengubah warna berdasarkan parameter tema gelap. Jika variabel Less statis digunakan sebagai gantinya, Anda harus mengevaluasi warna untuk melihat apakah itu terang atau gelap, dan membuat judul yang sesuai.

Akibatnya, kami sampai pada pendekatan ini:

& when ( iscolor(@theme-topbar-background-color) ) {
     @theme-topbar-style: if(luma(@theme-topbar-background-color) >= 50%, light, dark);
 }
 & when not ( iscolor(@theme-topbar-background-color) ) {
     @theme-topbar-style: automatic;
 }

Kemudian, berdasarkan nilai yang diterima ( automatic, lightatau dark), header yang benar dibuat.

Tag

Jika saya bisa memberikan hanya satu saran kepada mereka yang terlibat dalam desain komponen, maka akan berbunyi: "Jangan menjelaskan dalam komponen apa yang mempengaruhi lokasi mereka di halaman." Dengan kata lain, ruang seperti apa yang memisahkan komponen harus menentukan konteks penerapannya. Tidak perlu mengatur hal-hal seperti itu di komponen itu sendiri. Dalam versi Stack Overflow sebelumnya, diputuskan bahwa post-tagpadding eksternal harus diterapkan pada komponen . Pada saat yang sama, tag, seperti tombol, ternyata menjadi subjek masalah terkait JavaScript. Untuk membuat segalanya lebih sulit, kebanyakan tag dibuat menggunakan metode pembantu tunggal.

Tag refactoring melibatkan penggantian post-tagkomponen dengans-tag-komponen yang dirancang untuk menggunakan topik yang berbeda. Karya ini juga termasuk perubahan pada JavaScript, dengan mempertimbangkan penggunaannya js-tag. Selain itu, perlu untuk mengubah metode yang bertanggung jawab untuk membuat tag, membuatnya sehingga akan menerima kelas sewenang-wenang yang mempengaruhi penempatan elemen. Faktanya adalah bahwa dalam konteks tertentu, tag mungkin perlu ditempatkan dalam tata letak fleksibel, melakukan ini alih-alih mengandalkan indentasi eksternal yang telah ditentukan (atau bukannya berurusan dengan indentasi seperti itu).

▍ Publikasi styling

Sebagian besar Stack Overflow terdiri dari publikasi pengguna. Publikasi ini, yaitu pertanyaan, jawaban, komentar, dibuat dengan bantuan markdown Markdown. Selama peluncuran Stack Overflow, Markdown Markup adalah teknologi yang relatif baru.

Selama bertahun-tahun, web telah mengembangkan beberapa cara standar untuk menampilkan sesuatu seperti judul dan kutipan. Pengenalan topik gelap adalah saat yang tepat untuk meninjau kembali pendekatan kami dalam memformat publikasi. Masalah yang paling kontroversial dalam masalah ini adalah pemformatan kutipan.

Awalnya, kutipan dibingkai menggunakan warna latar belakang kuning yang kuat, yang mengurangi kontras kutipan itu sendiri. Warna kuning, di samping itu, menyebabkan masalah tertentu ketika ditampilkan pada latar belakang gelap. Sebagai hasilnya, kami beralih ke metode penerimaan kutipan yang diterima secara umum, menggunakan bilah vertikal abu-abu yang sempit untuk menyorotnya.

▍ Penataan kode

Pada halaman Stack Overflow, yang cukup bisa dimengerti, banyak potongan kode ditampilkan. Warna yang kami gunakan untuk menyoroti sintaks tidak ada hubungannya dengan warna tanda tangan kami. Saya memiliki kecurigaan yang kuat bahwa warna-warna ini adalah warisan dari perpustakaan pertama yang digunakan dalam proyek untuk penyorotan sintaksis. Setelah menganalisis warna-warna ini, saya memutuskan untuk menjadikan highlight sintaks untuk desain ulang yang mendalam. Hasilnya, warna lampu latar diganti dengan warna dari sistem desain kami. Ini berlaku untuk topik terang dan gelap. Dan ini dilakukan agar apa yang terjadi tidak berbeda secara radikal dari sebelumnya.

hasil

Tema cerah dan versi beta dari tema gelap, dirilis pada 30 Maret.

Karena volume refactoring yang kami lakukan saat pindah ke topik gelap, kami dapat membuat perubahan yang cukup besar pada tampilan proyek tanpa terlalu banyak kesulitan. Berdasarkan apa yang kita miliki sekarang, kita dapat, misalnya, mengembangkan tema situs web kontras tinggi yang meningkatkan aksesibilitasnya.

Penciptaan tema gelap adalah hasil dari perubahan mendasar dalam pendekatan desain Stack Overflow. Secara khusus, kita berbicara tentang penggunaan sistem desain , yang telah saya promosikan selama satu tahun sekarang. Dan menciptakan tema gelap adalah peluang bagus bagi saya untuk membangun kembali banyak bagian situs. Ini adalah yang pertama dari banyak proyek yang akan meningkatkan ketersediaan Stack Overflow.

Jika Anda tidak mempertimbangkan penolakan dukungan untuk IE11, kerjakan topik gelap dimulai pada Juli 2019 dengan PR ini , yang bertujuan mempelajari situasi. Sebelum ini, pada bulan April 2019, ada diskusi tentang topik gelap. Pada Oktober 2019, versi eksperimental dari tema gelap mulai diproduksi. Dan kemudian, setelah setidaknya 60 PR dibuat, versi beta dari tema gelap disajikan kepada pengguna. Itu terjadi pada 30 Maret 2020.

Pembaca yang budiman! Apakah Anda menggunakan Stack Overflow? Apakah Anda suka tema gelap baru mereka?

Membuat Tema Gelap untuk Stack Overflow