Dynamic theming. Closes #241.

Upgrades to Roact master and introduces dynamic theme switching.

We branch on the theme name in order to try to use Rojo's brand
colors instead of Studio's. I kind of winged it with these colors
and we might want to choose slightly nicer dark theme colors
in the future.

I also took the opportunity to reorganize the color naming scheme
since it didn't really work for dark theme.

plugin/src/Components/App.lua

@@ -13,6 +13,7 @@ local Version = require(Plugin.Version)
 local preloadAssets = require(Plugin.preloadAssets)
 local strict = require(Plugin.strict)
 
+local Theme = require(Plugin.Components.Theme)
 local ConnectPanel = require(Plugin.Components.ConnectPanel)
 local ConnectingPanel = require(Plugin.Components.ConnectingPanel)
 local ConnectionActivePanel = require(Plugin.Components.ConnectionActivePanel)
@@ -199,9 +200,11 @@ function App:render()
 		}
 	end
 
-	return Roact.createElement(Roact.Portal, {
+	return Roact.createElement(Theme.StudioProvider, nil, {
+		UI = Roact.createElement(Roact.Portal, {
 			target = self.dockWidget,
-	}, children)
+		}, children),
+	})
 end
 
 function App:didMount()

plugin/src/Components/ConnectPanel.lua

@@ -4,8 +4,8 @@ local Plugin = Rojo.Plugin
 local Roact = require(Rojo.Roact)
 
 local Config = require(Plugin.Config)
-local Theme = require(Plugin.Theme)
 
+local Theme = require(Plugin.Components.Theme)
 local Panel = require(Plugin.Components.Panel)
 local FitList = require(Plugin.Components.FitList)
 local FitText = require(Plugin.Components.FitText)
@@ -26,6 +26,7 @@ end
 function ConnectPanel:render()
 	local startSession = self.props.startSession
 
+	return Theme.with(function(theme)
 		return e(Panel, nil, {
 			Layout = e("UIListLayout", {
 				SortOrder = Enum.SortOrder.LayoutOrder,
@@ -63,10 +64,10 @@ function ConnectPanel:render()
 						LayoutOrder = 1,
 						BackgroundTransparency = 1,
 						TextXAlignment = Enum.TextXAlignment.Left,
-					Font = Theme.TitleFont,
+						Font = theme.TitleFont,
 						TextSize = 20,
 						Text = "Address",
-					TextColor3 = Theme.PrimaryColor,
+						TextColor3 = theme.Text1,
 					}),
 
 					Input = e(FormTextInput, {
@@ -96,10 +97,10 @@ function ConnectPanel:render()
 						LayoutOrder = 1,
 						BackgroundTransparency = 1,
 						TextXAlignment = Enum.TextXAlignment.Left,
-					Font = Theme.TitleFont,
+						Font = theme.TitleFont,
 						TextSize = 20,
 						Text = "Port",
-					TextColor3 = Theme.PrimaryColor,
+						TextColor3 = theme.Text1,
 					}),
 
 					Input = e(FormTextInput, {
@@ -156,6 +157,7 @@ function ConnectPanel:render()
 				}),
 			}),
 		})
+	end)
 end
 
 return ConnectPanel

plugin/src/Components/ConnectingPanel.lua

@@ -2,8 +2,7 @@ local Roact = require(script:FindFirstAncestor("Rojo").Roact)
 
 local Plugin = script:FindFirstAncestor("Plugin")
 
-local Theme = require(Plugin.Theme)
+local Theme = require(Plugin.Components.Theme)
-
 local Panel = require(Plugin.Components.Panel)
 local FitText = require(Plugin.Components.FitText)
 
@@ -12,6 +11,7 @@ local e = Roact.createElement
 local ConnectingPanel = Roact.Component:extend("ConnectingPanel")
 
 function ConnectingPanel:render()
