QDarkStyleSheet theme for Mudlet (theming/skinning demo)

Share your scripts and packages with other Mudlet users.
User avatar
SlySven
Posts: 918
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 » Sun Feb 11, 2018 12:41 pm

@vizman Interesting...

Eraene
Posts: 28
Joined: Wed Nov 27, 2013 10:18 pm

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

Post by Eraene » Tue Sep 18, 2018 8:09 pm

fetaera wrote:
Thu Apr 20, 2017 12:43 am
A dark orange one!

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

Image
Is there any way you can repost this? The paste has been lost! I would love to see how this is put together.

jieiku
Posts: 32
Joined: Fri Mar 01, 2019 1:25 pm
Contact:

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

Post by jieiku » Thu Mar 14, 2019 5:34 pm

I would love to see full code examples of various dark styles as well if anyone has any they have put together and are willing to share

jieiku
Posts: 32
Joined: Fri Mar 01, 2019 1:25 pm
Contact:

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

Post by jieiku » Mon Mar 18, 2019 9:11 am

Trying to create a style that makes the scrollbar appear similar to how it does under KDE (for Windows), here is what I have so far.

I would love it if I could also style the background color of the menu bar where it says "Games Toolox Options Help About" but when I change that color it changes the color of all other widgets as well, and it just looks worse.

Code: [show] | [select all] lua
--windows OS has ugly bright scrollbar in middle of client, below sets dark style similar to KDE
if not aard.scrollstyle then
	aard.scrollstyle = aard.scrollstyle or 1
  if getOS() == "windows" then
    local grey = "#31363b"
		local black = "#000000"
    local blue = "#2478c8"
    
    setAppStyleSheet([[
      QScrollBar:vertical {
         background: ]]..black..[[;
         width: 13px;
         margin: 13px 0 13px 0;
  			 border-radius: 7px;
      }
      QScrollBar:vertical:hover {
         background: ]]..grey..[[;
         width: 17px;
         margin: 13px 0 13px 0;
  			 border-radius: 7px;
      }
			
			QScrollBar:vertical:hover + QScrollBar::handle:vertical {
         background-color: ]]..blue..[[;
         min-height: 20px;
         border-width: 1px;
         border-style: solid;
         border-color: ]]..black..[[;
         border-radius: 7px;
      }
			
      QScrollBar::handle:vertical {
         background-color: ]]..grey..[[;
         min-height: 20px;
         border-width: 4px;
         border-style: solid;
         border-color: ]]..black..[[;
         border-radius: 7px;
      }
      QScrollBar::handle:vertical:hover {
         background-color: ]]..blue..[[;
         min-height: 20px;
         border-width: 1px;
         border-style: solid;
         border-color: ]]..black..[[;
         border-radius: 7px;
      }
      QScrollBar::add-line:vertical {
       background-color: ]]..black..[[;
       border-width: 1px;
       border-style: solid;
       border-color: ]]..black..[[;
       border-radius: 7px;
            height: 7px;
            subcontrol-position: bottom;
            subcontrol-origin: margin;
      }
      QScrollBar::sub-line:vertical {
       background-color: ]]..black..[[;
       border-width: 1px;
       border-style: solid;
       border-color: ]]..black..[[;
       border-radius: 7px;
            height: 7px;
            subcontrol-position: top;
            subcontrol-origin: margin;
      }
      QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
         background: black;
         width: 3px;
         height: 3px;
      }
      QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
         background: none;
      }
    ]])
  end
end
scrollbar:
1.PNG
on hover:
2.png

Eraene
Posts: 28
Joined: Wed Nov 27, 2013 10:18 pm

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

Post by Eraene » Fri Mar 22, 2019 10:44 pm

I'm long overdue in doing this, but - I'm attaching the dark theme I spent numerous long hours and days trying to get just right for me. It themes just about everything it is possible to theme in Mudlet barring some perhaps obscure dialog boxes I've missed.

It is quite long at just under 700 lines, a lot of the fault of that is various border settings on numerous widgets to make elements look 3D shaded. There are many variables at the top of the script to experiment with for color customization.

Known issues:
  • Applying theme after any Animated Timer gauges are running will remove the styling of those timer gauges until next profile load.
  • Headers from item trees are un-themed because there is no current way to theme those.
Package includes element icons from original QDarkStyleSheet package.

Updated to include sysInstallEvent so it activates as soon as it is installed!

New update: Made slight adjustments to differentiate between enabled and disabled UI elements.
Attachments
DarkTheme.mpackage
(23.42 KiB) Downloaded 31 times

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests