Mudlet - Forum

User Help and Development Forum
https://forums.mudlet.org/

QDarkStyleSheet theme for Mudlet (theming/skinning demo)

https://forums.mudlet.org/viewtopic.php?f=6&t=17624

Page 1 of 2

QDarkStyleSheet theme for Mudlet (theming/skinning demo)

Posted: Mon Mar 06, 2017 8:14 pm
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")

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

Posted: Tue Mar 07, 2017 3:06 am
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:

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

Posted: Tue Mar 07, 2017 5:32 am
by Vadi
I think if you look into the package, you'll see that I've just done that all for you ;) .

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

Posted: Wed Mar 08, 2017 5:36 pm
by SlySven
But not applied it via the command line I guess? :smile:

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

Posted: Wed Mar 08, 2017 7:33 pm
by Vadi
Not sure what you mean!

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

Posted: Wed Mar 08, 2017 9:25 pm
by SlySven

Code: Select all

mudlet --stylesheet=style.qss

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

Posted: Wed Mar 08, 2017 10:03 pm
by Vadi
That's not really practical for most of our users as opposed to copy/pasting a command into Mudlet!

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

Posted: Thu Apr 20, 2017 12:43 am
by phasma
A dark orange one!

http://paste.taernae.net/zasigehoko.lua

Image

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

Posted: Fri Feb 09, 2018 9:02 pm
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.

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

Posted: Sat Feb 10, 2018 6:51 am
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;
  }
	
]])
All times are UTC
Page 1 of 2

Powered by phpBB® Forum Software © phpBB Limited