> For the complete documentation index, see [llms.txt](https://arrayscripts.gitbook.io/arrayscripts/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://arrayscripts.gitbook.io/arrayscripts/products/array_tuning/configuration.md).

# Configuration

{% hint style="danger" %} <mark style="color:$danger;">**Important:**</mark> After making changes to the configuration, restart the resource using:

`ensure array_tuning`
{% endhint %}

## Config Files

{% tabs %}
{% tab title="config.lua" %}
{% code lineNumbers="true" expandable="true" %}

```lua
Array = {}

Array.Framework = "auto" -- auto, esx, qbcore or custom

Array.ServerName = "ARRAY SCRIPTS" -- Your Server Name

Array.Positions = { -- Tuning Positions
    vector3(-211.6578, -1324.9760, 30.3284),
}

Array.FreeCam = "Q" -- With this key, you can move your camera freely.

Array.GhostVehicle = false -- Makes the vehicle non-collidable and slightly transparent while the tuning menu is open.

Array.RepairSettings = { -- If this is set to true, you will be asked whether the vehicle should be repaired when opening the script.
    Repair = true,
    PayType = "bank", -- bank or money
    RepairCost = 1500
}

Array.BuySettings = {
    Payment = true,
    DefaultPayType = "bank", -- bank or money
    AllowAllVehicles = true, -- true = any vehicle can be tuned, false = only vehicles owned by the player can be tuned
}

Array.Marker = { -- Marker Settings
    DrawDistance = 15.0,
    Scale = vector3(1.0, 1.0, 1.0),
    Type = 21, 
    Color = {r = 136, g = 0, b = 255, a = 100},
    MoveUpAndDown = false,
    Rotate = true,
}

Array.Blip = { -- Blip Settings (https://docs.fivem.net/docs/game-references/blips/)
    enabled = true,
    Sprite = 72,
    Color = 50,
    Scale = 0.8
}

Array.HelpNotify = function(key, text)
    if GetResourceState('array_hud') == 'started' then
        exports["array_hud"]:HelpNotify(key, text)
        return
    end

    SetTextComponentFormat('STRING')
    AddTextComponentString(text)
    DisplayHelpTextFromStringLabel(0, 0, 1, -1)

    -- Or your Custom Help Notify:
    -- exports["hud"]:HelpNotify(key, text)
end

Array.ClientNotify = function(title, message, type)
    TriggerEvent("array_hud:notify", title, message, type, 5000)
end

Array.ServerNotify = function(id, title, message, type)
    TriggerClientEvent("array_hud:notify", id, title, message, type, 5000)
end

-- Here you can select your language. If it is not yet available, you can either add it yourself or open a ticket on our Discord.
Array.Locale = "en-US" -- de-DE or en-US
Array.Locales = {
    ["de-DE"] = {
        -- Ui & Notifys & Blip
        title = "TUNING",
        notify_title = "Tuning Script",
        help_notify = "Drücke E um das Tuning zu öffnen!",
        notenoughmoney_notify = "Du hast nicht genug Geld!",
        enoughmoney_notify = "Du hast dein Fahrzeug erfolgreich modifiziert",
        only_own_vehicle_notify = "Du kannst nur Fahrzeuge tunen, die dir gehören.",
        price_manipulation_detected = "versucht den Preis des Tunings zu manipulieren.",
        blip_name = "Tuning",
        webhook_title = "Fahrzeug Modifiziert",

        -- Tuning Categorys
        category_body = "Karosserie",
        category_performance = "Performance",
        category_colors = "Farben",
        category_text = "Tuning ohne Grenzen! Passe dein Fahrzeug an, wie du willst aber übertreib’s nicht mit den Ausgaben.",
        category_text2 =  "Möchtest du dein Auto vor dem Tunen Reparieren.",
        category_text3 = "Möchtest du den Kaufvorang beenden oder Abbrechen?",
        DefaultMods = "Serie",
        ModsVariants = "Variante %s",

        PayType1 = "Bar",
        PayType2 = "Bank",
        ShoppingCart = "Kaufen",
        BuyButton = "Kaufen",
        CancelButton = "Abbrechen",
        ReturnButton = "Zurück",
        RepairButton = "Reparieren",
        freecamtext = "Drücke "..Array.FreeCam.." zum freien Bewegen der Kamera.",
        Money = "€",

        -- Tuning Options
        spoiler = "Spoiler",
        front_bumper = "Frontstoßstange",
        rear_bumper = "Heckstoßstange",
        side_skirt = "Seitenschweller",
        exhaust = "Auspuff",
        frame = "Rahmen",
        grille = "Kühlergrill",
        hood = "Motorhaube",
        fender = "Kotflügel",
        right_fender = "Rechter Kotflügel",
        roof = "Dach",

        engine = "Motor",
        engine_1 = "Motor Stufe 1",
        engine_2 = "Motor Stufe 2",
        engine_3 = "Motor Stufe 3",
        engine_4 = "Motor Stufe 4",

        brakes = "Bremsen",
        street_brakes = "Straßenbremsen",
        sport_brakes = "Sportbremsen",
        race_brakes = "Rennbremsen",

        transmission = "Getriebe",
        sport_transmission = "Sportgetriebe",
        race_transmission = "Renngetriebe",
        pro_race_transmission = "Profi Renngetriebe",
        horn = "Hupe",
        suspension = "Fahrwerk",
        lowering_1 = "Tieferlegung 1",
        lowering_2 = "Tieferlegung 2",
        lowering_3 = "Tieferlegung 3",
        race_suspension = "Rennfahrwerk",

        armor = "Panzerung",
        armor_1 = "Panzerung 1",
        armor_2 = "Panzerung 2",
        armor_3 = "Panzerung 3",
        armor_4 = "Panzerung 4",
        armor_5 = "Panzerung 5",

        front_wheels = "Front Felgen",
        rear_wheels = "Hinterrad Felgen",
        plate_holder = "Kennzeichenhalter",
        plate_design = "Kennzeichendesign",
        interior_a = "Innenraum A",
        ornaments = "Ornamente",
        dashboard = "Armaturenbrett",
        instruments = "Instrumente",
        door_speakers = "Türlautsprecher",
        seats = "Sitze",
        steering_wheel = "Lenkrad",
        shift_lever = "Schalthebel",
        plaque_a = "Plakette A",
        speakers = "Lautsprecher",
        trunk = "Kofferraum",
        hydraulics = "Hydraulik",
        engine_block = "Motorblock",

        air_filter = "Luftfilter",
        strut_brace = "Domstreben",
        arch_cover = "Radlaufverkleidung",
        antennas = "Antennen",
        fuel_tank = "Tank",
        windows = "Fenster",
        light_bar = "Lichtleiste",

        turbo = "Turbo",

        normal = "Normal",
        metallic = "Metallic",
        pearl = "Pearl",
        matte = "Matte",
        metal = "Metal",
        chrome = "Chrome",

        primary_color = "Primärfarbe",
        secondary_color = "Sekundärfarbe",
        primary_paint_type = "Primär Extra",
        secondary_paint_type = "Sekundär Extra",

        custom_neon = "Neonfarbe",

        wheel_color = "Felgenfarbe",
        wheel_color_label = "Felgenfarbe",
        dashboard_color = "Dashboardfarbe",
        dashboard_color_label = "Dashboardfarbe",
        interior_color = "Innenraumfarbe",
        interior_color_label = "Innenraumfarbe",
        custom_xenon = "Xenonfarbe",
        xenon = "Xenon Scheinwerfer",

        pearlescent_color = "Perleffekt",

        extras = "Extras",
        extra = "Extra",
        wheels = "Felgen",
        wheel = "Felge",
        window_tint = "Scheibentönung",
        none = "Keine",
        pure_black = "Pure Black",
        dark_smoke = "Dark Smoke",
        light_smoke = "Light Smoke",
        limo = "Limo",
        green = "Grün",

        roof_livery = "Dachdesign",
        roof_livery_label = "Dachdesign",

        plate_style = "Kennzeichenfarbe",
        plate_blue_white_1 = "Blau auf Weiß 1",
        plate_yellow_black = "Gelb auf Schwarz",
        plate_yellow_blue = "Gelb auf Blau",
        plate_blue_white_2 = "Blau auf Weiß 2",
        plate_blue_white_3 = "Blau auf Weiß 3",
        north_yankton = "North Yankton",

        livery = "Lackierung",
        livery_label = "Lackierung",

        paint = "Lackart",

        neon_enabled = "Neonlichter",
        left = "Links",
        right = "Rechts",
        front = "Vorne",
        rear = "Hinten",

        tyre_smoke_color = "Reifenrauchfarbe",

        color_select = "Farbe auswählen",
        neon_color_select = "Neonfarbe auswählen",
        xenon_color_select = "Xenonfarbe auswählen",
        pearlescent_effect = "Perleffekt",
        stock = "Serie",
    },
     ["en-US"] = {
        -- Prints & Notifications & Blips
        title = "TUNING",
        notify_title = "Tuning Script",
        help_notify = "Press E to open tuning!",
        notenoughmoney_notify = "You do not have enough money!",
        enoughmoney_notify = "You have successfully modified your vehicle",
        only_own_vehicle_notify = "You can only tune vehicles you own.",
        price_manipulation_detected = "attempted to manipulate the tuning price",
        blip_name = "Tuning",
        webhook_title = "Vehicle Modified",

        -- Tuning Categories
        category_body = "Bodywork",
        category_performance = "Performance",
        category_colors = "Colors",
        category_text = "Unlimited tuning! Customize your vehicle however you like, but don't go overboard with your spending.",
        category_text2 = "Would you like to repair your vehicle before tuning?",
        category_text3 = "Would you like to complete the purchase or cancel?",
        DefaultMods = "Series",
        ModsVariants = "Variant %s",

        PayType1 = "Cash",
        PayType2 = "Bank",
        ShoppingCart = "Buy",
        BuyButton = "Buy",
        CancelButton = "Cancel",
        ReturnButton = "Back",
        RepairButton = "Repair",
        freecamtext = "Press "..Array.FreeCam.." to freely move the camera.",
        Money = "€",

        -- Tuning Options
        spoiler = "Spoiler",
        front_bumper = "Front Bumper",
        rear_bumper = "Rear Bumper",
        side_skirt = "Side Skirt",
        exhaust = "Exhaust",
        frame = "Frame",
        grille = "Grille",
        hood = "Hood",
        fender = "Fender",
        right_fender = "Right Fender",
        roof = "Roof",

        engine = "Engine",
        engine_1 = "Engine Level 1",
        engine_2 = "Engine Level 2",
        engine_3 = "Engine Level 3",
        engine_4 = "Engine Level 4",

        brakes = "Brakes",
        street_brakes = "Street Brakes",
        sport_brakes = "Sport Brakes",
        race_brakes = "Race Brakes",

        transmission = "Transmission",
        sport_transmission = "Sport Transmission",
        race_transmission = "Race Transmission",
        pro_race_transmission = "Pro Race Transmission",

        horn = "Horn",
        suspension = "Suspension",
        lowering_1 = "Lowering Level 1",
        lowering_2 = "Lowering Level 2",
        lowering_3 = "Lowering Level 3",
        race_suspension = "Race Suspension",

        armor = "Armor",
        armor_1 = "Armor Level 1",
        armor_2 = "Armor Level 2",
        armor_3 = "Armor Level 3",
        armor_4 = "Armor Level 4",
        armor_5 = "Armor Level 5",

        front_wheels = "Front Wheels",
        rear_wheels = "Rear Wheels",
        plate_holder = "Plate Holder",
        plate_design = "Plate Design",
        interior_a = "Interior A",
        ornaments = "Ornaments",
        dashboard = "Dashboard",
        instruments = "Instruments",
        door_speakers = "Door Speakers",
        seats = "Seats",
        steering_wheel = "Steering Wheel",
        shift_lever = "Shift Lever",
        plaque_a = "Plaque A",
        speakers = "Speakers",
        trunk = "Trunk",
        hydraulics = "Hydraulics",
        engine_block = "Engine Block",

        air_filter = "Air Filter",
        strut_brace = "Strut Brace",
        arch_cover = "Arch Cover",
        antennas = "Antennas",
        fuel_tank = "Fuel Tank",
        windows = "Windows",
        light_bar = "Light Bar",

        turbo = "Turbo",

        normal = "Normal",
        metallic = "Metallic",
        pearl = "Pearl",
        matte = "Matte",
        metal = "Metal",
        chrome = "Chrome",

        primary_color = "Primary Color",
        secondary_color = "Secondary Color",
        primary_paint_type = "Primary Paint Type",
        secondary_paint_type = "Secondary Paint Type",

        custom_neon = "Neon Color",

        wheel_color = "Wheel Color",
        wheel_color_label = "Wheel Color",
        dashboard_color = "Dashboard Color",
        dashboard_color_label = "Dashboard Color",
        interior_color = "Interior Color",
        interior_color_label = "Interior Color",
        custom_xenon = "Xenon Color",
        xenon = "Xenon Headlights",

        pearlescent_color = "Pearlescent Color",

        extras = "Extras",
        extra = "Extra",
        wheels = "Wheels",
        wheel = "Wheel",
        window_tint = "Window Tint",
        none = "None",
        pure_black = "Pure Black",
        dark_smoke = "Dark Smoke",
        light_smoke = "Light Smoke",
        limo = "Limo",
        green = "Green",

        roof_livery = "Roof Livery",
        roof_livery_label = "Roof Livery",

        plate_style = "License Plate Color",
        plate_blue_white_1 = "Blue on White 1",
        plate_yellow_black = "Yellow on Black",
        plate_yellow_blue = "Yellow on Blue",
        plate_blue_white_2 = "Blue on White 2",
        plate_blue_white_3 = "Blue on White 3",
        north_yankton = "North Yankton",

        livery = "Livery",
        livery_label = "Livery",

        paint = "Paint Type",

        neon_enabled = "Neon Lights",
        left = "Left",
        right = "Right",
        front = "Front",
        rear = "Rear",

        tyre_smoke_color = "Tire Smoke Color",

        color_select = "Select Color",
        neon_color_select = "Select Neon Color",
        xenon_color_select = "Select Xenon Color",
        pearlescent_effect = "Pearlescent Effect",
        stock = "Stock",
    },
}

Array.ModSettings = {
    ["spoiler"] = { enabled = true, price = 5000, img = "Spoiler.png", bone = "windscreen_r", offset = vector3(-1.0,-3.5,1.5) },
    ["front_bumper"] = { enabled = true, price = 5000, img = "FrontBumper.png", bone = "neon_f", offset = vector3(0.0,2.0,1.0) }, 
    ["rear_bumper"] = { enabled = true, price = 5000, img = "RearBumper.png", bone = "neon_b", offset = vector3(0.0,-2.0,1.0) }, 
    ["side_skirt"] = { enabled = true, price = 5000, img = "SideSkirt.png", bone = "neon_l", offset = vector3(-2.0,-1.0,0.3) }, 
    ["exhaust"] = { enabled = true, price = 5000, img = "Exhaust.png", bone = "exhaust", offset = vector3(-0.5,-2.0,0.0) }, 
    ["frame"] = { enabled = true, price = 5000, img = "RollCage.png", bone = "windscreen_r", offset = vector3(0.0,1.8,0.0) }, 
    ["grille"] = { enabled = true, price = 5000, img = "Grill.png", bone = "neon_f", offset = vector3(0.0,2.0,1.0) },
    ["hood"] = { enabled = true, price = 5000, img = "Hood.png", bone = "windscreen", offset = vector3(0.0,3.0,1.0) }, 
    ["fender"] = { enabled = true, price = 5000, img = "RightFender.png", bone = "wheel_lf", offset = vector3(-2.0,1.0,1.0) }, 
    ["right_fender"] = { enabled = true, price = 5000, img = "RightFender.png", bone = "wheel_rf", offset = vector3(2.0,1.0,1.0) },
    ["roof"] = { enabled = true, price = 5000, img = "Roof.png", bone = "interiorlight", offset = vector3(0.0,2.0,1.0) }, 
    ["primary_color"] = { enabled = true, price = 500, img = "rgb.png", bone = "dials", offset = vector3(-3.0,5.0,2.5) },
    ["secondary_color"] = { enabled = true, price = 500, img = "rgb.png", bone = "dials", offset = vector3(-3.0,5.0,2.5) },
    ["engine"] = { enabled = true, prices = {10000,25000,50000,100000}, img = "Engine.png", bone = "windscreen", offset = vector3(0.0,3.0,1.0) }, 
    ["engine_block"] = { enabled = true, price = 5000, img = "EngineBlock.png", bone = "windscreen", offset = vector3(0.0,3.0,1.0) },
    ["air_filter"] = { enabled = true, price = 5000, img = "AirFilter.png", bone = "windscreen", offset = vector3(0.0,3.0,1.0) }, 
    ["strut_brace"] = { enabled = true, price = 5000, img = "Strut.png", bone = "windscreen", offset = vector3(0.0,3.0,1.0) },
    ["turbo"] = { enabled = true, price = 50000, img = "Turbo.png", bone = "windscreen", offset = vector3(0.0,3.0,1.0) }, 
    ["brakes"] = { enabled = true, prices = {5000,10000,20000}, img = "Brake.png", bone = "wheel_lr", offset = vector3(-2.0,-1.2,0.0) }, 
    ["suspension"] = { enabled = true, prices = {5000,10000,15000,25000}, img = "suspension.png", bone = "wheel_lr", offset = vector3(-2.0,-1.2,0.0) }, 
    ["hydraulics"] = { enabled = true, price = 10000, img = "Hydraulic.png", bone = "wheel_lr", offset = vector3(-2.0,-1.2,0.0) },
    ["transmission"] = { enabled = true, prices = {7500,15000,30000}, img = "Transmission.png", bone = "windscreen", offset = vector3(0.0,3.0,1.0) }, 
    ["horn"] = { enabled = true, price = 1000, img = "Horn.png", bone = "neon_f", offset = vector3(0.0,2.0,1.0) }, 
    ["armor"] = { enabled = true, prices = {25000,50000,75000,100000,125000}, img = "Armor.png", bone = "windscreen", offset = vector3(0.0,1.0,0.2) }, 
    ["front_wheels"] = { enabled = true, price = 5000, img = "TyresFront.png", bone = "wheel_lf", offset = vector3(-2.0,1.0,0.0) },
    ["rear_wheels"] = { enabled = true, price = 5000, img = "TyresBack.png", bone = "wheel_lr", offset = vector3(-2.0,-1.2,0.0) },
    ["wheels"] = { enabled = true, price = 5000, img = "tyresoptions.png", bone = "wheel_lr", offset = vector3(-2.0,-1.2,0.0) },
    ["plate_holder"] = { enabled = true, price = 2500, img = "PlateHolder.png", bone = "neon_b", offset = vector3(0.0,-2.0,1.0) },
    ["plate_design"] = { enabled = true, price = 2500, img = "PlateHolder.png", bone = "neon_b", offset = vector3(0.0,-2.0,1.0) },
    ["plate_style"] = { enabled = true, prices = {500,500,500,500,500,1000}, img = "Plate.png", bone = "neon_b", offset = vector3(0.0,-2.0,1.0) },
    ["interior_a"] = { enabled = true, price = 2500, img = "Interior.png", bone = "windscreen", offset = vector3(0.0,1.0,0.2) },
    ["interior_b"] = { enabled = true, price = 2500, img = "Interior.png", bone = "windscreen", offset = vector3(0.0,1.0,0.2) },
    ["dashboard"] = { enabled = true, price = 2500, img = "Dashboard.png", bone = "windscreen", offset = vector3(0.2,-1.0,0.0) },
    ["dashboard_color"] = { enabled = true, price = 500, img = "color.png", bone = "windscreen", offset = vector3(0.2,-1.0,0.0) },
    ["instruments"] = { enabled = true, price = 2500, img = "Default.png", bone = "windscreen", offset = vector3(0.2,-1.0,0.0) },
    ["seats"] = { enabled = true, price = 2500, img = "Seats.png", bone = "windscreen", offset = vector3(0.0,1.0,0.2) },
    ["interior_color"] = { enabled = true, price = 500, img = "color.png", bone = "windscreen", offset = vector3(0.2,-1.0,0.0) },
    ["door_speakers"] = { enabled = true, price = 2500, img = "Speakers.png", bone = "door_pside_f", offset = vector3(-1.0,-1.0,0.2) },
    ["steering_wheel"] = { enabled = true, price = 2500, img = "SteeringWheel.png", bone = "dashglow", offset = vector3(0.0,-0.5,-0.1) },
    ["shift_lever"] = { enabled = true, price = 2500, img = "ShifterLeaver.png", bone = "dashglow", offset = vector3(0.0,-0.5,-0.1) },
    ["ornaments"] = { enabled = true, price = 2500, img = "Ornaments.png", bone = "dials", offset = vector3(-3.0,5.0,2.5) },
    ["plaque_a"] = { enabled = true, price = 2500, img = "Plaque.png", bone = "dials", offset = vector3(-3.0,5.0,2.5) },
    ["speakers"] = { enabled = true, price = 2500, img = "Speakers.png", bone = "windscreen", offset = vector3(0.0,1.0,0.2) },
    ["trunk"] = { enabled = true, price = 2500, img = "Trunk.png", bone = "neon_b", offset = vector3(0.0,-2.0,1.0) },
    ["arch_cover"] = { enabled = true, price = 5000, img = "ArchCover.png", bone = "headlight_l", offset = vector3(-1.0,2.0,0.0) },
    ["antennas"] = { enabled = true, price = 2500, img = "Aerial.png", bone = "headlight_l", offset = vector3(-1.0,2.0,0.0) },
    ["light_bar"] = { enabled = true, price = 5000, img = "Headlights.png", bone = "headlight_l", offset = vector3(-1.0,2.0,0.0) },
    ["fuel_tank"] = { enabled = true, price = 5000, img = "FuelTank.png", bone = "exhaust", offset = vector3(0.0,-1.5,0.5) },
    ["windows"] = { enabled = true, price = 2500, img = "Window.png", bone = "window_rf", offset = vector3(1.0,1.0,0.0) },
    ["window_tint"] = { enabled = true, prices = {1000,3000,3000,3000,5000,3000}, img = "Window.png", bone = "window_rf", offset = vector3(1.0,1.0,0.0) },
    ["custom_xenon"] = { enabled = true, price = 500, img = "rgb.png", bone = "headlight_l", offset = vector3(-1.0,2.0,0.0) },
    ["xenon"] = { enabled = true, price = 10000, img = "Headlights.png", bone = "headlight_l", offset = vector3(-1.0,2.0,0.0) },
    ["custom_neon"] = { enabled = true, price = 500, img = "rgb.png", bone = "neon_r", offset = vector3(2.0,0.0,1.0) },
    ["neon_enabled"] = { enabled = true, price = 500, img = "neons.png", bone = "neon_l", offset = vector3(-2.0,0.0,1.0) },
    ["primary_paint_type"] = { enabled = true, prices = {2000,3000,4000,5000,6000,7000}, img = "Pearlescent.png", bone = "dials", offset = vector3(-3.0,5.0,2.5) },
    ["secondary_paint_type"] = { enabled = true, prices = {2000,3000,4000,5000,6000,7000}, img = "Pearlescent.png", bone = "dials", offset = vector3(-3.0,5.0,2.5) },
    ["pearlescent_color"] = { enabled = true, price = 500, img = "color.png", bone = "dials", offset = vector3(-3.0,5.0,2.5) },
    ["wheel_color"] = { enabled = true, price = 500, img = "color.png", bone = "wheel_lr", offset = vector3(-2.0,-1.2,0.0) },
    ["paint"] = { enabled = true, price = 1000, img = "color.png", bone = "dials", offset = vector3(-3.0,5.0,2.5) },
    ["livery"] = { enabled = true, prices = {}, img = "Livery.png", bone = "dials", offset = vector3(-3.0,5.0,2.5) },
    ["roof_livery"] = { enabled = true, basePrice = 5000, img = "Livery.png", bone = "interiorlight", offset = vector3(0.0,2.0,1.0) },
    ["extras"] = { enabled = true, price = 500, img = "extra.png", bone = "dials", offset = vector3(-3.0,5.0,2.5) },
    ["tyre_smoke_color"] = { enabled = true, price = 500, img = "TyreSmoke.png", bone = "wheel_lr", offset = vector3(-2.0,-1.2,0.0) }
}
```

{% endcode %}
{% endtab %}

{% tab title="s\_config.lua" %}
{% code lineNumbers="true" expandable="true" %}

```lua
ArrayServer = {}

ArrayServer.Webhook = {
    enabled = true,
    Name = "Arry Scripts Tuning",
    Logo = "https://arrayscripts.com/images/Logo.gif",
    Url = "YOUR_WEBHOOK",
    Color = 5793266
}
```

{% endcode %}
{% endtab %}

{% tab title="color\_config.css" %}
{% code lineNumbers="true" expandable="true" %}

```css
:root {
    --primary: #893AE6;
    --primary-dark: #551D99;
    --primary-rgb: 137, 58, 230;

    --button-bg: radial-gradient(circle at center, var(--primary) 0%, #1c0f2b 100%);
    --button-shadow: inset 0 0 0.645833vw var(--primary);
    --primary-gradient: radial-gradient(
        50% 50% at 50% 50%,
        rgba(var(--primary-rgb), 0.2) 0%, 
        rgba(var(--primary-rgb), 0.01) 100% 
    );
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

## CSS Themes

{% tabs %}
{% tab title="red.css" %}
{% code lineNumbers="true" expandable="true" %}

```css
:root {
    --primary: #EF4444;
    --primary-dark: #B91C1C;
    --primary-rgb: 239, 68, 68;

    --button-bg: radial-gradient(circle at center, var(--primary) 0%, #2b0f0f 100%);
    --button-shadow: inset 0 0 0.645833vw var(--primary);
    --primary-gradient: radial-gradient(
        50% 50% at 50% 50%,
        rgba(var(--primary-rgb), 0.2) 0%,
        rgba(var(--primary-rgb), 0.01) 100%
    );
}
```

{% endcode %}
{% endtab %}

{% tab title="blue.css" %}
{% code lineNumbers="true" expandable="true" %}

```css
:root {
    --primary: #3B82F6;
    --primary-dark: #1D4ED8;
    --primary-rgb: 59, 130, 246;

    --button-bg: radial-gradient(circle at center, var(--primary) 0%, #0f172b 100%);
    --button-shadow: inset 0 0 0.645833vw var(--primary);
    --primary-gradient: radial-gradient(
        50% 50% at 50% 50%,
        rgba(var(--primary-rgb), 0.2) 0%,
        rgba(var(--primary-rgb), 0.01) 100%
    );
}
```

{% endcode %}
{% endtab %}

{% tab title="yellow\.css" %}
{% code lineNumbers="true" expandable="true" %}

```css
:root {
    --primary: #FACC15;
    --primary-dark: #CA8A04;
    --primary-rgb: 250, 204, 21;

    --button-bg: radial-gradient(circle at center, var(--primary) 0%, #2b260f 100%);
    --button-shadow: inset 0 0 0.645833vw var(--primary);
    --primary-gradient: radial-gradient(
        50% 50% at 50% 50%,
        rgba(var(--primary-rgb), 0.2) 0%,
        rgba(var(--primary-rgb), 0.01) 100%
    );
}
```

{% endcode %}
{% endtab %}

{% tab title="green.css" %}
{% code lineNumbers="true" expandable="true" %}

```css
:root {
    --primary: #22C55E;
    --primary-dark: #15803D;
    --primary-rgb: 34, 197, 94;

    --button-bg: radial-gradient(circle at center, var(--primary) 0%, #0f2b19 100%);
    --button-shadow: inset 0 0 0.645833vw var(--primary);
    --primary-gradient: radial-gradient(
        50% 50% at 50% 50%,
        rgba(var(--primary-rgb), 0.2) 0%,
        rgba(var(--primary-rgb), 0.01) 100%
    );
}
```

{% endcode %}
{% endtab %}

{% tab title="orange.css" %}
{% code lineNumbers="true" expandable="true" %}

```css
:root {
    --primary: #F97316;
    --primary-dark: #C2410C;
    --primary-rgb: 249, 115, 22;

    --button-bg: radial-gradient(circle at center, var(--primary) 0%, #2b180f 100%);
    --button-shadow: inset 0 0 0.645833vw var(--primary);
    --primary-gradient: radial-gradient(
        50% 50% at 50% 50%,
        rgba(var(--primary-rgb), 0.2) 0%,
        rgba(var(--primary-rgb), 0.01) 100%
    );
}
```

{% endcode %}
{% endtab %}
{% endtabs %}