Skip to content

Commit

Permalink
Added color scheme and new configuration options
Browse files Browse the repository at this point in the history
  • Loading branch information
EricKotato committed Jun 7, 2018
1 parent 38494c1 commit 24fcb01
Show file tree
Hide file tree
Showing 11 changed files with 337 additions and 95 deletions.
32 changes: 12 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,31 +16,23 @@ Simple dark SDDM theme.

Create file `theme.conf.user` in theme folder. See `slice/theme.conf` for reference.

### Available options
### Base options

* `font` - overall font. Defaults to `Roboto`.
* `background` - path to background image. If not set, falls back to `color_bg`. Not set by default.
* `bg_mode` - background image fill mode. Can be either `aspect`, `fill`, `tile` or `none`. Defaults to `aspect`.
* `parallax_bg_shift` - shifting of parallax background on tab change in pixels. `0` disables parallax motion. Negative values will scroll background in opposite direction. Default is `20`.
* `color_bg` - main background color. Defaults to `#222222`.
* `color_button_bg_idle` - button background color (in idle state). Defaults to `#888888`.
* `color_button_bg_hover` - button background color (in hover state). Defaults to `#aaaaaa`.
* `color_button_bg_selected` - selected button background color (in idle state). Defaults to `#dddddd`.
* `color_button_bg_selected_hover` - selected button background color (in hover state). Defaults to `#cccccc`.
* `color_button_text` - button text color (in any state). Defaults to `#1f1f1f`.
* `color_text` - main text and foreground elements color (such as progress bar and power icons). Defaults to `#dddddd`.
* `color_placeholder_text` - placeholder text color (in password field). Defaults to `#888888`.
* `color_input_bg` - input field background color. Defaults to `#22ffffff`.
* `color_input_text` - input field background color. Defaults to `#dddddd`.
* `color_selection_bg` - selected text background color. Defaults to `#555555`.
* `color_selection_text` - selected text color. Defaults to `#dddddd`.
* `color_text_bg` - text elements background color. Defaults to `#22ffffff`.
* `color_icon_bg` - image elements background color. Defaults to `#11ffffff`.
* `color_error_bg` - error message background color. Defaults to `#11ffffff`.
* `color_error_text` - error message text color. Defaults to `#dddddd`.
* `color_progress_bar` - progress bar color. Defaults to `#dddddd`.
* `color_progress_bar_slider` - progress bar slider color. Defaults to `#dddddd`.
* `color_progress_bar_bg` - progress bar background color. Defaults to `#888888`.

### Color scheme

