QDarkStyleSheet theme for Mudlet (theming/skinning demo)

Share your scripts and packages with other Mudlet users.
User avatar
Vadi
Posts: 5035
Joined: Sat Mar 14, 2009 3:13 pm

QDarkStyleSheet theme for Mudlet (theming/skinning demo)

Post by Vadi »

A Mudlet port of QDarkStyleSheet - pretty good demonstration of all of the toggles and switches you can use when theming/skinning Mudlet 3.0.

Just drag and drop the mpackage into Mudlet 4.8+ to install.

Update 2017/03/26: text editing box is now greyish so you can see the black Mudlet functions. Unfortunately this affects the input line as well - I think there is a way to make the selector avoid it, if anyone wants to look.

Bonus:
Here's another demo you can try (credit):
lua function downloaded_package(a,b)if not b:find("dark",1,true)then return end installPackage(b)os.remove(b)end registerAnonymousEventHandler("sysDownloadDone","downloaded_package")downloadFile(getMudletHomeDir().."/dark.mpackage","http://www.mudlet.org/wp-content/files/ ... mudlet.zip")
Attachments
QDarkStyleSheet.mpackage
(27.98 KiB) Downloaded 2111 times

User avatar
SlySven
Posts: 1019
Joined: Mon Mar 04, 2013 3:40 pm
Location: Deepest Wiltshire, UK
Discord: SlySven#2703

Re: QDarkStyleSheet theme for Mudlet (theming/skinning demo)

Post by SlySven »

Actually you can get the effect without installing anything into Mudlet, merely find the style.qss Qt Style file and all the images (in a ./rc/ sub-directory) in either the above package or from the indicated source to a directory somewhere and then do a global search and replace in the style file to replace the references to ":/qss_icons/rc/" in the Qt resource file style.qrc (the lines containing:

Code: Select all

image: url(:/qss_icons/rc/<an image filename>.png);
) to point to the location in your file-system.

The style.qrc file is effectively an archive type file with the same files inside as are available in the source.

You will want to change the location to the actual ones of the image files (probably relative to the intended location of the style file) - then you can start Mudlet with the command line argument --stylesheet=<relative path from the Mudlet executable to the style file>/style.qss and it will use the style just like that. Note: for convenience it is probable simplest just to put the style.qss file in the same directory as the Mudlet executable and the images in an rc sub-directory....
DarkStyle_sample.png
Incidentally, it is probably quicker if you are experimenting with your own Qt stylesheet that will use external files to at least work with actual files until you want to start bundling them up as the creator of this project has. You may notice that Mudlet too uses a Qt resource file which you may see as mudlet_alpha.qrc in the sources, strangely we have never updated it from being called alpha even though we have been through more than one official release (candidates)! :lol:

User avatar
Vadi
Posts: 5035
Joined: Sat Mar 14, 2009 3:13 pm

Re: QDarkStyleSheet theme for Mudlet (theming/skinning demo)

Post by Vadi »

I think if you look into the package, you'll see that I've just done that all for you ;) .

User avatar
SlySven
Posts: 1019
Joined: Mon Mar 04, 2013 3:40 pm
Location: Deepest Wiltshire, UK
Discord: SlySven#2703

Re: QDarkStyleSheet theme for Mudlet (theming/skinning demo)

Post by SlySven »

But not applied it via the command line I guess? :smile:

User avatar
Vadi
Posts: 5035
Joined: Sat Mar 14, 2009 3:13 pm

Re: QDarkStyleSheet theme for Mudlet (theming/skinning demo)

Post by Vadi »

Not sure what you mean!

User avatar
SlySven
Posts: 1019
Joined: Mon Mar 04, 2013 3:40 pm
Location: Deepest Wiltshire, UK
Discord: SlySven#2703

Re: QDarkStyleSheet theme for Mudlet (theming/skinning demo)

Post by SlySven »

Code: Select all

mudlet --stylesheet=style.qss

User avatar
Vadi
Posts: 5035
Joined: Sat Mar 14, 2009 3:13 pm

