How to make a settings menu in Roblox Studio

-- Script in ServerScriptService named SettingsSaver.
-- Loads each player's settings into attributes on the player, and saves the changes
-- the settings menu sends. Only known settings with the right type are kept.
local DataStoreService = game:GetService("DataStoreService")
local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Every setting and its default. The menu shows these.
local DEFAULTS: { [string]: boolean } = {
	Music = true,
	SoundEffects = true,
	Shadows = true,
}

local store = DataStoreService:GetDataStore("PlayerSettings_v1")
local changeEvent = Instance.new("RemoteEvent")
changeEvent.Name = "ChangeSetting"
changeEvent.Parent = ReplicatedStorage

local dirty: { [Player]: boolean } = {} -- changed since the last save
local loaded: { [Player]: boolean } = {}

local function current(player: Player): { [string]: boolean }
	local values: { [string]: boolean } = {}
	for name, default in DEFAULTS do
		local value = player:GetAttribute("Setting_" .. name)
		values[name] = if type(value) == "boolean" then value else default
	end
	return values
end

Players.PlayerAdded:Connect(function(player: Player)
	local ok, data = pcall(function()
		return store:GetAsync(tostring(player.UserId))
	end)
	local saved = if ok and type(data) == "table" then data else {}
	for name, default in DEFAULTS do
		local value = saved[name]
		player:SetAttribute("Setting_" .. name, if type(value) == "boolean" then value else default)
	end
	-- Only save later if the load worked, so a failed load never overwrites good settings
	loaded[player] = ok
end)

changeEvent.OnServerEvent:Connect(function(player: Player, name: unknown, value: unknown)
	if typeof(name) ~= "string" or DEFAULTS[name] == nil or typeof(value) ~= "boolean" then
		return
	end
	player:SetAttribute("Setting_" .. name, value)
	dirty[player] = true
end)

local function save(player: Player)
	if not (dirty[player] and loaded[player]) then
		return
	end
	dirty[player] = nil
	local ok, err = pcall(function()
		store:SetAsync(tostring(player.UserId), current(player))
	end)
	if not ok then
		warn("SettingsSaver: could not save", player.Name, err)
	end
end

Players.PlayerRemoving:Connect(function(player: Player)
	save(player)
	dirty[player] = nil
	loaded[player] = nil
end)

game:BindToClose(function()
	for _, player in Players:GetPlayers() do
		task.spawn(save, player)
	end
	task.wait(3)
end)

-- LocalScript in StarterPlayerScripts named SettingsMenu.
-- A gear button opens a panel of on/off switches. Each switch changes the game on
-- this device straight away, and the server saves it for next time.
local Lighting = game:GetService("Lighting")
local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local SoundService = game:GetService("SoundService")

local changeEvent = ReplicatedStorage:WaitForChild("ChangeSetting") :: RemoteEvent
local player = Players.LocalPlayer

-- The switches in the order they appear, with the text shown
local SETTINGS = {
	{ name = "Music", label = "Music" },
	{ name = "SoundEffects", label = "Sound effects" },
	{ name = "Shadows", label = "Shadows" },
}

-- What each setting does on this device. Changes made by a LocalScript stay on this device.
local function apply(name: string, on: boolean)
	if name == "Music" then
		local music = SoundService:FindFirstChild("Music")
		if music then
			for _, sound in music:GetChildren() do
				if sound:IsA("Sound") then
					sound.Volume = if on then 0.4 else 0
				end
			end
		end
	elseif name == "SoundEffects" then
		local effects = SoundService:FindFirstChild("Effects")
		if effects and effects:IsA("SoundGroup") then
			effects.Volume = if on then 0.5 else 0
		end
	elseif name == "Shadows" then
		Lighting.GlobalShadows = on
	end
end

local function get(name: string): boolean
	return player:GetAttribute("Setting_" .. name) ~= false
end

-- The gear button and the panel
local gui = Instance.new("ScreenGui")
gui.Name = "SettingsGui"
gui.ResetOnSpawn = false
local function corner(parent: Instance, radius: number)
	local c = Instance.new("UICorner")
	c.CornerRadius = UDim.new(0, radius)
	c.Parent = parent
end
local gear = Instance.new("TextButton")
gear.Text = "Settings"
gear.Size = UDim2.fromOffset(100, 40)
gear.Position = UDim2.new(0, 12, 0.5, -52)
gear.BackgroundColor3 = Color3.fromRGB(70, 64, 90)
gear.TextColor3 = Color3.new(1, 1, 1)
gear.Font = Enum.Font.GothamBold
gear.TextSize = 16
corner(gear, 10)
gear.Parent = gui

local panel = Instance.new("Frame")
panel.AnchorPoint = Vector2.new(0.5, 0.5)
panel.Position = UDim2.fromScale(0.5, 0.5)
panel.Size = UDim2.fromOffset(340, 60 + #SETTINGS * 52)
panel.BackgroundColor3 = Color3.fromRGB(30, 26, 40)
panel.Visible = false
corner(panel, 14)
panel.Parent = gui
local heading = Instance.new("TextLabel")
heading.Text = "Settings"
heading.Size = UDim2.new(1, 0, 0, 48)
heading.BackgroundTransparency = 1
heading.TextColor3 = Color3.new(1, 1, 1)
heading.Font = Enum.Font.GothamBold
heading.TextSize = 20
heading.Parent = panel

local switches: { [string]: TextButton } = {}
local function drawSwitch(name: string)
	local on = get(name)
	local switch = switches[name]
	switch.Text = if on then "ON" else "OFF"
	switch.BackgroundColor3 = if on then Color3.fromRGB(70, 200, 110) else Color3.fromRGB(90, 84, 104)
end

for i, setting in SETTINGS do
	local row = Instance.new("TextLabel")
	row.Text = setting.label
	row.Size = UDim2.new(1, -120, 0, 44)
	row.Position = UDim2.fromOffset(20, 48 + (i - 1) * 52)
	row.BackgroundTransparency = 1
	row.TextColor3 = Color3.new(1, 1, 1)
	row.Font = Enum.Font.Gotham
	row.TextSize = 17
	row.TextXAlignment = Enum.TextXAlignment.Left
	row.Parent = panel
	local switch = Instance.new("TextButton")
	switch.Size = UDim2.fromOffset(80, 36)
	switch.Position = UDim2.new(1, -100, 0, 52 + (i - 1) * 52)
	switch.TextColor3 = Color3.new(1, 1, 1)
	switch.Font = Enum.Font.GothamBold
	switch.TextSize = 16
	corner(switch, 18)
	switch.Parent = panel
	switches[setting.name] = switch
	drawSwitch(setting.name)
	switch.Activated:Connect(function()
		local on = not get(setting.name)
		-- Change it here at once; the server checks it, stores it and saves it
		player:SetAttribute("Setting_" .. setting.name, on)
		changeEvent:FireServer(setting.name, on)
	end)
	-- Redraw and apply whenever the value changes, including when the server loads it
	player:GetAttributeChangedSignal("Setting_" .. setting.name):Connect(function()
		drawSwitch(setting.name)
		apply(setting.name, get(setting.name))
	end)
	apply(setting.name, get(setting.name))
end

gear.Activated:Connect(function()
	panel.Visible = not panel.Visible
end)
gui.Parent = player:WaitForChild("PlayerGui")