← Back
Editing: theming.html
<!DOCTYPE html> <html class="writer-html5" lang="en" data-content_root="../"> <head> <meta charset="utf-8" /> <meta name="readthedocs-addons-api-version" content="1"><meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Theming — Nextcloud latest Administration Manual latest documentation</title> <link rel="stylesheet" type="text/css" href="../_static/pygments.css?v=b86133f3" /> <link rel="stylesheet" type="text/css" href="../_static/css/theme.css?v=e59714d7" /> <link rel="stylesheet" type="text/css" href="../_static/copybutton.css?v=76b2166b" /> <link rel="stylesheet" type="text/css" href="../_static/custom.css?v=8ff6e0db" /> <link rel="stylesheet" type="text/css" href="../_static/dark_mode_css/general.css?v=c0a7eb24" /> <link rel="stylesheet" type="text/css" href="../_static/dark_mode_css/dark.css?v=70edf1c7" /> <link rel="canonical" href="https://docs.nextcloud.com/server/stable/admin_manual/configuration_server/theming.html" /> <script src="../_static/jquery.js?v=5d32c60e"></script> <script src="../_static/_sphinx_javascript_frameworks_compat.js?v=2cd50e6c"></script> <script src="../_static/documentation_options.js?v=a49d5d77"></script> <script src="../_static/doctools.js?v=9bcbadda"></script> <script src="../_static/sphinx_highlight.js?v=dc90522c"></script> <script src="../_static/clipboard.min.js?v=a7894cd8"></script> <script src="../_static/copybutton.js?v=f281be69"></script> <script src="../_static/dark_mode_js/default_light.js?v=c2e647ce"></script> <script src="../_static/dark_mode_js/theme_switcher.js?v=358d3910"></script> <script src="../_static/js/theme.js"></script> <script src="../_static/js/versions.js"></script> <link rel="index" title="Index" href="../genindex.html" /> <link rel="search" title="Search" href="../search.html" /> <link rel="next" title="Using the occ command" href="../occ_command.html" /> <link rel="prev" title="Text app" href="text_configuration.html" /> </head> <body class="wy-body-for-nav"> <div class="wy-grid-for-nav"> <nav data-toggle="wy-nav-shift" class="wy-nav-side"> <div class="wy-side-scroll"> <div class="wy-side-nav-search" > <a href="../contents.html"> <img src="../_static/logo-white.png" class="logo" alt="Logo"/> </a> <div class="switch-menus"> <div class="version-switch"></div> <div class="language-switch"></div> </div> <div role="search"> <form id="rtd-search-form" class="wy-form" action="../search.html" method="get"> <input type="text" name="q" placeholder="Search docs" aria-label="Search docs" /> <input type="hidden" name="check_keywords" value="yes" /> <input type="hidden" name="area" value="default" /> </form> </div> </div><div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="Navigation menu"> <p class="caption" role="heading"><span class="caption-text">Getting Started</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../index.html">Introduction</a></li> <li class="toctree-l1"><a class="reference internal" href="../release_schedule.html">Maintenance and release schedule</a></li> <li class="toctree-l1"><a class="reference internal" href="../gdpr/index.html">GDPR-compliance</a></li> <li class="toctree-l1"><a class="reference internal" href="../declarations/index.html">Declarations</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Release notes</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../release_notes/index.html">Critical changes</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Installation</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../installation/index.html">Installation and server configuration</a></li> <li class="toctree-l1"><a class="reference internal" href="../configuration_database/index.html">Database configuration</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Configuration</span></p> <ul class="current"> <li class="toctree-l1 current"><a class="reference internal" href="index.html">Nextcloud configuration</a><ul class="current"> <li class="toctree-l2"><a class="reference internal" href="security_setup_warnings.html">Warnings on admin page</a></li> <li class="toctree-l2"><a class="reference internal" href="config_sample_php_parameters.html">Configuration Parameters</a></li> <li class="toctree-l2"><a class="reference internal" href="activity_configuration.html">Activity app</a></li> <li class="toctree-l2"><a class="reference internal" href="admin_delegation_configuration.html">Administration privileges (Delegation)</a></li> <li class="toctree-l2"><a class="reference internal" href="android_deep_link_handling.html">Android Deep Link Handling</a></li> <li class="toctree-l2"><a class="reference internal" href="antivirus_configuration.html">Antivirus scanner</a></li> <li class="toctree-l2"><a class="reference internal" href="automatic_configuration.html">Automatic setup</a></li> <li class="toctree-l2"><a class="reference internal" href="background_jobs_configuration.html">Background jobs</a></li> <li class="toctree-l2"><a class="reference internal" href="bruteforce_configuration.html">Brute force protection</a></li> <li class="toctree-l2"><a class="reference internal" href="caching_configuration.html">Memory caching</a></li> <li class="toctree-l2"><a class="reference internal" href="dashboard_configuration.html">Dashboard app</a></li> <li class="toctree-l2"><a class="reference internal" href="domain_change.html">Domain Change</a></li> <li class="toctree-l2"><a class="reference internal" href="email_configuration.html">Email</a></li> <li class="toctree-l2"><a class="reference internal" href="external_sites.html">Linking external sites</a></li> <li class="toctree-l2"><a class="reference internal" href="language_configuration.html">Language & Locale</a></li> <li class="toctree-l2"><a class="reference internal" href="logging_configuration.html">Logging</a></li> <li class="toctree-l2"><a class="reference internal" href="oauth2.html">OAuth2</a></li> <li class="toctree-l2"><a class="reference internal" href="reverse_proxy_configuration.html">Reverse proxy</a></li> <li class="toctree-l2"><a class="reference internal" href="text_configuration.html">Text app</a></li> <li class="toctree-l2 current"><a class="current reference internal" href="#">Theming</a><ul> <li class="toctree-l3"><a class="reference internal" href="#customize-the-appearance-of-nextcloud">Customize the appearance of Nextcloud</a></li> <li class="toctree-l3"><a class="reference internal" href="#configure-theming-via-cli">Configure theming via CLI</a></li> <li class="toctree-l3"><a class="reference internal" href="#icon-theming">Icon theming</a></li> <li class="toctree-l3"><a class="reference internal" href="#branded-clients">Branded clients</a></li> </ul> </li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="../occ_command.html">Using the occ command</a></li> <li class="toctree-l1"><a class="reference internal" href="../reference/index.html">Reference management</a></li> <li class="toctree-l1"><a class="reference internal" href="../webhook_listeners/index.html">Webhook Listeners</a></li> <li class="toctree-l1"><a class="reference internal" href="../windmill_workflows/index.html">Windmill Workflows</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Files</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../configuration_files/index.html">File sharing and management</a></li> <li class="toctree-l1"><a class="reference internal" href="../file_workflows/index.html">Flow</a></li> <li class="toctree-l1"><a class="reference internal" href="../configuration_mimetypes/index.html">Mimetypes management</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Apps</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../apps_management.html">Apps management</a></li> <li class="toctree-l1"><a class="reference internal" href="../exapps_management/index.html">ExApps management</a></li> <li class="toctree-l1"><a class="reference internal" href="../ai/index.html">Artificial Intelligence</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Users</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../configuration_user/index.html">User management</a></li> <li class="toctree-l1"><a class="reference internal" href="../desktop/index.html">Desktop Clients</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Groupware</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../groupware/index.html">Groupware</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Office</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../office/index.html">Office</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Maintenance</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../configuration_monitoring/index.html">Monitoring</a></li> <li class="toctree-l1"><a class="reference internal" href="../maintenance/index.html">Maintenance</a></li> <li class="toctree-l1"><a class="reference internal" href="../issues/index.html">Issues and troubleshooting</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Links</span></p> <ul> <li class="toctree-l1"><a class="reference external" href="https://help.nextcloud.com/">Community Help Forum</a></li> <li class="toctree-l1"><a class="reference external" href="https://docs.nextcloud.com/">User Manuals</a></li> <li class="toctree-l1"><a class="reference external" href="https://docs.nextcloud.com/">Developer Manuals</a></li> <li class="toctree-l1"><a class="reference external" href="https://nextcloud.com/install/">Download</a></li> <li class="toctree-l1"><a class="reference external" href="https://apps.nextcloud.com">App Store</a></li> <li class="toctree-l1"><a class="reference external" href="https://help.nextcloud.com/t/translation-knowledge-valid-for-the-entire-nextcloud-project-wiki/51550">Translations</a></li> <li class="toctree-l1"><a class="reference external" href="https://github.com/nextcloud/">GitHub</a></li> <li class="toctree-l1"><a class="reference external" href="https://github.com/nextcloud/server/wiki/Maintenance-and-Release-Schedule">Supported versions</a></li> <li class="toctree-l1"><a class="reference external" href="https://nextcloud.com/enterprise/">Nextcloud Enterprise</a></li> <li class="toctree-l1"><a class="reference external" href="https://github.com/nextcloud/server/blob/master/COPYING-README">License</a></li> <li class="toctree-l1"><a class="reference external" href="https://nextcloud.com/">Nextcloud GmbH</a></li> </ul> </div> </div> </nav> <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"><nav class="wy-nav-top" aria-label="Mobile navigation menu" > <i data-toggle="wy-nav-top" class="fa fa-bars"></i> <a href="../contents.html">Nextcloud latest Administration Manual</a> </nav> <div class="wy-nav-content"> <div class="rst-content style-external-links"> <div role="navigation" aria-label="Page navigation"> <ul class="wy-breadcrumbs"> <li><a href="../contents.html" class="icon icon-home" aria-label="Home"></a></li> <li class="breadcrumb-item"><a href="index.html">Nextcloud configuration</a></li> <li class="breadcrumb-item active">Theming</li> <li class="wy-breadcrumbs-aside"> <a href="https://github.com/nextcloud/documentation/edit/master/admin_manual/configuration_server/theming.rst" class="fa fa-github"> Edit on GitHub</a> </li> </ul> <hr/> </div> <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article"> <div itemprop="articleBody"> <section id="theming"> <h1>Theming<a class="headerlink" href="#theming" title="Link to this heading"></a></h1> <p>The theming feature lets you customize the look and feel of your Nextcloud instance to match your organization’s design (or - if for personal use - your own style). You can replace the Nextcloud logo and background images with your own assets, customize colors and slogans, and add dedicated legal and privacy links.</p> <p>Theme customization is provided by the shipped and always-enabled <code class="docutils literal notranslate"><span class="pre">theming</span></code> app. Use the <strong>Theming</strong> section within the <em>Administration settings</em> menu to access all theming-related settings.</p> <section id="customize-the-appearance-of-nextcloud"> <h2>Customize the appearance of Nextcloud<a class="headerlink" href="#customize-the-appearance-of-nextcloud" title="Link to this heading"></a></h2> <p>You can change the following aspects of your instance’s appearance:</p> <figure class="align-default"> <img alt="../_images/theming1.png" src="../_images/theming1.png" /> </figure> <ul class="simple"> <li><p><strong>Name</strong> (e.g., ACME Inc. Cloud).</p></li> <li><p><strong>Web link</strong> (e.g., <a class="reference external" href="https://acme.inc/">https://acme.inc/</a>).</p></li> <li><p><strong>Slogan</strong>.</p></li> <li><p><strong>Primary color</strong>: Used for important buttons, checkboxes, and folder icons.</p></li> <li><p><strong>Background color</strong>: Used when no image is set; header bar icon color is also derived from this.</p></li> <li><p><strong>Logo</strong>: Appears in the header and on the login page (default size: 62x34 px).</p></li> <li><p><strong>Background and login image</strong>: Sets the page background.</p></li> </ul> <figure class="align-default"> <img alt="../_images/theming2.png" src="../_images/theming2.png" /> </figure> <ul class="simple"> <li><p><strong>Additional legal links</strong>: Legal notice and privacy policy.</p></li> <li><p><strong>Custom header logo and favicon</strong>: Optionally override the auto-generated favicon based on your logo.</p></li> <li><p><strong>Disable user theming</strong>: Prevent users from changing backgrounds and colors. Toggle this to enforce your custom theme.</p></li> </ul> </section> <section id="configure-theming-via-cli"> <h2>Configure theming via CLI<a class="headerlink" href="#configure-theming-via-cli" title="Link to this heading"></a></h2> <p>You can also configure theming using the <code class="docutils literal notranslate"><span class="pre">occ</span> <span class="pre">theming:config</span></code> command.</p> <p>Available settings include:</p> <ul class="simple"> <li><p><cite>name</cite>, <cite>url</cite>, <cite>imprintUrl</cite>, <cite>privacyUrl</cite>, <cite>slogan</cite>, <cite>background_color</cite>, <cite>primary_color</cite>. Example: <code class="docutils literal notranslate"><span class="pre">occ</span> <span class="pre">theming:config</span> <span class="pre">name</span> <span class="pre">"My</span> <span class="pre">Example</span> <span class="pre">Cloud"</span></code></p></li> <li><p><cite>background</cite>, <cite>logo</cite>, <cite>favicon</cite>, <cite>logoheader</cite>. Example: <code class="docutils literal notranslate"><span class="pre">occ</span> <span class="pre">theming:config</span> <span class="pre">logo</span> <span class="pre">/tmp/mylogo.png</span></code></p></li> <li><p><cite>disable-user-theming</cite> (yes/no). Example: <code class="docutils literal notranslate"><span class="pre">occ</span> <span class="pre">theming:config</span> <span class="pre">disable-user-theming</span> <span class="pre">yes</span></code></p></li> </ul> <div class="admonition note"> <p class="admonition-title">Note</p> <p>Images must be read from a local file on the Nextcloud server.</p> </div> <p>To use a color (instead of an image) for the background:</p> <div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">occ</span> <span class="n">theming</span><span class="p">:</span><span class="n">config</span> <span class="n">background_color</span> <span class="s2">"#0082c9"</span> <span class="n">occ</span> <span class="n">theming</span><span class="p">:</span><span class="n">config</span> <span class="n">background</span> <span class="n">backgroundColor</span> </pre></div> </div> </section> <section id="icon-theming"> <h2>Icon theming<a class="headerlink" href="#icon-theming" title="Link to this heading"></a></h2> <p>Based on your settings, Nextcloud will automatically generate favicons and a header logo using your logo and theme color.</p> <p>This requires:</p> <blockquote> <div><ul class="simple"> <li><p>The PHP <code class="docutils literal notranslate"><span class="pre">imagick</span></code> module.</p></li> <li><p>SVG support for imagick (e.g., <code class="docutils literal notranslate"><span class="pre">libmagickcore-7.q16-10-extra</span></code> on Debian 13 and <code class="docutils literal notranslate"><span class="pre">libmagickcore-6.q16-7-extra</span></code> on Ubuntu 24.04).</p></li> </ul> </div></blockquote> <div class="admonition tip"> <p class="admonition-title">Tip</p> <p>In the advanced options of the theming app, you can set a custom favicon if you do not want to use auto-generated resources or install the above dependencies.</p> </div> </section> <section id="branded-clients"> <h2>Branded clients<a class="headerlink" href="#branded-clients" title="Link to this heading"></a></h2> <div class="admonition note"> <p class="admonition-title">Note</p> <p>Nextcloud GmbH - the company that employs Nextcloud’s core maintainers - offers branding services, providing sync clients (mobile and desktop) that use your corporate identity and are pre-configured for your users. For more information on advanced branding and enterprise support offerings, <a class="reference external" href="https://nextcloud.com/enterprise/">contact Nextcloud GmbH</a>.</p> </div> <p>The theming app supports changing the URLs for the mobile apps (Android and iOS) that appear when users access the web interface from mobile devices. By default, these links point to the official Nextcloud apps, but you can set them to branded versions.</p> <p>Set custom app links using the <code class="docutils literal notranslate"><span class="pre">occ</span></code> command:</p> <div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">occ</span> <span class="n">config</span><span class="p">:</span><span class="n">app</span><span class="p">:</span><span class="nb">set</span> <span class="n">theming</span> <span class="n">AndroidClientUrl</span> <span class="o">--</span><span class="n">value</span> <span class="s2">"https://play.google.com/store/apps/details?id=com.nextcloud.client"</span> <span class="n">occ</span> <span class="n">config</span><span class="p">:</span><span class="n">app</span><span class="p">:</span><span class="nb">set</span> <span class="n">theming</span> <span class="n">iTunesAppId</span> <span class="o">--</span><span class="n">value</span> <span class="s2">"1125420102"</span> <span class="n">occ</span> <span class="n">config</span><span class="p">:</span><span class="n">app</span><span class="p">:</span><span class="nb">set</span> <span class="n">theming</span> <span class="n">iOSClientUrl</span> <span class="o">--</span><span class="n">value</span> <span class="s2">"https://itunes.apple.com/us/app/nextcloud/id1125420102?mt=8"</span> </pre></div> </div> </section> </section> </div> </div> <footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer"> <a href="text_configuration.html" class="btn btn-neutral float-left" title="Text app" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a> <a href="../occ_command.html" class="btn btn-neutral float-right" title="Using the occ command" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a> </div> <hr/> <div role="contentinfo"> <p>© Copyright 2016-2026 Nextcloud GmbH and Nextcloud contributors.</p> </div> </footer> </div> </div> </section> </div> <div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="versions"> <span class="rst-current-version" data-toggle="rst-current-version"> ☁️ latest <span class="fa fa-caret-down"></span> </span> <div class="rst-other-versions"> <dl> <dt>☁️ Versions</dt> <dd style="width: 32%"> <a href="https://docs.nextcloud.com/server/latest/admin_manual" style="color: var(--dark-link-color);" > latest </a> </dd> <dd style="width: 32%"> <a href="https://docs.nextcloud.com/server/stable/admin_manual" > stable </a> </dd> <dd style="width: 32%"> <a href="https://docs.nextcloud.com/server/32/admin_manual" > 32 </a> </dd> <dd style="width: 32%"> <a href="https://docs.nextcloud.com/server/31/admin_manual" > 31 </a> </dd> </dl> </div> </div> <script> jQuery(function () { SphinxRtdTheme.Navigation.enable(true); }); </script> </body> </html>
Save File
Cancel