What is KDE Plasma?

KDE Plasma is a free and open-source desktop environment designed to provide a modern and customizable user interface for Linux and other Unix-like operating systems. It is developed by the KDE community, an international team of volunteers, and developers dedicated to creating user-friendly software.

What is KDE Modern Plasma

KDE Modern Plasma is a system-wide macOS inspired KDE Plasma theme I developed for my own personal use. It consists of a few different components:

Plasma Style

---

A KDE Plasma style is a collection of visual elements and settings that determine the appearance and behaviour of the user interface elements within the desktop environment. It determines how various components, such as buttons, checkboxes, sliders, and progress bars, are rendered and displayed on the screen.

The Plasma style affects the overall look and feel of the user interface, providing a consistent and cohesive experience across applications and system components. It defines the shape, colour, and behaviour of these elements, creating a visual theme that aligns with the user's preferences.

metadata.json

A plasma style must contain a metadata.json file. This contains basic metadata about the style including the display name, description, author, website, version, ID, licence, etc.

{
    "KPlugin": {
        "Authors": [
            {
                "Name": "Alex Thomson",
                "Email": "[email protected]"
            }
        ],
        "Category": "",
        "Description": "A modern KDE Plasma desktop theme.",
        "EnabledByDefault": false,
        "Id": "modern-plasma-desktop-theme",
        "License": "GPL3.0",
        "Name": "Modern Plasma",
        "Version": "1.0.0",
        "Website": "https://alexthomson.dev/project/kde-modern-plasma"
    },
    "X-Plasma-API": "5.0"
}

GitHub

plasmarc

This script is run when the style is loaded. This initialises the effects that the style relies on.

[ContrastEffect]
enabled=true
contrast=0.8
intensity=1.0
saturation=1.5

[AdaptiveTransparency]
enabled=true

GitHub

colors

This file is similar to the plasmarc file since it is also run when the theme is initialised; however, this file initialises the colour scheme rather than effects.

[ColorEffects:Disabled]
Color=56,56,56
ColorAmount=0
ColorEffect=0
ContrastAmount=0.65
ContrastEffect=1
IntensityAmount=0.1
IntensityEffect=2

[ColorEffects:Inactive]
ChangeSelectionColor=true
Color=112,111,110
ColorAmount=0.025
ColorEffect=2
ContrastAmount=0.1
ContrastEffect=2
Enable=false
IntensityAmount=0
IntensityEffect=0

[Colors:Button]
BackgroundAlternate=77,77,77
BackgroundNormal=101,101,101
DecorationFocus=49,91,239
DecorationHover=49,91,239
ForegroundActive=61,174,233
ForegroundInactive=160,160,160
ForegroundLink=41,128,185
ForegroundNegative=218,68,83
ForegroundNeutral=246,116,0
ForegroundNormal=255,255,255
ForegroundPositive=39,174,96
ForegroundVisited=127,140,141

[Colors:Complementary]
BackgroundAlternate=66,66,66
BackgroundNormal=51,51,51
DecorationFocus=49,91,239
DecorationHover=49,91,239
ForegroundActive=246,116,0
ForegroundInactive=160,160,160
ForegroundLink=49,91,239
ForegroundNegative=237,21,21
ForegroundNeutral=201,206,59
ForegroundNormal=255,255,255
ForegroundPositive=17,209,22
ForegroundVisited=49,91,239

[Colors:Header]
BackgroundAlternate=66,66,66
BackgroundNormal=54,54,54
DecorationFocus=49,91,239
DecorationHover=49,91,239
ForegroundActive=246,116,0
ForegroundInactive=160,160,160
ForegroundLink=49,91,239
ForegroundNegative=237,21,21
ForegroundNeutral=201,206,59
ForegroundNormal=255,255,255
ForegroundPositive=17,209,22
ForegroundVisited=49,91,239