+	return Theme.with(function(theme)
 		return e(Panel, nil, {
 			Layout = Roact.createElement("UIListLayout", {
 				HorizontalAlignment = Enum.HorizontalAlignment.Center,
@@ -22,13 +22,14 @@ function ConnectingPanel:render()
 
 			Text = e(FitText, {
 				Padding = Vector2.new(12, 6),
-			Font = Theme.ButtonFont,
+				Font = theme.ButtonFont,
 				TextSize = 18,
 				Text = "Connecting...",
-			TextColor3 = Theme.PrimaryColor,
+				TextColor3 = theme.Text1,
 				BackgroundTransparency = 1,
 			}),
 		})
+	end)
 end
 
 return ConnectingPanel

plugin/src/Components/ConnectionActivePanel.lua

@@ -2,8 +2,7 @@ local Roact = require(script:FindFirstAncestor("Rojo").Roact)
 
 local Plugin = script:FindFirstAncestor("Plugin")
 
-local Theme = require(Plugin.Theme)
+local Theme = require(Plugin.Components.Theme)
-
 local Panel = require(Plugin.Components.Panel)
 local FitText = require(Plugin.Components.FitText)
 local FormButton = require(Plugin.Components.FormButton)
@@ -15,6 +14,7 @@ local ConnectionActivePanel = Roact.Component:extend("ConnectionActivePanel")
 function ConnectionActivePanel:render()
 	local stopSession = self.props.stopSession
 
+	return Theme.with(function(theme)
 		return e(Panel, nil, {
 			Layout = Roact.createElement("UIListLayout", {
 				HorizontalAlignment = Enum.HorizontalAlignment.Center,
@@ -25,10 +25,10 @@ function ConnectionActivePanel:render()
 
 			Text = e(FitText, {
 				Padding = Vector2.new(12, 6),
-			Font = Theme.ButtonFont,
+				Font = theme.ButtonFont,
 				TextSize = 18,
 				Text = "Connected to Live-Sync Server",
-			TextColor3 = Theme.PrimaryColor,
+				TextColor3 = theme.Text1,
 				BackgroundTransparency = 1,
 			}),
 
@@ -41,6 +41,7 @@ function ConnectionActivePanel:render()
 				end,
 			}),
 		})
+	end)
 end
 
 return ConnectionActivePanel

plugin/src/Components/ErrorPanel.lua

@@ -2,8 +2,7 @@ local Roact = require(script:FindFirstAncestor("Rojo").Roact)
 
 local Plugin = script:FindFirstAncestor("Plugin")
 
-local Theme = require(Plugin.Theme)
+local Theme = require(Plugin.Components.Theme)
-
 local Panel = require(Plugin.Components.Panel)
 local FitText = require(Plugin.Components.FitText)
 local FitScrollingFrame = require(Plugin.Components.FitScrollingFrame)
@@ -20,6 +19,7 @@ function ErrorPanel:render()
 	local errorMessage = self.props.errorMessage
 	local onDismiss = self.props.onDismiss
 
+	return Theme.with(function(theme)
 		return e(Panel, nil, {
 			Layout = Roact.createElement("UIListLayout", {
 				HorizontalAlignment = Enum.HorizontalAlignment.Center,
@@ -34,7 +34,7 @@ function ErrorPanel:render()
 					BorderSizePixel = 0,
 					Size = UDim2.new(1, -HOR_PADDING * 2, 1, -BUTTON_HEIGHT),
 					Position = UDim2.new(0, HOR_PADDING, 0, 0),
-				ScrollBarImageColor3 = Theme.PrimaryColor,
+					ScrollBarImageColor3 = theme.Text1,
 					VerticalScrollBarInset = Enum.ScrollBarInset.ScrollBar,
 					ScrollingDirection = Enum.ScrollingDirection.Y,
 				},
@@ -46,11 +46,11 @@ function ErrorPanel:render()
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextYAlignment = Enum.TextYAlignment.Top,
 					FitAxis = "Y",
-				Font = Theme.ButtonFont,
+					Font = theme.ButtonFont,
 					TextSize = 18,
 					Text = errorMessage,
 					TextWrap = true,
-				TextColor3 = Theme.PrimaryColor,
+					TextColor3 = theme.Text1,
 					BackgroundTransparency = 1,
 				}),
 			}),
@@ -64,6 +64,7 @@ function ErrorPanel:render()
 				end,
 			}),
 		})
+	end)
 end
 
 return ErrorPanel

plugin/src/Components/FormButton.lua

@@ -4,7 +4,7 @@ local Plugin = Rojo.Plugin
 local Roact = require(Rojo.Roact)
 
 local Assets = require(Plugin.Assets)
-local Theme = require(Plugin.Theme)
+local Theme = require(Plugin.Components.Theme)
 local FitList = require(Plugin.Components.FitList)
 local FitText = require(Plugin.Components.FitText)
 
@@ -20,12 +20,13 @@ local function FormButton(props)
 	local textColor
 	local backgroundColor
 
+	return Theme.with(function(theme)
 		if props.secondary then
-		textColor = Theme.AccentColor
+			textColor = theme.Brand1
-		backgroundColor = Theme.SecondaryColor
+			backgroundColor = theme.Background2
 		else
-		textColor = Theme.SecondaryColor
+			textColor = theme.TextOnAccent
-		backgroundColor = Theme.AccentColor
+			backgroundColor = theme.Brand1
 		end
 
 		return e(FitList, {
@@ -52,11 +53,12 @@ local function FormButton(props)
 				Text = text,
 				TextSize = 18,
 				TextColor3 = textColor,
-			Font = Theme.ButtonFont,
+				Font = theme.ButtonFont,
 				Padding = Vector2.new(16, 8),
 				BackgroundTransparency = 1,
 			}),
 		})