Re: QDarkStyleSheet theme for Mudlet (theming/skinning demo)

Post by Vadi »

That's not really practical for most of our users as opposed to copy/pasting a command into Mudlet!

phasma
Posts: 191
Joined: Sat Aug 03, 2013 7:00 pm
Discord: phasma#4694

Re: QDarkStyleSheet theme for Mudlet (theming/skinning demo)

Post by phasma »


vizman
Posts: 10
Joined: Fri Feb 09, 2018 8:48 pm

Re: QDarkStyleSheet theme for Mudlet (theming/skinning demo)

Post by vizman »

Hello, I found here nice theme and want to change it more. Problem is i dont know many selectors, so i cant style several elements. Can you help me telling selectors i have to use for marked elements?

Here is current code:

Code: Select all

local background_color = "#26192f"
local background_color_hover = "#4a305b"
local border_color = "#b8731b"
local border_color_hover = "#e5ae69"
local font_color = "#e5ae69"
local font_color_hover = "#faf3ea"


setAppStyleSheet([[
  QMainWindow {
    background: ]]..background_color_hover..[[;
  }
  QToolBar {
    background: ]]..background_color..[[;
  }
  
  QWidget {
    font-size: 12px;
    color: ]]..font_color..[[;
    background-color: ]]..background_color..[[;
    selection-background-color: ]]..border_color..[[;	/* selected text bg-color */
    /*selection-color: #eff0f1;*/	/* selected text color */
    /*background-clip: border;*/
    /*border-image: none;*/
    border: 0px transparent ]]..border_color..[[;
    /*outline: 0;*/
  }
	
  QWidget:hover {
    color: ]]..font_color_hover..[[;
  }
  
  QToolButton {
    background: ]]..background_color..[[;
    border-style: solid;
    border-width: 2px;
    border-color: ]]..border_color..[[;
    border-radius: 5px;
    font-family: BigNoodleTitling;
    color: ]]..font_color..[[;
    margin: 2px;
    font-size: 10pt;
  }
  
  QToolButton:hover {
	color: ]]..font_color..[[;
    background: ]]..background_color_hover..[[;
    border-color: ]]..border_color_hover..[[;
  }
  
  QDockWidget {
    background: ]]..border_color..[[;
  }
  QStatusBar {
    background: ]]..border_color..[[;
  }
  QScrollBar:vertical {
    background: ]]..background_color..[[;
    width: 15px;
    margin: 22px 0 22px 0;
  }
  QScrollBar::handle:vertical {
    background-color: ]]..background_color..[[;
    min-height: 20px;
    border-width: 2px;
    border-style: solid;
    border-color: ]]..border_color..[[;
    border-radius: 7px;
  }
  QScrollBar::add-line:vertical {
    background-color: ]]..background_color..[[;
    border-width: 2px;
    border-style: solid;
    border-color: ]]..border_color..[[;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    height: 15px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
  }
  QScrollBar::sub-line:vertical {
    background-color: ]]..background_color..[[;
    border-width: 2px;
    border-style: solid;
    border-color: ]]..border_color..[[;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    height: 15px;
    subcontrol-position: top;
    subcontrol-origin: margin;
  }
  QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
    background: white;
    width: 4px;
    height: 3px;
  }
  QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
  }
]])
And here are screens. I marked elements i want to style.
Attachments
theme-02.jpg
theme-02.jpg (112.17 KiB) Viewed 17558 times
theme-01.jpg

vizman
Posts: 10
Joined: Fri Feb 09, 2018 8:48 pm

Re: QDarkStyleSheet theme for Mudlet (theming/skinning demo)

Post by vizman »

Ok, Mostly i have done it.

Image

You can easly change colors by changing variables.

Code: Select all

local background_color = "#26192f"
local background_color_lighter = "#362145"
local background_color_hover = "#4a305b"
local border_color = "#b8731b"
local border_color_hover = "#e5ae69" 
local font_color = "#e5ae69"
local font_color_hover = "#faf3ea"
local border_radius_one = "5px";
local border_radius_two = "5px";
local font_size_settings = "13px";


