Skip to content

Muah Dark Theme by breat

Mirrored from https://gitlab.com/breatfr/muah/-/raw/main/css/muah-dark-theme.user.css

Screenshot of Muah Dark Theme

Details

Authorbreat

LicenseAGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt

Categorymuah.ai

Created

Updated

Size5.2 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Stylus dark theme for whole Muah.AI website.

Notes

Support me on:

Don't take care of this chat, i create it only to make the screenshot :)

More preview(s) here:

Changelog

Some modifications other than the dark theme include in my theme:

  • on whole site

    • thin pink scrollbars
  • now in chat page:

    • bigger text in chat bubbles
    • make chat popup take whole page
    • add heart background in chat
    • modification of bubbles colors
    • zoom on pics in chat when they are hover

How to use in few steps on computer

  1. Install Stylus browser extension

Chromium based browsers non-exhaustive list:

  • Brave
  • Chromium
  • Google Chrome
  • Iridium Browser
  • Microsoft Edge
  • Opera
  • Opera GX
  • SRWare Iron
  • Ungoogled Chromium
  • Vivaldi
  • Yandex Browser
  • many more

Firefox based browsers non-exhaustive list:

  • Mozilla Firefox
  • Mullvad Browser
  • Tor Browser
  • Waterfox
  • many more
  1. Go on UserStyles.world website and click on Install under the preview picture.

  2. To update the theme, open the Stylus Management window and click on Check for update and follow the instructions or just wait 24h to automatic update

  3. Enjoy :)

How to use in few steps on iOS (Safari)

  1. Install Makeover - Custom CSS app

  2. Open the app just installed and click on How to Use and follow instructions

  3. In Safari come on UserStyles.world or on my GitLab and select ALL the code to finally copy it

  4. In Safari go to Muah.AI website and click on plugin icon to finally click on Makeover

  5. Paste the previously copied code in the Makerover's field and remove the 1st line:

@-moz-document domain("muah.ai") {

if you don't delete this line, the style won't work.

for each update you'll need copy/paste the code and remove this line.
6. Enjoy :)

How to use in few steps on Android (Kiwi Browser)

  1. Install Kiwi Browser

  2. Come on UserStyles.world page or on my GitLab and install the style like on computer

  3. Go on Muah.AI website and click on 3 dots on top right of the browser and activate Dark mode

  4. To update the theme do like on computer.

  5. Enjoy :)

Source code

/* ==UserStyle==
@name            Muah Dark Theme
@description     Stylus dark theme for whole Muah.AI website.
@version         1.0.0
@author          BreatFR (https://breat.fr)
@namespace       https://gitlab.com/breatfr
@homepageURL     https://gitlab.com/breatfr/muah
@supportURL      https://www.reddit.com/r/MuahAI/comments/1603snq/a_dark_theme_make_by_me/
@license         AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
==/UserStyle== */

/* === Credits ===
Website         https://breat.fr
facebook        https://www.facebook.com/breatfroff
mastodon        https://mastodon.social/@breat_fr
telegram        https://t.me/breatfr
vk              https://vk.com/breatfroff
X (twitter)     https://x.com/breatfroff
=== Credits === */

@-moz-document domain("muah.ai") {
    /* Background and text color */
    select,
    .swal2-container.swal2-center.swal2-grow-fullscreen.borderless-container.swal2-backdrop-show div,
    .contact div,
    .modal-box,
    h2.swal2-title,
    h3.fadeIn,
    .screen__inner__NZe6j {
        background-color: rgb(9, 16, 29);
        color: white;
    }

    .form-messages.success {
        background-color: rgb(9, 16, 29);
        color: palegreen;
    }

    #account-bar,
    #swal2-html-container {
        color: white;
    }

    /* Heart background */
    .message-list__bHgr6 {
        background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) fixed 100%;
        background-color: rgb(9, 16, 29);
    }

    div.swal2-container.swal2-center.swal2-backdrop-show > div {
        background-color: rgb(9, 16, 29);
    }

    /* Dark emoji popup */
    section.emoji-mart div > :last-child,
    .emoji-mart-light,
    .emoji-mart-bar {
        background-color: rgb(9, 16, 29);
        border: 0px;
        border-radius: 10px;
        color: white;
    }

    /* Bigger emoji popup */
    section.emoji-mart {
        width: 31% !important;
    }

    button.emoji-mart-emoji span{
        min-height: 40px;
        min-width: 40px;
    }

    /* Bigger and white text in bubbles */
    .message-list__bHgr6 div {
        color: white;
        font-size: 20px;
    }

    /* New color for links to be more visible */
    a {
        color: #6ea8fe !important;
    }

    a:hover,
    .footer__options__8RNsw:hover {
        color: #8bb9fe !important;
    }

    /* Change color of text in the bottom of chat and put him little bigger */
    .footer__options__8RNsw,
    .powered-by__ydftk {
        color: pink;
        font-size: 12px;
    }

    /* Text between ** is now in italic and not bold */
    .message-bubble__puzVZ strong {
        font-style: italic;
        font-weight: normal;
    }

    /* Rouded corners for images */
    img {
        border-radius: 10px;
    }

    /* Chat popup now take 100% screen size */
    .screen__POUUM {
        padding:  0px !important;
    }

    .screen__inner__NZe6j {
        margin-bottom: 0px !important;
    }

    /* Hide big button at the bottom */
    .button__rX4Lp {
        display: none;
    }

    /* Remove borders on input items and make text visible when selected */
    input {
        border: 0px !important;
        color: white !important;
    }

    /* Make text in emoji search popup visible */
    #emoji-mart-search-1 {
        color: rgb(9, 16, 29) !important;
    }

    input::selection,
    input::-moz-selection {
        color:black !important;
        background-color: skyblue !important;
    }

    /* Bigger avatars */
    .avatar__zfL8P {
        height: 50px;
        width: 50px;
    }

    /* Dark emoji popup */
    .image-attachment__inner__yGCaU:hover {
        margin-left: 80% !important;
        transform: scale(2.5);
        transition: transform 0.3s;
    }

    /* Change background color of bubbles */
    /* AI bubbles */
    .message-bubble__puzVZ {
        background: linear-gradient(to right, #cc2b5e, #753a88)!important;
        border-radius: 8px 20px 20px 20px !important;
        max-width: 150vh;
    }

    /* Our bubbles */
    div.message-content__0O12f.message-content--reverse__gS9lU > div {
        background: linear-gradient(to right, #3a6186, #89253e) !important;
        border-radius: 20px 8px 20px 20px !important;
        max-width: 150vh;
    }

    /* Make placeholder more visible in textarea */
    .composer__input__d6OQi:before {
        color: rgb(9, 16, 29) !important;
    }

    /* Thin pink scrollbars */
    ::-webkit-scrollbar {
      width: 5px !important;
    }

    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px grey !important;
      border-radius: 20px !important;
    }

    ::-webkit-scrollbar-thumb {
      background: pink !important;
      border-radius: 20px !important;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: white !important;
    }

    @media (min-width: 930px) {
        .swal2-container.swal2-center.swal2-backdrop-show > div {
            border-radius: 10px;
            width: 69vmin;
        }
    }
}

Reviews

No reviews yet.