+	end)
 end
 
 return FormButton

plugin/src/Components/FormTextInput.lua

@@ -4,7 +4,7 @@ local Plugin = Rojo.Plugin
 local Roact = require(Rojo.Roact)
 
 local Assets = require(Plugin.Assets)
-local Theme = require(Plugin.Theme)
+local Theme = require(Plugin.Components.Theme)
 
 local e = Roact.createElement
 
@@ -35,6 +35,7 @@ function FormTextInput:render()
 		shownPlaceholder = placeholderValue
 	end
 
+	return Theme.with(function(theme)
 		return e("ImageLabel", {
 			LayoutOrder = layoutOrder,
 			Image = RoundBox.asset,
@@ -42,7 +43,7 @@ function FormTextInput:render()
 			ImageRectSize = RoundBox.size,
 			ScaleType = Enum.ScaleType.Slice,
 			SliceCenter = RoundBox.center,
-		ImageColor3 = Theme.SecondaryColor,
+			ImageColor3 = theme.Background2,
 			Size = UDim2.new(width.Scale, width.Offset, 0, TEXT_SIZE + PADDING * 2),
 			BackgroundTransparency = 1,
 		}, {
@@ -51,14 +52,14 @@ function FormTextInput:render()
 				Size = UDim2.new(1, -PADDING * 2, 1, -PADDING * 2),
 				Position = UDim2.new(0.5, 0, 0.5, 0),
 				AnchorPoint = Vector2.new(0.5, 0.5),
-			Font = Theme.InputFont,
+				Font = theme.InputFont,
 				ClearTextOnFocus = false,
 				TextXAlignment = Enum.TextXAlignment.Center,
 				TextSize = TEXT_SIZE,
 				Text = value,
 				PlaceholderText = shownPlaceholder,
-			PlaceholderColor3 = Theme.LightTextColor,
+				PlaceholderColor3 = theme.Text2,
-			TextColor3 = Theme.PrimaryColor,
+				TextColor3 = theme.Text1,
 
 				[Roact.Change.Text] = function(rbx)
 					onValueChange(rbx.Text)
@@ -75,6 +76,7 @@ function FormTextInput:render()
 				end,
 			}),
 		})
+	end)
 end
 
 return FormTextInput

plugin/src/Components/Panel.lua

@@ -3,6 +3,7 @@ local Roact = require(script:FindFirstAncestor("Rojo").Roact)
 local Plugin = script:FindFirstAncestor("Plugin")
 
 local RojoFooter = require(Plugin.Components.RojoFooter)
+local Theme = require(Plugin.Components.Theme)
 
 local e = Roact.createElement
 
@@ -13,6 +14,7 @@ function Panel:init()
 end
 
 function Panel:render()
+	return Theme.with(function(theme)
 		return e("Frame", {
 			Size = UDim2.new(1, 0, 1, 0),
 			BackgroundTransparency = 1,
@@ -24,11 +26,13 @@ function Panel:render()
 
 			Body = e("Frame", {
 				Size = UDim2.new(0, 360, 1, -32),
-			BackgroundTransparency = 1,
+				BackgroundColor3 = theme.Background1,
+				BorderSizePixel = 0,
 			}, self.props[Roact.Children]),
 
 			Footer = e(RojoFooter),
 		})
+	end)
 end
 
 return Panel

plugin/src/Components/RojoFooter.lua

@@ -6,7 +6,7 @@ local Roact = require(Rojo.Roact)
 local Config = require(Plugin.Config)
 local Version = require(Plugin.Version)
 local Assets = require(Plugin.Assets)
-local Theme = require(Plugin.Theme)
+local Theme = require(Plugin.Components.Theme)
 
 local e = Roact.createElement
 
@@ -18,11 +18,13 @@ function RojoFooter:init()
 end
 
 function RojoFooter:render()
+	return Theme.with(function(theme)
 		return e("Frame", {
 			LayoutOrder = 3,
 			Size = UDim2.new(1, 0, 0, 32),
-		BackgroundColor3 = Theme.SecondaryColor,
+			BackgroundColor3 = theme.Background2,
 			BorderSizePixel = 0,
+			ZIndex = 2,
 		}, {
 			Padding = e("UIPadding", {
 				PaddingTop = UDim.new(0, 4),
@@ -50,11 +52,11 @@ function RojoFooter:render()
 				Position = UDim2.new(1, 0, 0, 0),
 				Size = UDim2.new(0, 0, 1, 0),
 				AnchorPoint = Vector2.new(1, 0),
-			Font = Theme.TitleFont,
+				Font = theme.TitleFont,
 				TextSize = 18,
 				Text = Version.display(Config.version),
 				TextXAlignment = Enum.TextXAlignment.Right,
-			TextColor3 = Theme.LightTextColor,
+				TextColor3 = theme.Text2,
 				BackgroundTransparency = 1,
 
 				[Roact.Change.AbsoluteSize] = function(rbx)
@@ -62,6 +64,7 @@ function RojoFooter:render()
 				end,
 			}),
 		})
+	end)
 end
 
 return RojoFooter