[Colors:Header][Inactive]
BackgroundAlternate=66,66,66
BackgroundNormal=45,45,45
DecorationFocus=49,91,239
DecorationHover=49,91,239
ForegroundActive=246,116,0,150
ForegroundInactive=200,200,200
ForegroundLink=49,91,239
ForegroundNegative=237,21,21
ForegroundNeutral=201,206,59
ForegroundNormal=160,160,160
ForegroundPositive=17,209,22
ForegroundVisited=49,91,239

[Colors:Selection]
BackgroundAlternate=79,127,239
BackgroundNormal=49,91,239
DecorationFocus=255,255,255
DecorationHover=255,255,255
ForegroundActive=252,252,252
ForegroundInactive=130,156,239
ForegroundLink=253,188,75
ForegroundNegative=218,68,83
ForegroundNeutral=246,116,0
ForegroundNormal=255,255,255
ForegroundPositive=39,174,96
ForegroundVisited=128,152,239

[Colors:Tooltip]
BackgroundAlternate=77,77,77
BackgroundNormal=51,51,51
DecorationFocus=49,91,239
DecorationHover=49,91,239
ForegroundActive=49,91,239
ForegroundInactive=160,160,160
ForegroundLink=49,91,239
ForegroundNegative=218,68,83
ForegroundNeutral=246,116,0
ForegroundNormal=255,255,255
ForegroundPositive=39,174,96
ForegroundVisited=127,140,141

[Colors:View]
BackgroundAlternate=48,48,48
BackgroundNormal=36,36,36
DecorationFocus=49,91,239
DecorationHover=49,91,239
ForegroundActive=49,91,239
ForegroundInactive=160,160,160
ForegroundLink=49,91,239
ForegroundNegative=218,68,83
ForegroundNeutral=246,116,0
ForegroundNormal=250,250,250
ForegroundPositive=39,174,96
ForegroundVisited=120,120,120

[Colors:Window]
BackgroundAlternate=66,66,66
BackgroundNormal=54,54,54
DecorationFocus=49,91,239
DecorationHover=49,91,239
ForegroundActive=49,91,239
ForegroundInactive=160,160,160
ForegroundLink=49,91,239
ForegroundNegative=218,68,83
ForegroundNeutral=246,116,0
ForegroundNormal=255,255,255
ForegroundPositive=39,174,96
ForegroundVisited=120,120,120

[General]
ColorScheme=Modern Plasma
Name=Modern Plasma
TitlebarIsAccentColored=true
shadeSortColumn=true

[KDE]
contrast=4

[WM]
activeBackground=51,51,51
activeBlend=171,171,171
activeForeground=255,255,255
inactiveBackground=66,66,66
inactiveBlend=85,85,85
inactiveForeground=160,160,160

GitHub

Vector Graphics

The remainder of the style is made up of SVG vector graphics that define how parts of Plasma are rendered.

Window Decorations

---

A Plasma window decoration defines the visual appearance and behaviour of the window borders, title bars, and window buttons in the desktop environment. It determines how windows are framed and styled, providing a distinct look and feel to the overall desktop experience.

metadata.desktop

Similar to the plasma style, this file defines basic metadata about the theme. The only real difference is that rather than a JSON file, this is a shell script that is run when the theme is initialised.

[Desktop Entry]
Name=Modern Plasma
Comment=Modern KDE Plasma window decorations theme.
X-KDE-PluginInfo-Author=Alex Thomson
[email protected]
X-KDE-PluginInfo-Name=modern-plasma-window-decorations
X-KDE-PluginInfo-Version=1.0.0
X-KDE-PluginInfo-Category=
X-KDE-PluginInfo-Depends=
X-KDE-PluginInfo-License=
X-KDE-PluginInfo-EnabledByDefault=false

GitHub

Initialisation Script

Window decoration themes contain a special shell script file that configures the window decoration theme. This file needs to be the ID of the theme, suffixed with "src".

[General]
ActiveTextColor=224,224,224,255
InactiveTextColor=164,164,164,255
TitleAlignment=Center
TitleVerticalAlignment=Center
Animation=0
Shadow=true
UseTextShadow=true