setAppStyleSheet([[

  QMainWindow {
    background: ]]..background_color_hover..[[;
  }
 
  QToolBar {
    background: ]]..background_color..[[;
  }
  
  QWidget {
    /*font-size: ]]..font_size_settings..[[;*/
    color: ]]..font_color..[[;
    background-color: ]]..background_color..[[;
    selection-background-color: ]]..border_color..[[;	/* selected text bg-color */
    /*selection-color: #eff0f1;*/	/* selected text color */
    /*background-clip: border;*/
    /*border-image: none;*/
    border: 0px transparent ]]..border_color..[[;
    /*outline: 0;*/
  }
	
  QWidget:hover {
    color: ]]..font_color_hover..[[;
  }

  QWidget:item {
    background-color: ]]..background_color..[[;
    color: ]]..font_color_hover..[[;
  }

  QWidget:item:hover {
    background-color: ]]..background_color_hover..[[;
    color: ]]..font_color_hover..[[;
  }
  
  QWidget:item:selected {
    background-color: ]]..background_color_hover..[[;
  }

  QLineEdit {
    background-color: ]]..background_color_lighter..[[;
    padding: 5px;
    border-radius: ]]..border_radius_two..[[;
  }

  QLineEdit:hover,
  QLineEdit:focus {
    background-color: ]]..background_color_hover..[[;
  }
	
  QGroupBox {
    border: 1px solid ]]..background_color_hover..[[;
    border-radius: ]]..border_radius_two..[[;
    margin-top: 20px;
  }

  QGroupBox::title {
    subcontrol-origin: margin;
    subcontrol-position: top center;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
  }

/*  QAbstractScrollArea {
    border-radius: ]]..border_radius_two..[[;
    background-color: ]]..background_color_lighter..[[;
  }*/
	

  QPlainTextEdit {
    border-top: 1px solid ]]..border_color..[[;
    /*border-radius: ]]..border_radius_two..[[;*/
    padding: 3px 8px;
  }

  QSizeGrip {
    background-color: ]]..border_color..[[;
  }

  QPushButton {
    border-radius: ]]..border_radius_two..[[;
  }

  QPushButton:hover {
    background-color: ]]..background_color_hover..[[;
  }

  QPushButton:disabled {
    background-color: ]]..background_color_lighter..[[;
  }


  QComboBox {
    background-color: ]]..background_color_lighter..[[;
    border-radius: ]]..border_radius_two..[[;
    padding: 5px; 
  }

  QComboBox:hover,
  QComboBox:focus {
    background-color: ]]..background_color_hover..[[;
  }

  QSpinBox {
    background-color: ]]..background_color_lighter..[[;
    padding: 5px;
    border-radius: ]]..border_radius_two..[[;
  }

  QSpinBox:hover {
    background-color: ]]..background_color_hover..[[;
  }

  QTabWidget::pane {
    border: 0px solid ]]..background_color_hover..[[;
    /*padding: 5px;*/
    /*margin: 0px;*/
  }

  QTabWidget::tab-bar {
    left: 10px;	
  }

  QTabBar {
    qproperty-drawBase: 0;
    border-bottom: 2px solid ]]..background_color_hover..[[;
  }

  QTabBar::tab:top {
    color: ]]..font_color..[[;
    border: 2px solid ]]..background_color_hover..[[;
    background-color: ]]..background_color..[[;
    padding: 5px;
    margin-right: 5px;
    min-width: 50px;
    border-top-left-radius: ]]..border_radius_two..[[;
    border-top-right-radius: ]]..border_radius_two..[[;
  }
	
  QTabBar::tab:top:selected {
    border-bottom: 2px solid ]]..border_color..[[;
    background-color: ]]..background_color_hover..[[;
  }

  QTabBar::tab:top:!selected:hover {
    color: ]]..font_color_hover..[[;
    background-color: ]]..background_color_hover..[[;
  }

  QListView {
    background-color: ]]..background_color_lighter..[[;
    padding: 5px;
    border-radius: ]]..border_radius_two..[[;
  }

  QListView::item {
    background-color: ]]..background_color_lighter..[[;
    color: ]]..font_color..[[;
    border-radius: ]]..border_radius_two..[[;
    margin: 2px;
  }

  QListView::item:!selected {
    background-color: ]]..background_color_lighter..[[;
    color: ]]..font_color..[[;
  }

  QListView::item:!selected:hover {
    background-color: ]]..background_color_hover..[[;
    color: ]]..font_color_hover..[[;
  }

  QToolButton {
    background: ]]..background_color..[[;
    border-style: solid;
    border-width: 2px;
    border-color: ]]..border_color..[[;
    border-radius: ]]..border_radius_one..[[;
    font-family: BigNoodleTitling;
    color: ]]..font_color..[[;
    margin: 2px;
    font-size: 10pt;
  }
  
  QToolButton:hover {
	color: ]]..font_color..[[;
    background: ]]..background_color_hover..[[;
    border-color: ]]..border_color_hover..[[;
    padding-top: 2px;
  }
  
  QDockWidget {
		color: ]]..font_color_hover..[[;
    background: ]]..border_color..[[;
  }

  QStatusBar {
    background: ]]..border_color..[[;
		color: ]]..font_color_hover..[[;
  }

  QScrollBar:vertical {
    background: ]]..background_color..[[;
    width: 15px;
    margin: 22px 0 22px 0;
  }

  QScrollBar::handle:vertical {
    background-color: ]]..background_color..[[;
    min-height: 20px;
    border-width: 2px;
    border-style: solid;
    border-color: ]]..border_color..[[;
    border-radius: 7px;
  }

  QScrollBar::add-line:vertical {
    background-color: ]]..background_color..[[;
    border-width: 2px;
    border-style: solid;
    border-color: ]]..border_color..[[;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    height: 15px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
  }
	
  QScrollBar::add-line:vertical:hover,
  QScrollBar::sub-line:vertical:hover,
  QScrollBar::handle:vertical:hover {
    border-color: ]]..border_color_hover..[[;
    background-color: ]]..background_color_hover..[[;
  }

  QScrollBar::sub-line:vertical {
    background-color: ]]..background_color..[[;
    border-width: 2px;
    border-style: solid;
    border-color: ]]..border_color..[[;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    height: 15px;
    subcontrol-position: top;
    subcontrol-origin: margin;
  }

  QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
    background: white;
    width: 4px;
    height: 3px;
  }

  QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
  }
	
/* horizontal scroll */
	
  QScrollBar:horizontal {
    background: ]]..background_color..[[;
    height: 25px;
    margin: 0 22px 10px 22px;
  }
	
  QScrollBar::handle:horizontal {
    background-color: ]]..background_color..[[;
    min-width: 20px;
    border-width: 2px;
    border-style: solid;
    border-color: ]]..border_color..[[;
    border-radius: 7px;
  }
	
  QScrollBar::add-line:horizontal {
    background-color: ]]..background_color..[[;
    border-width: 2px;
    border-style: solid;
    border-color: ]]..border_color..[[;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    height: 11px;
    width: 15px;
    subcontrol-position: right;
    subcontrol-origin: margin;
    margin-bottom: 10px;
  }
	
  QScrollBar::sub-line:horizontal {
    background-color: ]]..background_color..[[;
    border-width: 2px;
    border-style: solid;
    border-color: ]]..border_color..[[;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    height: 11px;
    width: 15px;
    subcontrol-position: left;
    subcontrol-origin: margin;
    margin-bottom: 10px;
  }
	
  QScrollBar::add-line:horizontal:hover,
  QScrollBar::sub-line:horizontal:hover,
  QScrollBar::handle:horizontal:hover {
    border-color: ]]..border_color_hover..[[;
    background-color: ]]..background_color_hover..[[;
  }
	
  QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
  }
	
]])

Post Reply