A manga-panel login theme for SDDM. Ink on paper, sharp corners, and a deliberately low blur so line art stays readable.
Written in QML for Qt6.
- SDDM built against Qt6
qt6-svg,qt6-declarative,qt6-imageformatsimagemagick— optional, only for palette extraction
sudo pacman -S --needed sddm qt6-svg qt6-declarative qt6-imageformats imagemagickgit clone https://github.com/kubilaiswf/kanji-sddm
cd kanji-sddm
chmod +x install.sh palette.sh preview.sh
./install.shThe installer asks three questions: which wallpaper to use, where the panel should sit, and whether to derive the palette from that image. Palette extraction defaults to yes, since a theme whose colours come from its own background reads as deliberate rather than applied. Press Enter through all three to install the theme exactly as shipped.
If you would rather not run a script:
sudo mkdir -p /usr/share/sddm/themes/kanji
sudo cp -rf Main.qml theme.conf metadata.desktop backgrounds screenshots \
/usr/share/sddm/themes/kanji/
sudo mkdir -p /etc/sddm.conf.d
printf '[Theme]\nCurrent=kanji\n' | sudo tee /etc/sddm.conf.d/10-theme.confIf /etc/sddm.conf exists and contains a Current= line, edit it too — it
overrides anything in /etc/sddm.conf.d/.
The panel occupies roughly a third of the screen and the backdrop gradient
follows it, mirroring itself for right and fading in from both edges for
center. This makes the position a compositional decision rather than a
preference: it should be chosen against the artwork.
center — symmetric artwork |
right — subject sits left |
palette derived from the image |
| Value | Use when |
|---|---|
left |
The subject sits right of centre |
center |
The artwork is symmetric, or busy edge to edge |
right |
The subject sits left of centre |
panelPosition=left
panelMargin=88./preview.shThe greeter opens as an ordinary window; close it with your compositor's
close shortcut (Super+Q under Hyprland). It is a preview, not a session —
logging in from it does nothing.
preview.sh also drives the whole compare-and-adjust loop, so you can try a
wallpaper, a position and a palette in one command:
./preview.sh -w ~/Wallpapers/art.png -p center -c| Flag | Effect |
|---|---|
-w PATH |
Copy a new wallpaper in and point theme.conf at it |
-p POS |
Set panel position: left, center or right |
-c |
Derive the palette from the current wallpaper |
-s FILE and -d N also exist, capturing a screenshot after a delay —
that is how the images in this README were made.
backgrounds/ ships with several images so the theme looks finished on
first run. Switch between them by editing background= in theme.conf, or
by passing -w to preview.sh. Each was picked for a different panel
position; see Credits for their sources.
./palette.sh backgrounds/art.png # print only
./palette.sh backgrounds/art.png --write theme.conf # applyDominant-colour extraction on its own produces unusable results: a dark
image yields a dark "lightest" colour and the text stops being legible.
palette.sh therefore clamps luminance after sampling — paperColor is
forced above 0.80 and inkColor below 0.09 on the Rec.709 scale, scaling
all three channels by the same factor so the hue survives.
A dark sepia such as #3a3428 (luminance 0.21) comes out as #e1ca9b:
still sepia, now readable.
The accent is the most saturated colour in the mid-luminance band, which keeps it legible against both the paper and the ink. When no candidate qualifies it falls back to the default red.
--write overwrites the colour lines in theme.conf. Keep a copy if
you have hand-tuned them.
Everything lives in theme.conf. No QML editing required.
| Key | Default | Purpose |
|---|---|---|
background |
backgrounds/itachi.png |
Path relative to the theme folder |
blurAmount |
0.06 |
0 disables blur |
tintAmount |
0.20 |
Ink wash over the artwork |
paperColor |
#D8CBAE |
Primary text and fills |
paperDimColor |
#BEB299 |
Labels and secondary text |
inkColor |
#141719 |
Panel background, inverted text |
inkSoftColor |
#26221b |
Reserved for future surfaces |
accentColor |
#8F2B22 |
Errors, power-button hover |
uiScale |
1.0 |
Multiplies every measurement |
panelWidth |
460 |
Panel width in pixels |
panelPosition |
left |
left, center or right |
panelMargin |
88 |
Distance from the screen edge |
fontFamily |
JetBrainsMono Nerd Font |
Any installed family |
timeFormat |
HH:mm |
Qt date-time format |
dateFormat |
dddd · d MMMM yyyy |
Qt date-time format |
userLabel |
USER |
Field label |
passwordLabel |
PASSWORD |
Field label |
loginText |
ENTER |
Button label |
errorMessage |
ACCESS DENIED |
Shown on failed login |
Keep blurAmount near zero for detailed line art; raise it for photographs,
where fine detail would otherwise compete with the text.
Every measurement is expressed against a 1080p reference and multiplied by
uiScale before use, clamped to 0.5-3.0.
Leave it at 1.0 unless the panel reads small. Qt's own High-DPI autoscaling
already compensates for pixel density, so deriving a multiplier from the
screen height on top of that double-counts: a 4K panel ends up at twice its
designed size. 1.15-1.4 covers most cases where the default still looks
undersized.
The multiplier feeds into font.pixelSize rather than a scale transform on
the panel. A transform renders glyphs at their base size and stretches the
result, which is visibly soft above 1x; scaling the font size instead lets Qt
rasterise at the final size.
The bundled wallpapers are included as samples so the theme looks complete on first run. They are not covered by this repository's MIT license — each remains the property of its creator. Replace them with your own artwork for anything beyond local use.
| File | Source |
|---|---|
itachi.png |
Panel from Naruto by Masashi Kishimoto (© Shueisha), via wallhaven.cc/w/yqe81l |
wallhaven-5ym138.png |
wallhaven.cc/w/5ym138 |
wallhaven-jedx95.png |
wallhaven.cc/w/jedx95 |
wallhaven-wqm2e6.png |
wallhaven.cc/w/wqm2e6 |
MIT — see LICENSE. Applies to the QML, the scripts and the documentation; not to the bundled artwork.