There are many color options. In fact, too many. So now they are grouped by layers in [color scheme](https://github.com/RadRussianRus/sddm-slice/wiki/Color-scheme). Most of them are optional, only mandatory options are from [layer 1](https://github.com/RadRussianRus/sddm-slice/wiki/Layer-1):

* `color_bg` - background color. Defaults to `#222222`.
* `color_main` - main color. Defaults to `#dddddd`.
* `color_dimmed` - dimmed main color. Defaults to `#888888`.
* `color_contrast` - color that contrasting to both main and dimmed. Defaults to `#1f1f1f`.

Info about other layers can be found on wiki: [layer 2](https://github.com/RadRussianRus/sddm-slice/wiki/Layer-2), [layer 3](https://github.com/RadRussianRus/sddm-slice/wiki/Layer-3).

## License

Expand Down
196 changes: 196 additions & 0 deletions slice/ColorScheme.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
import QtQuick 2.7

Item
{
/* * * * * * * * * * * * * * * * * *
*
* Layer 1 options
* Required
*
* * * * * * * * * * * * * * * * * */

// Background
property color background: config.color_bg

// Base colors
property color main: config.color_main
property color dimmed: config.color_dimmed
property color contrast: config.color_contrast


/* * * * * * * * * * * * * * * * * *
*
* Layer 2 options
* Common
*
* * * * * * * * * * * * * * * * * */

// Text elements
property color text:
{
if (config.color_text) return config.color_text
else return main
}
property color textDimmed:
{
if (config.color_text_dimmed) return config.color_text_dimmed
else return dimmed
}
property color textBg: {
if (config.color_text_bg) return config.color_text_bg
else return Qt.rgba(main.r, main.g, main.b, 0.1)
}
property color textHover:
{
if (config.color_text_hover) return config.color_text_hover
else return text
}
property color textDimmedHover:
{
if (config.color_text_dimmed_hover) return config.color_text_dimmed_hover
else return textDimmed
}
property color textBgHover:
{
if (config.color_text_bg_hover) return config.color_text_bg_hover
else if (config.color_text_bg) return config.color_text_bg
else return Qt.rgba(main.r, main.g, main.b, 0.15)
}

// Icon elements
property color icon:
{
if (config.color_icon) return config.color_icon
else return text
}
property color iconBg:
{
if (config.color_icon_bg) return config.color_icon_bg
else return Qt.rgba(main.r, main.g, main.b, 0.05)
}
property color iconHover:
{
if (config.color_icon_hover) return config.color_icon_hover
else if (config.color_icon) return config.color_icon
else return textHover
}
property color iconBgHover:
{
if (config.color_icon_bg_hover) return config.color_icon_bg_hover
else if (config.color_icon_bg) return config.color_icon_bg
else return Qt.rgba(main.r, main.g, main.b, 0.1)
}

// Button text
property color buttonText:
{
if (config.color_button_text) return config.color_button_text
else return contrast
}
property color buttonTextHover:
{
if (config.color_button_text_hover) return config.color_button_text_hover
else return buttonText
}
property color buttonTextHighlighted:
{
if (config.color_button_text_selected) return config.color_button_text_selected
else return contrast
}
property color buttonTextHoverHighlighted:
{
if (config.color_button_text_selected_hover) return config.color_button_text_selected_hover
else return buttonTextHighlighted
}

// Button background
property color buttonBg:
{
if (config.color_button_bg) return config.color_button_bg
else return Qt.rgba(dimmed.r, dimmed.g, dimmed.b, 0.9)
}
property color buttonBgHover:
{
if (config.color_button_bg_hover) return config.color_button_bg_hover
else if (config.color_button_bg) return config.color_button_bg
else return dimmed
}
property color buttonBgHighlighted:
{
if (config.color_button_bg_selected) return config.color_button_bg_selected
else return Qt.rgba(main.r, main.g, main.b, 0.9)
}
property color buttonBgHoverHighlighted:
{
if (config.color_button_bg_selected_hover) return config.color_button_bg_selected_hover
else if (config.color_button_bg_selected) return config.color_button_bg_selected
else return main
}

// Progress bar
property color progressBar:
{
if (config.color_progress_bar) return config.color_progress_bar
else return main
}
property color progressBarBg:
{
if (config.color_progress_bar_bg) return config.color_progress_bar_bg
else return dimmed
}


/* * * * * * * * * * * * * * * * * *
*
* Layer 3 options
* Control types
*
* * * * * * * * * * * * * * * * * */

// Error message
property color errorText:
{
if (config.color_error_text) return config.color_error_text
else return text
}
property color errorBg:
{
if (config.color_error_bg) return config.color_error_bg
else return textBg
}

// Input field
property color inputText:
{
if (config.color_input_text) return config.color_input_text
else return text
}
property color inputBg:
{
if (config.color_input_bg) return config.color_input_bg
else return textBg
}
property color inputPlaceholderText:
{
if (config.color_placeholder_text) return config.color_placeholder_text
else return textDimmed
}
property color inputSelectionText:
{
if (config.color_selection_text) return config.color_selection_text
else return inputBg
}
property color inputSelectionBg:
{
if (config.color_selection_bg) return config.color_selection_bg
else return inputText
}

// Progress bar
property color progressBarSlider:
{
if (config.color_progress_bar_slider) return config.color_progress_bar_slider
else return progressBar
}

}
9 changes: 5 additions & 4 deletions slice/LoopListPowerItem.qml
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ Item
opacity: distance
property int duration: 100
width: parent.width
property bool hover: false

signal clicked()
signal entered()
Expand Down Expand Up @@ -43,21 +44,21 @@ Item
id: powerItemIconOverlay
anchors.fill: powerItemIcon
source: powerItemIcon
color: config.color_text
color: ( hover ? colors.iconHover : colors.icon )
}

Rectangle
{
width: 52
height: 52
color: config.color_icon_bg
color: ( hover ? colors.iconBgHover : colors.iconBg )
}

Text
{
id: descriptionLabel
text: itemRoot.title
color: config.color_text
color: ( hover ? colors.textHover : colors.text )

font
{
Expand All @@ -75,7 +76,7 @@ Item
x: 54
width: parent.width - 54
height: 52
color: config.color_text_bg
color: ( hover ? colors.textBgHover : colors.textBg )
}

MouseArea
Expand Down
5 changes: 3 additions & 2 deletions slice/LoopListSessionItem.qml
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,14 @@ Item

property real distance: 1.0
property string sessionName: ""
property bool hover: false

Text
{
id: sessionNameLabel
anchors.centerIn: parent
text: sessionName
color: config.color_text
color: ( hover ? colors.textHover : colors.text )

font
{
Expand All @@ -35,6 +36,6 @@ Item
y: sessionNameLabel.y - 5
width: sessionNameLabel.width + 20
height: sessionNameLabel.height + 10
color: config.color_text_bg
color: ( hover ? colors.textBgHover : colors.textBg )
}
}
11 changes: 7 additions & 4 deletions slice/LoopListUserItem.qml
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ Item
id: itemRoot
opacity: distance
width: parent.width

property bool hover: false
property bool hoverEnabled: true

transform: Scale
{
Expand Down Expand Up @@ -34,14 +37,14 @@ Item
{
width: 68
height: 68
color: config.color_icon_bg
color: ( hoverEnabled && hover ? colors.iconBgHover : colors.iconBg )
}


Text
{
text: userName
color: config.color_text
color: ( hoverEnabled && hover ? colors.textHover : colors.text )

font
{
Expand All @@ -57,7 +60,7 @@ Item
Text
{
text: userLogin
color: config.color_text
color: ( hoverEnabled && hover ? (userName == "" ? colors.textHover : colors.textDimmedHover ) : (userName == "" ? colors.text : colors.textDimmed ) )
y: userName == "" ? 6 : 36
font
{
Expand All @@ -74,6 +77,6 @@ Item
y: 0
width: parent.width - 70
height: 68
color: config.color_text_bg
color: ( hoverEnabled && hover ? colors.textBgHover : colors.textBg )
}
}
Loading

0 comments on commit 24fcb01

Please sign in to comment.