Skype

skype v3 by @nex:nexy7574.co.uk - Raw CSS without autoupdate Latest version Version history

Commit info

Committed 2025-09-30 at 17:18:44 UTC by @nex:nexy7574.co.uk

Add dark theme screenshot

0 likes

Description

A simple clone of Skype's light and dark themes.

Previews

Code

To use this theme, paste the following import at the top of your custom CSS.

Optionally, you can replace https://css.gomuks.app with _gomuks to proxy the request through the gomuks backend with caching. When using a specific commit, the backend caches the CSS forever and will never re-request from upstream.

@import url("https://css.gomuks.app/theme/skype/commit/3.css");

Full CSS

/*
This CSS file is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License.
To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/
*/
:root {
    --skype-blue: #0E71CF;
    --skype-own-message: #CCF6FE;
    --skype-other-message: #F1F1F1;
    --skype-background: #FEFEFE;
    --skype-background-secondary: #EFF3F8;

    --primary-color: var(var(--skype-blue));
    --primary-color-dark: var(var(--skype-blue));
    --room-list-background: unset;

    --skype-timeline-letterbox: 0;
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --skype-blue: #00BCF2;
        --skype-own-message: #0E3A81;
        --skype-other-message: #282828;
        --skype-background: #000000;
        --skype-background-secondary: #1E1E1E;
        --text-color: #DDF3FE;
    }
}

input.toggle {
    --enabled-color: var(var(--skype-blue));
}

div.message-composer {
    border-radius: 2em;
    margin: 0 auto;
    min-width: 25%;
    max-width: 75%;
    width: 100%
}

div.timeline-view {
    margin: 0 var(--skype-timeline-letterbox);
}

div.timeline-event {
    &.small-event, &.hidden-event {
        justify-self: center;
    }
}

/* Bubble theme by @em:f.dog, borrowed from https://css.gomuks.app/theme/bubblemuks */
.timeline-event:not(.small-event) .event-content {
    max-width: max-content;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background-color: var(--skype-background-secondary);
}

.timeline-event.own-event:not(.small-event) {
    direction: rtl;
}

.timeline-event.own-event:not(.small-event) .event-content {
    background-color: var(--skype-own-message);
}

.timeline-event.own-event:not(.small-event) > * {
    direction: ltr;
}

.timeline-event.own-event:not(.small-event) .event-sender-and-time {
    flex-direction: row-reverse;
}

Comments

No comments yet.