plugin/src/Components/Theme.lua

@@ -0,0 +1,104 @@
+--[[
+	Theming system taking advantage of Roact's new context API.
+
+	Doesn't use colors provided by Studio and instead just branches on theme
+	name. This isn't exactly best practice.
+]]
+
+local Studio = settings():GetService("Studio")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+
+local Roact = require(Rojo.Roact)
+local Log = require(Rojo.Log)
+
+local strict = require(script.Parent.Parent.strict)
+
+local lightTheme = strict("Theme", {
+	ButtonFont = Enum.Font.GothamSemibold,
+	InputFont = Enum.Font.Code,
+	TitleFont = Enum.Font.GothamBold,
+	MainFont = Enum.Font.Gotham,
+
+	Brand1 = Color3.fromRGB(225, 56, 53),
+
+	Text1 = Color3.fromRGB(64, 64, 64),
+	Text2 = Color3.fromRGB(160, 160, 160),
+	TextOnAccent = Color3.fromRGB(235, 235, 235),
+
+	Background1 = Color3.fromRGB(255, 255, 255),
+	Background2 = Color3.fromRGB(235, 235, 235),
+})
+
+local darkTheme = strict("Theme", {
+	ButtonFont = Enum.Font.GothamSemibold,
+	InputFont = Enum.Font.Code,
+	TitleFont = Enum.Font.GothamBold,
+	MainFont = Enum.Font.Gotham,
+
+	Brand1 = Color3.fromRGB(225, 56, 53),
+
+	Text1 = Color3.fromRGB(235, 235, 235),
+	Text2 = Color3.fromRGB(200, 200, 200),
+	TextOnAccent = Color3.fromRGB(235, 235, 235),
+
+	Background1 = Color3.fromRGB(48, 48, 48),
+	Background2 = Color3.fromRGB(64, 64, 64),
+})
+
+local Context = Roact.createContext(lightTheme)
+
+local StudioProvider = Roact.Component:extend("StudioProvider")
+
+-- Pull the current theme from Roblox Studio and update state with it.
+function StudioProvider:updateTheme()
+	local studioTheme = Studio.Theme
+
+	if studioTheme.Name == "Light" then
+		self:setState({
+			theme = lightTheme,
+		})
+	elseif studioTheme.Name == "Dark" then
+		self:setState({
+			theme = darkTheme,
+		})
+	else
+		Log.warn("Unexpected theme '{}'' -- falling back to light theme!", studioTheme.Name)
+
+		self:setState({
+			theme = lightTheme,
+		})
+	end
+end
+
+function StudioProvider:init()
+	self:updateTheme()
+end
+
+function StudioProvider:render()
+	return Roact.createElement(Context.Provider, {
+		value = self.state.theme,
+	}, self.props[Roact.Children])
+end
+
+function StudioProvider:didMount()
+	self.connection = Studio.ThemeChanged:Connect(function()
+		self:updateTheme()
+	end)
+end
+
+function StudioProvider:willUnmount()
+	self.connection:Disconnect()
+end
+
+local function with(callback)
+	return Roact.createElement(Context.Consumer, {
+		render = callback,
+	})
+end
+
+return {
+	StudioProvider = StudioProvider,
+	Consumer = Context.Consumer,
+	with = with,
+}

plugin/src/Theme.lua

@@ -1,14 +0,0 @@
-local strict = require(script.Parent.strict)
-
-return strict("Theme", {
-	ButtonFont = Enum.Font.GothamSemibold,
-	InputFont = Enum.Font.Code,
-	TitleFont = Enum.Font.GothamBold,
-	MainFont = Enum.Font.Gotham,
-
-	AccentColor = Color3.fromRGB(225, 56, 53),
-	AccentLightColor = Color3.fromRGB(255, 146, 145),
-	PrimaryColor = Color3.fromRGB(64, 64, 64),
-	SecondaryColor = Color3.fromRGB(235, 235, 235),
-	LightTextColor = Color3.fromRGB(160, 160, 160),
-})

plugin/src/init.server.lua

@@ -19,7 +19,7 @@ local app = Roact.createElement(App, {
 	plugin = plugin,
 })
 
-local tree = Roact.mount(app, game:GetService("CoreGui"), "Rojo UI")
+local tree = Roact.mount(app, nil, "Rojo UI")
 
 plugin.Unloading:Connect(function()
 	Roact.unmount(tree)