Skip to content

okky dark mode by dohyeongk

Screenshot of okky dark mode

Details

Authordohyeongk

LicenseCC0-1.0

Categoryokky.kr

Created

Updated

Size2.3 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Dark theme for OKKY v2.0.

  • Reduced padding in article list.
  • Increased font size in comments.

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name           okky dark mode
@namespace      github.com/dohyeongk/okky-v2.0-dark-theme
@version        20220915.2
@description    dark theme for okky v2.0
@author         dohyeong
==/UserStyle== */
@-moz-document url-prefix("https://okky.kr") {
    /* Reduce padding in list */
    .py-4 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* Increase font size for reply */
    .text-sm {
        font-size: 1rem;
    }
    .gap-x-5 > .text-sm {
        font-size: 0.8rem;
    }

    /* Dark mode */
    body,
    .bg-white,
    .bg-gray-50 {
        background-color: #121212;
    }
    .bg-blue-50 {
        background-color: #121212;
    }
    .bg-gray-100,
    .bg-okky-24,
    .hover\:bg-gray-50:hover {
        background-color: #323232;
    }
    .hover\:border-black:hover {
        border-color: #ffffff;
        background-color: #2a2a2a;
    }
    .text-black,
    .text-gray-900,
    .text-gray-800,
    .hover\:text-gray-700:hover,
    .hover\:text-gray-900:hover,
    .text-okky-9 {
        color: #FFFFFFdd;
    }
    .text-gray-500,
    .text-gray-600,
    .text-gray-700,
    .text-okky-12,
    .text-okky-22,
    .text-okky-13 {
        color: #FFFFFF99;
    }
    .hover\:text-black:hover {
        color: #FFFFFF;
    }

    /* Exceptions for editor */
    textarea ~ p > .text-gray-500 {
        color: #000000;
    }
    form > div > div:first-child,
    form > div > div:first-child .text-gray-500,
    form > div > div:first-child .text-gray-900,
    form > div > label ~ div,
    form > div > label ~ div .text-gray-500,
    form > div > label ~ div .text-gray-900 {
        color: rgb(107 114 128/var(--tw-text-opacity));
    }
    form > div > div:first-child .bg-white,
    form > div > div:first-child.bg-gray-50,
    form > div > div:first-child .bg-gray-50,
    form > div > label ~ div .bg-white,
    form > div > label ~ div.bg-gray-50,
    form > div > label ~ div .bg-gray-50 {
        background-color: rgb(255 255 255/var(--tw-bg-opacity));
    }
    form > div > label ~ div .hover\:bg-gray-50:hover {
        background-color: rgb(249 250 251/var(--tw-bg-opacity));
    }

    .remirror-theme {
        --rmr-color-text: #FFFFFFdd;
    }
    .remirror-editor p > code {
        background-color: #121212;
    }
}

Reviews

No reviews yet.