27 lines
No EOL
33 KiB
HTML
27 lines
No EOL
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Themes | Profectus</title>
|
|
<meta name="description" content="A game engine that grows with you.">
|
|
<link rel="stylesheet" href="/assets/style.e3402314.css">
|
|
<link rel="modulepreload" href="/assets/app.cf939732.js">
|
|
<link rel="modulepreload" href="/assets/guide_themes.md.af50ff71.lean.js">
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,600;1,400">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
<link rel="manifest" href="/site.webmanifest">
|
|
<script defer="true" data-domain="moddingtree.com" src="https://plausible.io/js/plausible.js"></script>
|
|
<meta name="og:description" content="A game engine that grows with you">
|
|
<meta name="og:image" content="/Logo.png">
|
|
</head>
|
|
<body>
|
|
<div id="app"><div class="Layout" data-v-6b5fd0a9><!--[--><!--]--><!--[--><span tabindex="-1" data-v-45f6ae50></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-45f6ae50> Skip to content </a><!--]--><!----><header class="VPNav" data-v-6b5fd0a9 data-v-0e356168><div class="VPNavBar has-sidebar" data-v-0e356168 data-v-8856f192><div class="container" data-v-8856f192><div class="VPNavBarTitle has-sidebar" data-v-8856f192 data-v-6a6f7ff6><a class="title" href="/" data-v-6a6f7ff6><!--[--><img class="VPImage logo" src="/favicon.svg" data-v-73ae1788><!--]--><!--[-->Profectus<!--]--></a></div><div class="content" data-v-8856f192><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-8856f192 data-v-a30758ee><span id="main-nav-aria-label" class="visually-hidden" data-v-a30758ee>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/guide/" data-v-a30758ee data-v-8fba5fa8 data-v-5704c677><!--[-->Guide<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/api/overview.html" data-v-a30758ee data-v-8fba5fa8 data-v-5704c677><!--[-->API<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://forums.moddingtree.com" target="_blank" rel="noopener noreferrer" data-v-a30758ee data-v-8fba5fa8 data-v-5704c677><!--[-->Forums<!--]--><!----></a><!--]--><!--]--></nav><!----><!----><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-8856f192 data-v-0ae890f7 data-v-4dcbaf3a><!--[--><a class="VPSocialLink" href="https://discord.gg/F3xveHV" title="discord" target="_blank" rel="noopener noreferrer" data-v-4dcbaf3a data-v-48c45ef6><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-48c45ef6><path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z"></path></svg><span class="visually-hidden" data-v-48c45ef6>discord</span></a><a class="VPSocialLink" href="https://github.com/profectus-engine/Profectus" title="github" target="_blank" rel="noopener noreferrer" data-v-4dcbaf3a data-v-48c45ef6><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-48c45ef6><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden" data-v-48c45ef6>github</span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-8856f192 data-v-0562f5c0 data-v-8dccea88><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-8dccea88><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-8dccea88><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-8dccea88><div class="VPMenu" data-v-8dccea88 data-v-e73581a2><!----><!--[--><!--[--><!----><!----><div class="group" data-v-0562f5c0><div class="item social-links" data-v-0562f5c0><div class="VPSocialLinks social-links-list" data-v-0562f5c0 data-v-4dcbaf3a><!--[--><a class="VPSocialLink" href="https://discord.gg/F3xveHV" title="discord" target="_blank" rel="noopener noreferrer" data-v-4dcbaf3a data-v-48c45ef6><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-48c45ef6><path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z"></path></svg><span class="visually-hidden" data-v-48c45ef6>discord</span></a><a class="VPSocialLink" href="https://github.com/profectus-engine/Profectus" title="github" target="_blank" rel="noopener noreferrer" data-v-4dcbaf3a data-v-48c45ef6><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-48c45ef6><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden" data-v-48c45ef6>github</span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-8856f192 data-v-6f008456><span class="container" data-v-6f008456><span class="top" data-v-6f008456></span><span class="middle" data-v-6f008456></span><span class="bottom" data-v-6f008456></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-6b5fd0a9 data-v-92b0f14a><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-92b0f14a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-92b0f14a><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-92b0f14a>Menu</span></button><a class="top-link" href="#" data-v-92b0f14a> Return to top </a></div><aside class="VPSidebar" data-v-6b5fd0a9 data-v-55e4c7db><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-55e4c7db><span class="visually-hidden" id="sidebar-aria-label" data-v-55e4c7db> Sidebar Navigation </span><!--[--><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>Getting Started</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/guide/" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Introduction</span><!--]--><!----></a><a class="VPLink link" href="/guide/setup.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Setting Up</span><!--]--><!----></a><a class="VPLink link" href="/guide/updating.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Updating Profectus</span><!--]--><!----></a><a class="VPLink link" href="/guide/examples.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Example Projects</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>Creating Your Project</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/guide/project-info.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Project Info</span><!--]--><!----></a><a class="VPLink link" href="/guide/project-entry.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Project Entry</span><!--]--><!----></a><a class="VPLink link" href="/guide/changelog.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Changelog</span><!--]--><!----></a><a class="VPLink link active" href="/guide/themes.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Themes</span><!--]--><!----></a><a class="VPLink link" href="/guide/utils.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Utilities</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>Important Concepts</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/guide/layers.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Layers</span><!--]--><!----></a><a class="VPLink link" href="/guide/features.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Features</span><!--]--><!----></a><a class="VPLink link" href="/guide/coercable.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Coercable Components</span><!--]--><!----></a><a class="VPLink link" href="/guide/reactivity.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Reactivity</span><!--]--><!----></a><a class="VPLink link" href="/guide/persistence.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Persistence</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>Advanced Concepts</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/guide/creating-features.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Creating Features</span><!--]--><!----></a><a class="VPLink link" href="/guide/dynamic-layers.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Dynamic Layers</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-6b5fd0a9 data-v-a4c57a06><div class="VPDoc has-sidebar" data-v-a4c57a06 data-v-79ca2460><div class="container" data-v-79ca2460><div class="aside" data-v-79ca2460><div class="aside-curtain" data-v-79ca2460></div><div class="aside-container" data-v-79ca2460><div class="aside-content" data-v-79ca2460><div class="VPDocAside" data-v-79ca2460 data-v-779d834d><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-779d834d data-v-51e5a8ce><div class="content" data-v-51e5a8ce><div class="outline-marker" data-v-51e5a8ce></div><div class="outline-title" data-v-51e5a8ce>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-51e5a8ce><span class="visually-hidden" id="doc-outline-aria-label" data-v-51e5a8ce> Table of Contents for current page </span><ul class="root" data-v-51e5a8ce><!--[--><li style="" data-v-51e5a8ce><a class="outline-link" href="#modifying-themes" data-v-51e5a8ce>Modifying Themes</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#theme-options" data-v-51e5a8ce>Theme Options</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-779d834d></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-79ca2460><div class="content-container" data-v-79ca2460><!--[--><!--]--><main class="main" data-v-79ca2460><div style="position:relative;" class="vp-doc _guide_themes" data-v-79ca2460><div><h1 id="themes" tabindex="-1">Themes <a class="header-anchor" href="#themes" aria-hidden="true">#</a></h1><p>Themes are objects that change how the project's interface should look. This is done mostly by changing the values of various CSS variables. You can look at the existing themes as a reference for the kind of values these CSS variables expect. They can also set various theme options that change how parts of the screen are laid out, which are described <a href="#theme-options">below</a>.</p><p>They are stored in <code>/src/data/themes.ts</code>.</p><h2 id="modifying-themes" tabindex="-1">Modifying Themes <a class="header-anchor" href="#modifying-themes" aria-hidden="true">#</a></h2><p>You can add a theme by adding a property to the <code>Themes</code> enum and then including the theme in the exported object. It's recommended to use the spread operator if you'd like to have a theme look like another, but override specific options / CSS variables.</p><p>Themes added in this way will be automatically included in the Themes dropdown in the Options tab. Removing themes from the enum and exported object will similarly hide them from the dropdown.</p><p>If you'd like to change which theme is the default, you may modify the initial player settings object in the <code>/src/game/settings.ts</code> file. Keep in mind you'll also want to change it in the <code>hardResetSettings</code> function in the same file.</p><h2 id="theme-options" tabindex="-1">Theme Options <a class="header-anchor" href="#theme-options" aria-hidden="true">#</a></h2><h3 id="floatingtabs" tabindex="-1">floatingTabs <a class="header-anchor" href="#floatingtabs" aria-hidden="true">#</a></h3><ul><li>Type: <code>boolean</code></li></ul><p>Toggles whether to display tab buttons in a tab list, similar to how a browser displays tabs; or to display them as floating buttons, similar to how TMT displays buttons.</p><h3 id="mergeadjacent" tabindex="-1">mergeAdjacent <a class="header-anchor" href="#mergeadjacent" aria-hidden="true">#</a></h3><ul><li>Type: <code>boolean</code></li></ul><p>If true, elements in a row or column will have their margins removed and border radiuses set to 0 between elements. This will cause the elements to appear as segments in a single object.</p><p>Currently, this can only merge in a single dimension. Rows of columns or columns of rows will not merge into a single rectangular object.</p></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><div class="edit-link" data-v-04568844><a class="VPLink link edit-link-button" href="https://github.com/profectus-engine/profectus-docs/edit/main/docs/guide/themes.md" target="_blank" rel="noopener noreferrer" data-v-04568844 data-v-5704c677><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" data-v-04568844><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--><!----></a></div><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2022-07-15T02:59:46.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><a class="pager-link prev" href="/guide/changelog.html" data-v-04568844><span class="desc" data-v-04568844>Previous page</span><span class="title" data-v-04568844>Changelog</span></a></div><div class="has-prev pager" data-v-04568844><a class="pager-link next" href="/guide/utils.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Utilities</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
|
|
<script>__VP_HASH_MAP__ = JSON.parse("{\"api_classes_lib_break_eternity.default.md\":\"33aecaab\",\"api_components_contextcomponent.md\":\"4fa7c0a3\",\"api_components_infocomponent.md\":\"d6c04ad3\",\"api_components_layercomponent.md\":\"d5c7e9fb\",\"api_components_marknodecomponent.md\":\"f7aee25b\",\"api_components_modalcomponent.md\":\"2268a3e0\",\"api_components_nodecomponent.md\":\"f9ccbe21\",\"api_components_savecomponent.md\":\"05a7aa38\",\"api_components_fields_dangerbuttoncomponent.md\":\"222ea7f6\",\"api_components_fields_feedbackbuttoncomponent.md\":\"5443218e\",\"api_components_fields_selectcomponent.md\":\"bf5783bc\",\"api_components_fields_slidercomponent.md\":\"66a35ab5\",\"api_components_fields_textcomponent.md\":\"64f2b5e6\",\"api_components_fields_togglecomponent.md\":\"ce0ea3cd\",\"api_components_layout_collapsiblecomponent.md\":\"6d34f6a3\",\"api_components_layout_columncomponent.md\":\"a23b65cf\",\"api_components_layout_rowcomponent.md\":\"dfa7d063\",\"api_components_layout_spacercomponent.md\":\"82dfe511\",\"api_components_layout_stickycomponent.md\":\"148c974e\",\"api_components_layout_verticalrulecomponent.md\":\"0a9ba68c\",\"api_components_math_floorcomponent.md\":\"f61c3cba\",\"api_components_math_sqrtcomponent.md\":\"f1739731\",\"api_enums_data_themes.themes.md\":\"e858827c\",\"api_enums_features_boards_board.progressdisplay.md\":\"c61067e5\",\"api_enums_features_boards_board.shape.md\":\"d6916bb4\",\"api_enums_features_feature.visibility.md\":\"ae747b41\",\"api_enums_features_milestones_milestone.milestonedisplay.md\":\"095aa24c\",\"api_enums_util_common.direction.md\":\"5a6f319c\",\"api_interfaces_data_common.layertreenodeoptions.md\":\"3d2e2417\",\"api_interfaces_data_common.resetbuttonoptions.md\":\"e082eff4\",\"api_interfaces_data_themes.theme.md\":\"7d0cf52f\",\"api_interfaces_data_themes.themevars.md\":\"ca366e89\",\"api_interfaces_features_achievements_achievement.achievementoptions.md\":\"4f839c3e\",\"api_interfaces_features_achievements_achievement.baseachievement.md\":\"147584b2\",\"api_interfaces_features_bars_bar.baroptions.md\":\"b036ae8d\",\"api_interfaces_features_bars_bar.basebar.md\":\"aef2d6d5\",\"api_interfaces_features_boards_board.baseboard.md\":\"0180f57b\",\"api_interfaces_features_boards_board.baseboardnodeaction.md\":\"51bb712e\",\"api_interfaces_features_boards_board.basenodetype.md\":\"552d5564\",\"api_interfaces_features_boards_board.boardnode.md\":\"335daa8f\",\"api_interfaces_features_boards_board.boardnodeactionoptions.md\":\"26e26ee4\",\"api_interfaces_features_boards_board.boardnodelink.md\":\"230c6f00\",\"api_interfaces_features_boards_board.boardoptions.md\":\"abb90f4e\",\"api_interfaces_features_boards_board.nodelabel.md\":\"7e38632c\",\"api_interfaces_features_boards_board.nodetypeoptions.md\":\"cfccdb1d\",\"api_interfaces_features_buyable.basebuyable.md\":\"40da1e4f\",\"api_interfaces_features_buyable.buyableoptions.md\":\"34250161\",\"api_interfaces_features_challenges_challenge.basechallenge.md\":\"cf1e5915\",\"api_interfaces_features_challenges_challenge.challengeoptions.md\":\"70e9bb71\",\"api_interfaces_features_clickables_clickable.baseclickable.md\":\"51276e22\",\"api_interfaces_features_clickables_clickable.clickableoptions.md\":\"7b3936e6\",\"api_interfaces_features_conversion.baseconversion.md\":\"9f84deb6\",\"api_interfaces_features_conversion.conversionoptions.md\":\"73ac9253\",\"api_interfaces_features_conversion.scalingfunction.md\":\"811381f2\",\"api_interfaces_features_grids_grid.basegrid.md\":\"8892a5af\",\"api_interfaces_features_grids_grid.gridcell.md\":\"1b93694a\",\"api_interfaces_features_grids_grid.gridoptions.md\":\"9c8dc29d\",\"api_interfaces_features_hotkey.basehotkey.md\":\"64839d53\",\"api_interfaces_features_hotkey.hotkeyoptions.md\":\"9dac97d9\",\"api_interfaces_features_infoboxes_infobox.baseinfobox.md\":\"e248612d\",\"api_interfaces_features_infoboxes_infobox.infoboxoptions.md\":\"94dbd995\",\"api_interfaces_features_links_links.baselinks.md\":\"5f968863\",\"api_interfaces_features_links_links.link.md\":\"d2462a72\",\"api_interfaces_features_links_links.linksoptions.md\":\"d290d4a3\",\"api_interfaces_features_milestones_milestone.basemilestone.md\":\"0df60149\",\"api_interfaces_features_milestones_milestone.milestoneoptions.md\":\"d65a7c12\",\"api_interfaces_features_particles_particles.baseparticles.md\":\"26e1b86c\",\"api_interfaces_features_particles_particles.particlesoptions.md\":\"709fe765\",\"api_interfaces_features_reset.basereset.md\":\"f021a537\",\"api_interfaces_features_reset.resetoptions.md\":\"7c131c25\",\"api_interfaces_features_resources_resource.resource.md\":\"5bfd1489\",\"api_interfaces_features_tabs_tab.basetab.md\":\"c972be8d\",\"api_interfaces_features_tabs_tab.taboptions.md\":\"01d0b257\",\"api_interfaces_features_tabs_tabfamily.basetabbutton.md\":\"0f0dbf00\",\"api_interfaces_features_tabs_tabfamily.basetabfamily.md\":\"aa15696d\",\"api_interfaces_features_tabs_tabfamily.tabbuttonoptions.md\":\"22f27974\",\"api_interfaces_features_tabs_tabfamily.tabfamilyoptions.md\":\"38959b4a\",\"api_interfaces_features_tooltips_tooltip.basetooltip.md\":\"2144be49\",\"api_interfaces_features_tooltips_tooltip.tooltipoptions.md\":\"38e2d7b1\",\"api_interfaces_features_trees_tree.basetree.md\":\"c08d4cbd\",\"api_interfaces_features_trees_tree.basetreenode.md\":\"e344106e\",\"api_interfaces_features_trees_tree.treebranch.md\":\"f6050cee\",\"api_interfaces_features_trees_tree.treenodeoptions.md\":\"2ddd39f4\",\"api_interfaces_features_trees_tree.treeoptions.md\":\"e23887c2\",\"api_interfaces_features_upgrades_upgrade.baseupgrade.md\":\"debee961\",\"api_interfaces_features_upgrades_upgrade.upgradeoptions.md\":\"35532608\",\"api_interfaces_game_events.globalevents.md\":\"8fe0fd62\",\"api_interfaces_game_layers.baselayer.md\":\"ff6ce023\",\"api_interfaces_game_layers.featurenode.md\":\"8a7ca217\",\"api_interfaces_game_layers.layerevents.md\":\"1e9948cb\",\"api_interfaces_game_layers.layeroptions.md\":\"76dce8e4\",\"api_interfaces_game_layers.position.md\":\"c23fe9f4\",\"api_interfaces_game_modifiers.modifier.md\":\"03e755ce\",\"api_interfaces_game_player.playerdata.md\":\"b6b9843a\",\"api_interfaces_game_settings.settings.md\":\"cb5c2468\",\"api_interfaces_game_state.transient.md\":\"35e95c2f\",\"api_interfaces_lib_pwa-register.registerswoptions.md\":\"370b75ba\",\"api_modules_data_common.md\":\"09384301\",\"api_modules_data_projentry.md\":\"5581fbd6\",\"api_modules_data_themes.md\":\"cc2e1672\",\"api_modules_features_achievements_achievementcomponent.md\":\"136fbfba\",\"api_modules_features_achievements_achievement.md\":\"e8731e6f\",\"api_modules_features_bars_barcomponent.md\":\"611bea07\",\"api_modules_features_bars_bar.md\":\"476d9d31\",\"api_modules_features_boards_boardcomponent.md\":\"15727d18\",\"api_modules_features_boards_boardlinkcomponent.md\":\"af505985\",\"api_modules_features_boards_boardnodecomponent.md\":\"1748b471\",\"api_modules_features_boards_board.md\":\"0a05f6d5\",\"api_modules_features_buyable.md\":\"09ac7ce7\",\"api_modules_features_challenges_challengecomponent.md\":\"fcfc53e4\",\"api_modules_features_challenges_challenge.md\":\"e25b6ef2\",\"api_modules_features_clickables_clickablecomponent.md\":\"e551fc0b\",\"api_modules_features_clickables_clickable.md\":\"417a2e32\",\"api_modules_features_conversion.md\":\"df3062a2\",\"api_modules_features_feature.md\":\"a1ff761c\",\"api_modules_features_grids_gridcellcomponent.md\":\"868f543e\",\"api_modules_features_grids_gridcomponent.md\":\"8c916a1c\",\"api_modules_features_grids_grid.md\":\"f5dd17da\",\"api_modules_features_hotkey.md\":\"7c1642d7\",\"api_modules_features_infoboxes_infoboxcomponent.md\":\"bd08d1d3\",\"api_modules_features_infoboxes_infobox.md\":\"5a0f5976\",\"api_modules_features_links_linkcomponent.md\":\"e0c6ef5b\",\"api_modules_features_links_linkscomponent.md\":\"8dc74f0c\",\"api_modules_features_links_links.md\":\"ae622422\",\"api_modules_features_milestones_milestonecomponent.md\":\"c5b638d5\",\"api_modules_features_milestones_milestone.md\":\"9348f202\",\"api_modules_features_particles_particlescomponent.md\":\"a9920cb8\",\"api_modules_features_particles_particles.md\":\"4f5b1964\",\"api_modules_features_reset.md\":\"5148b99e\",\"api_modules_features_resources_maindisplaycomponent.md\":\"5332570e\",\"api_modules_features_resources_resourcecomponent.md\":\"4f3dd2af\",\"api_modules_features_resources_resource.md\":\"8c6e9065\",\"api_modules_features_tabs_tabbuttoncomponent.md\":\"0da12a3c\",\"api_modules_features_tabs_tabcomponent.md\":\"8b6ae64f\",\"api_modules_features_tabs_tabfamilycomponent.md\":\"c8a929d7\",\"api_modules_features_tabs_tab.md\":\"e4a058a4\",\"api_modules_features_tabs_tabfamily.md\":\"de8f270d\",\"api_modules_features_tooltips_tooltipcomponent.md\":\"ac6f2950\",\"api_modules_features_tooltips_tooltip.md\":\"12369213\",\"api_modules_features_trees_treecomponent.md\":\"2fbfea9f\",\"api_modules_features_trees_treenodecomponent.md\":\"4a27c52e\",\"api_modules_features_trees_tree.md\":\"a28a527b\",\"api_modules_features_upgrades_upgradecomponent.md\":\"260bdd79\",\"api_modules_features_upgrades_upgrade.md\":\"db77300c\",\"api_modules_game_events.md\":\"baaf7c90\",\"api_modules_game_layers.md\":\"2cf8abc8\",\"api_modules_game_modifiers.md\":\"cca2ddee\",\"api_modules_game_notifications.md\":\"7fea3723\",\"api_modules_game_persistence.md\":\"5258b275\",\"api_modules_game_player.md\":\"af668326\",\"api_modules_game_settings.md\":\"698c3427\",\"api_modules_game_state.md\":\"859e5caa\",\"api_modules_lib_break_eternity.md\":\"70955f58\",\"api_modules_lib_pwa-register.md\":\"bbf2eae0\",\"api_modules_util_bignum.md\":\"b726e98d\",\"api_modules_util_break_eternity.md\":\"1a64ffcc\",\"api_modules_util_common.md\":\"2f754726\",\"api_modules_util_computed.md\":\"211c3e6c\",\"api_modules_util_proxies.md\":\"11c2889c\",\"api_modules_util_save.md\":\"4aa3b402\",\"api_modules_util_vue.md\":\"50fee245\",\"api_overview.md\":\"3abc7529\",\"guide_changelog.md\":\"49d4dd2c\",\"guide_coercable.md\":\"17ee091d\",\"guide_creating-features.md\":\"23ab8e0a\",\"guide_dynamic-layers.md\":\"94d67235\",\"guide_examples.md\":\"a9522a5d\",\"guide_features.md\":\"8237ba36\",\"guide_index.md\":\"a086b62e\",\"guide_layers.md\":\"3ea4eccc\",\"guide_persistence.md\":\"3f125834\",\"guide_project-entry.md\":\"8a9337cf\",\"guide_project-info.md\":\"da57246e\",\"guide_reactivity.md\":\"7a86305e\",\"guide_setup.md\":\"11f42a7c\",\"guide_themes.md\":\"af50ff71\",\"guide_updating.md\":\"c32948b0\",\"guide_utils.md\":\"bf2e4eb7\",\"index.md\":\"3c21bf19\"}")</script>
|
|
<script type="module" async src="/assets/app.cf939732.js"></script>
|
|
|
|
</body>
|
|
</html> |