> For the complete documentation index, see [llms.txt](https://saka-store.gitbook.io/main/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://saka-store.gitbook.io/main/resources/loading-screen/configuration.md).

# Configuration

The **saka-loadingscreen** script is highly customizable through two configuration files:

* config/config.lua – general behavior settings
* config/theme.lua – theme, styling, and animations

Let’s dive into each section.

***

## Config File (config.lua)

This file controls the basic functionality of the loading screen.

### Locale

Defines the language used for UI text.

```lua
Config.Locale = 'en'
```

Supported: 'en', 'de', 'fr', 'es', 'it', 'pt', 'ar'.

***

### Server Branding

{% code overflow="wrap" %}

```lua
Config.ServerName = 'SAKA <span>ROLEPLAY</span>'
Config.ServerLogo = 'https://r2.fivemanage.com/oykPExvjfl8eEFverR8nZ/images/sakaIcon.png'
```

{% endcode %}

**ServerName:** The name shown on the loading screen header. (HTML tags allowed for styling)

**ServerLogo:** URL link or local file path for the logo image.

{% hint style="info" %}
**Tips for Logo**

Recommended format: .png with transparent background.

Recommended size: 512x512px or smaller for best performance.
{% endhint %}

***

### Default Settings

Controls the behavior of the loading experience.

{% code overflow="wrap" %}

```lua
Config.DefaultSettings = {
    ["musicPlayer"] = true,
    ["muteMusicAtStart"] = false,
    ["hideSocialLinks"] = false,
    ["hideExceptLoadingBar"] = false,
    ["startGameAfterLoading"] = false,
}
```

{% endcode %}

* musicPlayer: Enables the built-in music player.
* muteMusicAtStart: Starts music muted.
* hideSocialLinks: Hides social links section on the loading screen.
* hideExceptLoadingBar: Hides everything except the loading bar.
* startGameAfterLoading: Automatically starts the game when loading is complete.

***

### Background Settings

Configure either a video background or an album slideshow.

{% code overflow="wrap" %}

```lua
Config.BackgroundSettings = {
    type = 'video', -- 'video' or 'album'
    
    video = {
        url = 'https://r2.fivemanage.com/oykPExvjfl8eEFverR8nZ/GrandTheftAutoVITrailer1.mp4',
        volume = 0.2,
        mute = true,
        loop = false,
    },
    
    album = {
        {
            source = 'https://r2.fivemanage.com/oykPExvjfl8eEFverR8nZ/image/bg.png',
        },
        -- More images can be added here
    }
}
```

{% endcode %}

* type: Choose between video or album.
* video.url: Path to the video file (.webm recommended for local, or direct URL).
* video.volume: Volume level for background video sound.
* video.mute: Mute/unmute the video audio.
* video.loop: Whether the video should loop automatically.
* album.source: Array of images if you use the album slideshow option.

***

### Music List

Manage the background music playlist.

```lua
Config.MusicList = {
    {
        Artist = "Anoraak",
        Name = "Gang",
        Cover = "https://r2.fivemanage.com/oykPExvjfl8eEFverR8nZ/images/anoraak.png",
        Link = "https://r2.fivemanage.com/oykPExvjfl8eEFverR8nZ/audio/anoraak.mp3",
    }
}
```

* Artist: Name of the artist displayed on the UI.
* Name: Track title.
* Cover: Album art shown next to the music player.
* Link: Direct link to the .ogg or .mp3 file.

You can add as many songs as you want by adding more entries to the MusicList.

***

## Theme File (theme.lua)

You can select and customize the following pre-defined themes:

* Light – Bright and clean theme
* Dark – Dark and high-contrast visuals

### General Appearance

Defines the main look & feel (text colors, backgrounds, progress bars, etc.)

Example

{% code overflow="wrap" %}

```lua
general = {
    textColor = "#FFFFFF",
    background = "#00000003",
    progressBar = "#FFFFFF",
    progressBarBackground = "#FFFFFF1A",
    musicPlayerBackground = "#FFFFFF24",
    ...
}
```

{% endcode %}

* textColor: Main text color
* background: Base background color
* progressBar: Color of the loading bar
* musicPlayerBackground: Background color of the music player

***

### Shortcut Keys (Keyboard View)

Controls the design of keyboard shortcut hints and key prompts.

{% code overflow="wrap" %}

```lua
shortcuts = {
    default = "#FFFFFF5C",
    active = "#FFFFFF",
    keyBackground = "#FFFFFF",
    boxShadow = "3px 3px 0px 0px rgba(191, 191, 191, 0.41)",
    ...
}
```

{% endcode %}

* default: Inactive shortcut color
* active: Active shortcut color
* keyBackground: Background color for key prompts
* boxShadow: Outer and inset shadow styling

***

### Settings Panel

Controls the look of the settings page or music options panel.

```lua
settings = {
    boxBackground = "#FFFFFF33",
    switchBackground = "#FFFFFF1C",
    switchCircle = "#FFFFFF",
    activeSwitchBackground = "#FFFFFF66",
    themeBackground = "#FFFFFF1C",
    ...
}
```

* boxBackground: Background color for settings sections
* switchBackground: Background color of switches (on/off buttons)
* themeBackground: Overall settings panel background

***

{% hint style="warning" %}
**Important Notes**

* Colors must be valid hex codes (e.g., #FFFFFF) or rgba formats (e.g., rgba(0,0,0,0.5)).
* Shadows must follow valid CSS box-shadow syntax.
* You can freely create your own theme by duplicating an existing one (light, dark) and editing the colors.
  {% endhint %}