# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://saka-store.gitbook.io/main/resources/loading-screen/configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.