[Layout]
BorderLeft=0
BorderRight=0
BorderBottom=0
TitleEdgeTop=0
TitleEdgeBottom=0
TitleEdgeLeft=0
TitleEdgeRight=0
TitleBorderLeft=0
TitleBorderRight=0
TitleHeight=28

ButtonWidth=28
ButtonWidthClose=44
ButtonWidthMaximizeRestore=44
ButtonWidthMinimize=44

ButtonWidthKeepabove=43
ButtonWidthKeepbelow=43
ButtonWidthHelp=43

ButtonWidthAlldesktops=44

ButtonHeight=28
ButtonSpacing=1
ButtonMarginTop=0
ExplicitButtonSpacer=10

PaddingTop=11
PaddingBottom=21
PaddingRight=16
PaddingLeft=11
TitleHeightMaximized=32
TitleEdgeTopMaximized=0
TitleEdgeBottomMaximized=0
TitleEdgeLeftMaximized=0
TitleEdgeRightMaximized=0

GitHub

Vector Graphics

The rest of the theme, similar to a Plasma style, simply consists of SVG vector graphics that define how Plasma windows should be rendered.

Splash Screen

---

The splash screen is rendered as the Plasma desktop environment is initialised. This essentially means after the user logs in through their display manager.

metadata.json

Again, similar to the plasma style, this file contains metadata about the splash screen.

 {
    "KPlugin": {
        "Authors": [
            {
                "Name": "Alex Thomson",
                "Email": "[email protected]"
            }
        ],
        "Category": "",
        "Description": "A modern KDE Plasma splash screen.",
        "EnabledByDefault": false,
        "Id": "modern-plasma-splash",
        "License": "GPL3.0",
        "Name": "Modern Plasma",
        "Version": "1.0.0",
        "Website": "https://alexthomson.dev/project/kde-modern-plasma"
    },
    "X-Plasma-API": "5.0"
}

GitHub

splash.qml

This file defines the layout of the splash screen. This is vital in order for the splash screen to function.

import QtQuick 2.1

Image {
    id: root
    source: "images/background.png"
    fillMode: Image.PreserveAspectCrop

    property int stage

    onStageChanged: {
        if (stage == 1) {
            introAnimation.running = true
        }
    }
    Image {
        id: topRect
        anchors.horizontalCenter: parent.horizontalCenter
        y: root.height /3
        source: "images/rectangle.svg"
        Image {
            source: "images/icon.png"
            width: 128
            height: 128
            anchors.centerIn: parent
        }
        Rectangle {
            radius: 3
            color: "#c0444444"
            anchors {
                bottom: parent.bottom
                bottomMargin: 50
                horizontalCenter: parent.horizontalCenter
            }
            height: 6
            width: height*36
            Rectangle {
                radius: 3
                anchors {
                    left: parent.left
                    top: parent.top
                    bottom: parent.bottom
                }
                width: (parent.width / 6) * (stage - 1)
                color: "#ffffffff"
                Behavior on width { 
                    PropertyAnimation {
                        duration: 250
                        easing.type: Easing.InOutQuad
                    }
                }
            }
        }
    }

    SequentialAnimation {
        id: introAnimation
        running: false
        ParallelAnimation {
            PropertyAnimation {
                property: "opacity"
                target: topRect
                from: 0
                to: 1
                duration: 1000
                easing.type: Easing.InOutBack
                easing.overshoot: 1.0
            }

            PropertyAnimation {
                property: "opacity"
                target: bottomRect
                from: 0
                to: 1
                duration: 1000
                easing.type: Easing.InOutBack
                easing.overshoot: 1.0
            }
        }
    }
}

GitHub

Supporting Assets

Any assets referenced in the splash.qml file should be included in the same directory or a subdirectory relative to the splash.qml file. These are usually PNG or SVG files.

Preview Images

The splash theme should contain preview images so that the user can see what the splash screen looks like before applying it. These previews can be viewed in the Plasma theme configuration in the appearance section in the KDE system settings.

Putting it all Together

Each of these components combine to create a macOS inspired modern KDE Plasma theme: