---
title: ThemerrDB
layout: page
full-width: true
after-content:
  - donate.html
  - support.html
  - player-navbar.html

# TODO: Add `cover-img` (supports multiple)

ext-js:
  - href: "https://cdn.jsdelivr.net/npm/@lizardbyte/shared-web@2026.726.204939/dist/levenshtein-distance.js"
  - href: "https://cdn.jsdelivr.net/npm/@lizardbyte/shared-web@2026.726.204939/dist/ranking-sorter.js"
js:
  - /ThemerrDB/assets/js/item_loader.js
  - /ThemerrDB/assets/js/yt.js
---

<script>
globalThis.THEMERRDB_CONFIG = {
  base_path: "{{ site.baseurl }}"
};
</script>

<div class="container px-auto my-5">
    <div class="col-lg-12 mx-auto" id="themerr-container" style="min-width: 335px">

        <!-- Search section-->
        <section class="py-5 offset-anchor" id="Search">
            <div class="container mb-5">
                <form id="searchForm">
                    <div class="form-group row g-3 justify-content-center">
                        <div class="col-12 col-md-4 col-lg-3">
                            <select class="form-select rounded-0" aria-label="Search Type" id="search_type">
                                <option value="0">Games</option>
                                <option value="1">Game Collections</option>
                                <option value="2">Game Franchises</option>
                                <option selected value="3">Movies</option>
                                <option value="4">Movie Collections</option>
                                <option value="5">TV Shows</option>
                            </select>
                        </div>
                        <div class="col-12 col-md-6 col-lg-5">
                            <input type="text" class="form-control rounded-0" placeholder="Search" id="search_term"
                                   aria-label="Search">
                        </div>
                        <button type="button" class="btn btn-warning col-12 col-md-auto rounded-0" onclick="run_search()">
                            <i class="fa-fw fas fa-search"></i>Search</button>
                    </div>
                </form>
            </div>
            <div id="search-container"></div>
        </section>

        <!-- Theme Types section-->
        <section class="py-5 offset-anchor" id="Theme Types">
            <div class="row gx-5 justify-content-center">
                <div class="col-lg-8 col-xl-6">
                    <div class="text-center">
                        <h2 class="fw-bolder">Theme Types</h2>
                    </div>
                </div>
            </div>
            <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4" id="theme-types-container">
                <div class="col">
                    <button type="button" class="card h-100 shadow border-0 rounded-0 w-100 text-start theme-type-card"
                            data-theme-type="games" aria-pressed="false">
                        <span class="card-body p-4">
                            <span class="d-flex align-items-center gap-3">
                                <i class="fa-fw fas fa-gamepad fa-2x text-warning"></i>
                                <span class="h5 card-title mb-0 fw-bolder">Games</span>
                            </span>
                        </span>
                    </button>
                </div>
                <div class="col">
                    <button type="button" class="card h-100 shadow border-0 rounded-0 w-100 text-start theme-type-card"
                            data-theme-type="game_collections" aria-pressed="false">
                        <span class="card-body p-4">
                            <span class="d-flex align-items-center gap-3">
                                <span class="position-relative d-inline-flex align-items-center justify-content-center text-warning"
                                      style="width: 3rem; height: 3rem;" aria-hidden="true">
                                    <i class="fas fa-gamepad fa-2x"></i>
                                    <span class="position-absolute bottom-0 end-0 d-inline-flex align-items-center justify-content-center rounded-circle bg-dark border border-warning"
                                          style="width: 1.25rem; height: 1.25rem;">
                                        <i class="fas fa-layer-group" style="font-size: 0.65rem;"></i>
                                    </span>
                                </span>
                                <span class="h5 card-title mb-0 fw-bolder">Game Collections</span>
                            </span>
                        </span>
                    </button>
                </div>
                <div class="col">
                    <button type="button" class="card h-100 shadow border-0 rounded-0 w-100 text-start theme-type-card"
                            data-theme-type="game_franchises" aria-pressed="false">
                        <span class="card-body p-4">
                            <span class="d-flex align-items-center gap-3">
                                <span class="position-relative d-inline-flex align-items-center justify-content-center text-warning"
                                      style="width: 3rem; height: 3rem;" aria-hidden="true">
                                    <i class="fas fa-gamepad fa-2x"></i>
                                    <span class="position-absolute bottom-0 end-0 d-inline-flex align-items-center justify-content-center rounded-circle bg-dark border border-warning"
                                          style="width: 1.25rem; height: 1.25rem;">
                                        <i class="fas fa-code-branch" style="font-size: 0.7rem;"></i>
                                    </span>
                                </span>
                                <span class="h5 card-title mb-0 fw-bolder">Game Franchises</span>
                            </span>
                        </span>
                    </button>
                </div>
                <div class="col">
                    <button type="button" class="card h-100 shadow border-0 rounded-0 w-100 text-start theme-type-card"
                            data-theme-type="movies" aria-pressed="false">
                        <span class="card-body p-4">
                            <span class="d-flex align-items-center gap-3">
                                <i class="fa-fw fas fa-film fa-2x text-warning"></i>
                                <span class="h5 card-title mb-0 fw-bolder">Movies</span>
                            </span>
                        </span>
                    </button>
                </div>
                <div class="col">
                    <button type="button" class="card h-100 shadow border-0 rounded-0 w-100 text-start theme-type-card"
                            data-theme-type="movie_collections" aria-pressed="false">
                        <span class="card-body p-4">
                            <span class="d-flex align-items-center gap-3">
                                <i class="fa-fw fas fa-clapperboard fa-2x text-warning"></i>
                                <span class="h5 card-title mb-0 fw-bolder">Movie Collections</span>
                            </span>
                        </span>
                    </button>
                </div>
                <div class="col">
                    <button type="button" class="card h-100 shadow border-0 rounded-0 w-100 text-start theme-type-card"
                            data-theme-type="tv_shows" aria-pressed="false">
                        <span class="card-body p-4">
                            <span class="d-flex align-items-center gap-3">
                                <i class="fa-fw fas fa-tv fa-2x text-warning"></i>
                                <span class="h5 card-title mb-0 fw-bolder">TV Shows</span>
                            </span>
                        </span>
                    </button>
                </div>
            </div>
        </section>

        <!-- Games section-->
        <section class="py-5 offset-anchor d-none theme-item-section" id="Games">
            <div class="row gx-5 justify-content-center">
                <div class="col-lg-8 col-xl-6">
                    <div class="text-center">
                        <h2 class="fw-bolder">Games</h2>
                    </div>
                </div>
            </div>
            <div id="games-container"></div>
        </section>

        <!-- Game Collections section-->
        <section class="py-5 offset-anchor d-none theme-item-section" id="Game Collections">
            <div class="row gx-5 justify-content-center">
                <div class="col-lg-8 col-xl-6">
                    <div class="text-center">
                        <h2 class="fw-bolder">Game Collections</h2>
                    </div>
                </div>
            </div>
            <div id="game-collections-container"></div>
        </section>

        <!-- Game Franchises section-->
        <section class="py-5 offset-anchor d-none theme-item-section" id="Game Franchises">
            <div class="row gx-5 justify-content-center">
                <div class="col-lg-8 col-xl-6">
                    <div class="text-center">
                        <h2 class="fw-bolder">Game Franchises</h2>
                    </div>
                </div>
            </div>
            <div id="game-franchises-container"></div>
        </section>

        <!-- Movies section-->
        <section class="py-5 offset-anchor d-none theme-item-section" id="Movies">
            <div class="row gx-5 justify-content-center">
                <div class="col-lg-8 col-xl-6">
                    <div class="text-center">
                        <h2 class="fw-bolder">Movies</h2>
                    </div>
                </div>
            </div>
            <div id="movies-container"></div>
        </section>

        <!-- Movie Collections section-->
        <section class="py-5 offset-anchor d-none theme-item-section" id="Movie Collections">
            <div class="row gx-5 justify-content-center">
                <div class="col-lg-8 col-xl-6">
                    <div class="text-center">
                        <h2 class="fw-bolder">Movie Collections</h2>
                    </div>
                </div>
            </div>
            <div id="movie-collections-container"></div>
        </section>

        <!-- TV Shows section-->
        <section class="py-5 offset-anchor d-none theme-item-section" id="TV Shows">
            <div class="row gx-5 justify-content-center">
                <div class="col-lg-8 col-xl-6">
                    <div class="text-center">
                        <h2 class="fw-bolder">TV Shows</h2>
                    </div>
                </div>
            </div>
            <div id="tv-shows-container"></div>
        </section>

    </div>
</div>