Wowpedia:Sandbox/9

This is a continuation of https://community.fandom.com/wiki/Community_Central:Sandbox?oldid=3451488 to show the impact on Wowpedia's default skin.

Problem
View in: Oasis | Hydra | HydraDark | FandomDesktop

Example that looks terrible on FandomDesktop dark theme, yet looked great on HydraDark:

Option 1: Same colours but brighter
Using colours in the code block at the bottom, intended to stay similar to FandomDesktop light while being minimally legible. -- This is the same example, but colours were custom-coded. local MySlider = CreateFrame( "Slider", "MySliderGlobalName" , ParentFrame, "OptionsSliderTemplate" ) MySlider:SetSize( 20, 100 ) MySlider:SetOrientation( "HORIZONTAL" ) MySlider:SetScript( "OnValueChanged", function (self,value,userInput)    if userInput then          print ( "Manually set by the user" )     else          print ( "Setfrom a script" )     end  end )

Option 2: Totally different colours
As above, but also blending different colours from HydraDark and thin air. Wowpedia should probably do this, but I can understand if Fandom might want to default to option 1 (even though its ugly). -- This is the same example, but colours were custom-coded. local MySlider = CreateFrame( "Slider", "MySliderGlobalName" , ParentFrame, "OptionsSliderTemplate" ) MySlider:SetSize( 20, 100 ) MySlider:SetOrientation( "HORIZONTAL" ) MySlider:SetScript( "OnValueChanged", function (self, value, userInput)    if userInput then          print ( "Manually set by the user" )     else          print ( "Set from a script" )     end  end )

Option 3: Change the background colour
If the background colour is darker, then it makes both options 1 and 2 even better.

This is even true for Fandom... for example, if you wish to embrace the Oasis and live the Wikia life then this is what option #1 looks like:  -- Same as option 1 but with Fandom's Community Central background theme colour... (toxic turquoise!)

local MySlider = CreateFrame( "Slider", "MySliderGlobalName" , ParentFrame, "OptionsSliderTemplate" ) MySlider:SetSize( 20, 100 ) MySlider:SetOrientation( "HORIZONTAL" ) MySlider:SetScript( "OnValueChanged", function (self, value, userInput)  if userInput then       print ( "Manually set by the user" )   else

print ( "Set from a script" ) end end )

But if you adopted Wowpedia's old secondary background colour.... (#282828 on hydradark, vice #414141 on FandomDesktop or #2c3334 for toxic turqoise)  -- Option 1 with compromise background color

local MySlider = CreateFrame( "Slider", "MySliderGlobalName" , ParentFrame, "OptionsSliderTemplate" ) MySlider:SetSize( 20, 100 ) MySlider:SetOrientation( "HORIZONTAL" ) MySlider:SetScript( "OnValueChanged", function (self, value, userInput)  if userInput then       print ( "Manually set by the user" )   else

print ( "Set from a script" ) end end )

And this is if you did it with option #2 instead...  -- Option 2 with a darker background.

local MySlider = CreateFrame( "Slider", "MySliderGlobalName" , ParentFrame, "OptionsSliderTemplate" ) MySlider:SetSize( 20, 100 ) MySlider:SetOrientation( "HORIZONTAL" ) MySlider:SetScript( "OnValueChanged", function (self, value, userInput)  if userInput then       print ( "Manually set by the user" )   else       print ( "Set from a script" )   end end )

Option 4: Copy code editors
On the ui dev channel, some folks are saying we should just mimic common code editors. Here are a couple variants:

Borrowing some colours from VSCode Dark+ -- note that the actual source code on GitHub is under MIT license (not CC BY-SA 3.0)  -- Option 4, using background in #3 with some colours from VSCode Dark+.

local MySlider = CreateFrame ( "Slider", "MySliderGlobalName" , ParentFrame, "OptionsSliderTemplate" ) MySlider:SetSize( 20, 100 ) MySlider:SetOrientation( "HORIZONTAL" ) MySlider:SetScript( "OnValueChanged", function (self, value, userInput)  if userInput then       print ( "Manually set by the user" )   else       print ( "Set from a script" )   end end )

Borrowing colours from the actual scribunto code editor inside FandomDesktop dark theme. This has the advantage that when modifying code on the wiki, the colours will be the same in both view and edit mode.  -- Option 4, using background in #3 with some colours from FandomDesktop Dark Scribunto editor.

local MySlider = CreateFrame( "Slider", "MySliderGlobalName" , ParentFrame, "OptionsSliderTemplate" ) MySlider:SetSize( 20, 100 ) MySlider:SetOrientation( "HORIZONTAL" ) MySlider:SetScript( "OnValueChanged", function (self, value, userInput)  if userInput then       print ( "Manually set by the user" )   else       print ( "Set from a script" )   end end )

How to make it work (Fandom)
This is written with Fandom in mind, using Option #1. I also include the Option #2 values in comments; note they offer superior contrast! Contrast measurements were done using FandomDesktop at Community Central, so its reflective of your core template (not of any wowpedia modifications).