SDDM theme 수정(tweak): nixos-sddm-theme(Chili login theme) 기준.

** 2018.06.18
Theme 이름이 “Chili Login” 으로 바뀌었다. 글 내용도 따라서 바꿨다.

## 간단하게 정리. 설치한 후 내용을 바꿔야 하는 파일은 다음 세 개다.

  • /usr/share/sddm/themes/kde-plasma-chili/components/Clock.qml
  • /usr/share/sddm/themes/kde-plasma-chili/components/ActionButton.qml
  • /usr/share/sddm/themes/kde-plasma-chili-0.5.2/theme.conf
  • 또는,

  • /usr/share/sddm/themes/kde-plasma-chili-0.5.2/theme.conf.user

괜찮은(멋진) sddm theme 이 없을까 찾아봤는데, sddm theme 자체가 몇 개 없었다.
KDE 를 만들려면 QT 가 필수인데, 이 QT 기술자(?)가 그리 많지는 않은 듯 하다.

그 중, 맘에 든 게 Chili login theme for KDE Plasma이었다.

배경화면은 따로 설정해줄 수도 있고, MacOS 느낌이 물씬 나는 모양이 웬지 장식욕구를 자극했다.
시스템 설정을 통해 KDE Store 에 있는 걸 설치해주면 어려울 건 없는데..

    시스템 설정 – 작업공간 – 시작및 종료 – 로그인 화면(SDDM)

여기서 ‘새 테마 가져오기’를 통해 검색 후 설치해야 한다. github 등에서 테마파일을 받고 ‘파일에서 설치하기’로 해도 될 듯 한데, 뭔가 문제가 있는지 파일 설치는 되지 않는다. 수동 설치는 가능하다. (방법은 github 메인 페이지에 나와있다.)

$ sudo tar -xzvf ~/Downloads/kde-plasma-chili-0.x.x.tar.gz -C /usr/share/sddm/themes

그런데, 이렇게 풀면 /usr/share/sddm/themes/kde-plasma-chili-0.x.x 형식으로 디렉토리가 생성된다.
판번호는 살짝 떼어버리는 편이 좋을 듯 하다.
수동 설치를 마치고, 역시 위 설정 화면에서 “Chili for Plasma”를 선택한다.

첫인상에서 살짝 신경을 건드린게 있었는데, 그건 바로 화면 우상귀에 표시된 날짜 형식이었다.
서양식으로 날이 먼저 나오고, 월이 뒤에 나오기에 (요일 일 월(영어명) 형식), 영 눈이 불편했다.
물론, 로그인하는 아주 짧은 순간에만 보는 거지만..

이걸 바꿔주려면?
간단히 qml 파일을 손봐주면 된다.

/usr/share/sddm/themes/kde-plasma-chili/components/Clock.qml

이 파일을 열면,

text: Qt.formatDateTime(timeSource.data["Local"]["DateTime"], " ddd dd MMMM,")

이런 부분이 있는데, ddd dd MMMM 를 원하는 형식으로 바꿔주면 된다.
형식은 다음 문서를 참고.

내 선택은,

yyyy년 M월 d일 (ddd)

훨씬 깔끔하네!


말타면 경마잡히고 싶다했지.

경마는 원래 견마(牽馬)로 알고 있는데, 표준 표기는 ‘경마’라고 한다. 경마라고 하면 뭔가 말이 안되는 듯 한데.. 고려대 사전에는 이렇게 풀어놓고 있다.

    이 말은 한자어인 ‘견마(牽馬)’에서 온 것이다. ‘견마’가 ‘경마’로 바뀐 이유에 대해서는 음운론적으로 설명하기 어려우나, ‘견마’에서 ‘ㄴ’이 뒤에 오는 ‘ㅁ’의 영향으로 ‘*겸마’로 바뀐 후, 같은 음이 반복되는 것을 피하기 위해 ‘경마’로 바뀌었을 가능성이 있다.

하.. 또 쓸데없는 의식의 흐름.

먼저, 배경을 바꾸고 싶다면, 시스템 설정 – 작업공간 – 시작및 종료 – 로그인 화면(SDDM) – Chili for Plasma 에서 ‘배경’을 클릭한 뒤 원하는 파일을 선택하면 된다.
이 작업을 하면, KDE 설정 프로그램이, 선택한 배경 파일을 /usr/share/sddm/themes/kde-plasma-chili/ 로 옮기고, /usr/share/sddm/themes/kde-plasma-chili/theme.conf.user 파일을 생성하여, 이 배경 파일을 추가한다.
내용은 다음과 같다.

[General]
background=xxyy.jpg
type=image

혹은, /usr/share/sddm/themes/kde-plasma-chili/theme.conf 파일을 직접 편집해도 된다.
배경파일은 /usr/share/sddm/themes/kde-plasma-chili/ 을 루트로 하여, 상대경로와 파일명을 준다.
따라서, 배경파일을 components/artwork에 복사하고, 다음과 같이 설정할 수 있다.

[General]
background=components/artwork/xx-yy-zz.jpg

다음, 글자색을 바꿔야할 경우도 있다.
Chili 테마의 우상귀에 나오는 글자의 색깔은 흰색으로 설정되어 있기 때문에, 선택한 그림에 따라 글자가 잘 안보일 수도 있다.
글자색과 글꼴등을 바꾸고 싶다면, /usr/share/sddm/themes/kde-plasma-chili/components/Clock.qml 등 파일을 다음과 같이 수정해준다.

RowLayout {
    KeyboardButton {}
    Battery {}
    Label {
        font.family: "Nanum Brush Script"
        font.pointSize: root.height / 55
        color: "lightslategray"
        text: Qt.formatDateTime(timeSource.data["Local"]["DateTime"], " yyyy년 M월 d일 (ddd)")
        renderType: Text.QtRendering
    }
    Label {
        font.family: "Nanum Brush Script"
        font.pointSize: root.height / 55
        color: "dimgray"
        text: Qt.formatTime(timeSource.data["Local"]["DateTime"])
        renderType: Text.QtRendering
    }
    DataSource {
        id: timeSource
        engine: "time"
        connectedSources: ["Local"]
        interval: 1000
    }
}

font.family :
Noto Sans 에서 나눔브러쉬(Nanum Brush Script)로 바꿔줬다.
이 부분엔 알아둬야 할 게 두가지 있다.

첫번째, 글꼴명.

$ fc-list | grep xx

위 명령을 통해 나온 글꼴이름을 입력한다.

두번째, 글꼴 위치.
여기에 사용할 수 있는 글꼴은, 전역(/usr/share/fonts)에 설치된 것들이다. 개인 디렉토리 (~/.fonts)에 설치된 것들은 사용할 수 없다.

font.pointSize:
원래값 75 에서 55 로 바꿔줬다. 이게 잘 이해가 안되는데, 숫자가 작아져야 크기가 커진다. 아마 root.height / 55 가 나눗셈을 표시하는 모양이다.

color:
색깔을 바꾸려는 목적으로 이 글을 쓰고 있었음을 잊지 않았는지?
color 항목은 원래는 없었는데 추가해줬다. 이 내용은 Qt 설명서를 뒤져서 알아냈다.

색깔 항목은 svg color name 을 써야 한다고 설명서에 나와 있는데, 이것도 다음에서 알아낼 수 있었다.

원하는 색을 찾아 이름을 넣어주면 끝.


Chili Theme 0.5.0 에서 뭔가가 바뀌었는데, 이대로 놔두면 초기화면에 보이는 ‘대기 모드’, ‘다시 시작’, ‘컴퓨터 끄기’ 중, ‘컴퓨터 끄기’가 두 줄로 표시된다. 해상도에 따라 다를 수 있겠지만, 적어도 1920*1080 화면에선 그렇다.

이걸 바꾸려면, 글꼴을 좀 줄여야 하는데, /usr/share/sddm/themes/kde-plasma-chili/components/ActionButton.qml 파일에서 다음부분을 75 에서 85 정도로 바꿔준다.

PlasmaComponents.Label {
        id: label
        font.family: "Noto Sans"
        font.pointSize: mainStack.parent.height / 85
        renderType: Text.QtRendering
        anchors {
            top: icon.bottom
            topMargin: units.smallSpacing
            left: parent.left
            right: parent.right
        }
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignTop
        wrapMode: Text.WordWrap
        font.underline: root.activeFocus
    }

이제야 비로소, 맘에 드는 초기화면을 만날 수 있게 됐다.

Tags:
One Comment

안녕하세요. 글 남겨주셔서 고맙습니다.