Skip to content

Instantly share code, notes, and snippets.

@Aetherinox

Aetherinox/README.md

Last active August 30, 2025 09:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Aetherinox/b99ff140df37406da73f602e25f79677 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Aetherinox/b99ff140df37406da73f602e25f79677 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

About

This gist explains how to use Discord Nitro themes so that you can change the appearance of your entire Discord interface without the need for any paid subscriptions.



Usage

  • Launch Discord
  • Open the Discord (Chromium) dev-tools by pressing CTRL + SHIFT + I
  • In the top right, click Sources tab
  • On the left of sources, click the arrow button and select Snippets
  • Right-click in empty box, select Create new Snippet
  • Take the code in the boxes below and add each theme
  • Add the final snippet file named theme-remove.js so that you can remove the theme when you're done
  • Once the snippets are added, right-click each snippet to apply a theme

Note

When one of these theme scripts are triggered, the theme selector menu will now work and you can flip between themes using the normal discord interface. Themes will not be removed when you click the Exit Preview.

To use the theme selector within Discord, open your discord settings, click Appearance => Theme => Preview Themes. The theme selector will appear on the right-side of your Discord interface. Simply click a theme to apply, and click Exit Preview.




Themes

This gist contains the following themes / scripts:


File Description Brightness
theme-add-Sunset.js Sunset ◼️
theme-add-NidnightBlurple.js Midnight Blurple ◼️
theme-add-ChromaGlow(D).js Chroma Glow ◼️
theme-add-CrimsonMoon(D).js Crimson Moon ◼️
theme-add-Forest(D).js Forest ◼️
theme-add-Mars(D).js Mars ◼️
theme-add-UnderTheSea(D).js Under the Sea ◼️
theme-add-RetroStorm(D).js Retro Storm ◼️
theme-add-NeonNights(D).js Neon Nights ◼️
theme-add-StrawberryLemonade(D).js Strawberry Lemonade ◼️
theme-add-Aurora(D).js Aurora ◼️
theme-add-Sepia(D).js Sepia ◼️
theme-add-BlurpleTwilight(D).js Blurple Twilight ◼️
theme-add-MintApple(L).js MintApple ◻️
theme-add-CitrusSherbert(L).js Citrus Sherbert ◻️
theme-add-RetroRaincloud(L).js Retro Raincloud ◻️
theme-add-Hanami(L).js Hanami ◻️
theme-add-Sunrise(L).js Sunrise ◻️
theme-add-CottonCandy(L).js Cotton Candy ◻️
theme-add-LoFiVibes(L).js LoFi Vibes ◻️
theme-add-DesertKhaki(L).js Desert Khaki ◻️
theme-remove.js Remove any themes applied ⚙️


Multiple Themes Colliding

If you run more than one script at a time, you may get the colors from two blending together. In order for this script to work, the script must be ran continuously, otherwise the theme will be removed the next time the HTML classes update. These scripts ensure you always have the theme.

If you want to stop the collision issue, place your cursor inside the right-side dev-tools box and simply press F5. The discord interface will refresh, which will reset you back to the default theme, and you can now apply a new one.

The other option is to find the script below theme-Discord-Refresh and add it to your list of scripts. To refresh the Discord interface, right-click on the script and select Run. The interface will refresh in 1 second. Once the interface is refreshed, click the Snippets tab again.


Raw
theme-add-Aurora(D).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Aurora (Dark)
@about Applies the discord theme "Aurora" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 239.16deg, var( --bg-gradient-aurora-1 ) 10.39%, var( --bg-gradient-aurora-2 ) 26.87%, var( --bg-gradient-aurora-3 ) 48.31%, var( --bg-gradient-aurora-4 ) 64.98%, var( --bg-gradient-aurora-5 ) 92.5% );
--custom-theme-primary-color: #062053;
--custom-theme-secondary-color: #051a81;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 229.41176470588238 100% 90%;
--custom-theme-base-color-light: rgb(204, 213, 255);
--custom-theme-text-color-light: rgb(0, 43, 128);
--custom-theme-base-color-dark-hsl: 219.23076923076923 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(0, 9, 26);
--custom-theme-text-color-dark: rgb(153, 171, 255);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Aurora (Dark)';
} )();
Raw
theme-add-BlurpleTwilight(D).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Blurple Twilight (Dark)
@about Applies the discord theme "Blurple Twilight" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 47.61deg, var( --bg-gradient-blurple-twilight-1 ) 11.18%, var( --bg-gradient-blurple-twilight-2 ) 64.54% );
--custom-theme-primary-color: #2c3fe7;
--custom-theme-secondary-color: #261d83;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 234.11764705882354 100% 90%;
--custom-theme-base-color-light: rgb(204, 209, 255);
--custom-theme-text-color-light: rgb(11, 0, 128);
--custom-theme-base-color-dark-hsl: 244.61538461538458 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(2, 0, 26);
--custom-theme-text-color-dark: rgb(153, 163, 255);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Blurple Twilight (Dark)';
} )();
Raw
theme-add-ChromaGlow(D).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Chroma Glow (Dark)
@about Applies the discord theme "Chroma Glow" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient(128.92deg, var( --bg-gradient-chroma-glow-1 ) 3.94%, var( --bg-gradient-chroma-glow-2 ) 26.1%, var( --bg-gradient-chroma-glow-3 ) 39.82%, var( --bg-gradient-chroma-glow-4 ) 56.89%, var( --bg-gradient-chroma-glow-5 ) 76.45%);
--custom-theme-primary-color: #0eb5bf;
--custom-theme-secondary-color: #218be0;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 183.52941176470586 100% 90%;
--custom-theme-base-color-light: rgb(204, 252, 255);
--custom-theme-text-color-light: rgb(0, 71, 128);
--custom-theme-base-color-dark-hsl: 207.6923076923077 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(0, 14, 26);
--custom-theme-text-color-dark: rgb(229, 254, 255);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Chroma Glow (Dark)';
} )();
Raw
theme-add-CitrusSherbert(L).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Citrus Sherbert (Light)
@about Applies the discord theme "Citrus Sherbert" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 180deg, var( --bg-gradient-citrus-sherbert-1 ) 31.1%, var( --bg-gradient-citrus-sherbert-2 ) 67.09% );
--custom-theme-primary-color: #f3b336;
--custom-theme-secondary-color: #ee8558;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 40 100% 90%;
--custom-theme-base-color-light: rgb(255, 238, 204);
--custom-theme-text-color-light: rgb(77, 23, 0);
--custom-theme-base-color-dark-hsl: 18.461538461538463 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(26, 8, 0);
--custom-theme-text-color-dark: rgb(255, 246, 229);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Citrus Sherbert (Light)';
} )();
Raw
theme-add-CottonCandy(L).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Cotton Candy (Light)
@about Applies the discord theme "Cotton Candy" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 180.14deg, var( --bg-gradient-cotton-candy-1 ) 8.5%, var( --bg-gradient-cotton-candy-2 ) 94.28% );
--custom-theme-primary-color: #f4abb8;
--custom-theme-secondary-color: #b1c2fc;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 227.0588235294118 100% 90%;
--custom-theme-base-color-light: rgb(204, 215, 255);
--custom-theme-text-color-light: rgb(77, 0, 14);
--custom-theme-base-color-dark-hsl: 348.46153846153845 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(26, 0, 5);
--custom-theme-text-color-dark: rgb(153, 176, 255);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Cotton Candy (Light)';
} )();
Raw
theme-add-CrimsonMoon(D).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Crimson Moon (Dark)
@about Applies the discord theme "Crimson Moon" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 64.92deg, var( --bg-gradient-crimson-moon-1 ) 16.17%, var( --bg-gradient-crimson-moon-2 ) 72% );
--custom-theme-primary-color: #950909;
--custom-theme-secondary-color: #000000;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 0 100% 90%;
--custom-theme-base-color-light: rgb(255, 204, 204);
--custom-theme-text-color-light: rgb(77, 0, 0);
--custom-theme-base-color-dark-hsl: 0 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(26, 0, 0);
--custom-theme-text-color-dark: rgb(255, 229, 229);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Crimson Moon (Dark)';
} )();
Raw
theme-add-DesertKhaki(L).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Desert Khaki (Light)
@about Applies the discord theme "Desert Khaki" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 38.99deg, var( --bg-gradient-desert-khaki-1 ) 12.92%, var( --bg-gradient-desert-khaki-2 ) 32.92%, var( --bg-gradient-desert-khaki-3 ) 52.11% );
--custom-theme-primary-color: #e7dbd0;
--custom-theme-secondary-color: #e0d6a3;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 28.235294117647065 100% 90%;
--custom-theme-base-color-light: rgb(255, 228, 204);
--custom-theme-text-color-light: rgb(77, 64, 0);
--custom-theme-base-color-dark-hsl: 48.46153846153846 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(26, 21, 0);
--custom-theme-text-color-dark: rgb(255, 242, 229);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Desert Khaki (Light)';
} )();
Raw
theme-add-Forest(D).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Forest (Dark)
@about Applies the discord theme "Forest" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 162.27deg, var( --bg-gradient-forest-1 ) 11.2%, var( --bg-gradient-forest-2 ) 29.93%, var( --bg-gradient-forest-3 ) 48.64%, var( --bg-gradient-forest-4 ) 67.85%, var( --bg-gradient-forest-5 ) 83.54% );
--custom-theme-primary-color: #142215;
--custom-theme-secondary-color: #a98e4b;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 42.35294117647058 100% 90%;
--custom-theme-base-color-light: rgb(255, 240, 204);
--custom-theme-text-color-light: rgb(0, 77, 6);
--custom-theme-base-color-dark-hsl: 124.61538461538463 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(0, 26, 2);
--custom-theme-text-color-dark: rgb(255, 248, 229);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Forest (Dark)';
} )();
Raw
theme-add-Hanami(L).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Hanami (Light)
@about Applies the discord theme "Hanami" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 38.08deg, var( --bg-gradient-hanami-1 ) 3.56%, var( --bg-gradient-hanami-2 ) 35.49%, var( --bg-gradient-hanami-3 ) 68.78% );
--custom-theme-primary-color: #efaab3;
--custom-theme-secondary-color: #a6daa2;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 115.29411764705884 100% 90%;
--custom-theme-base-color-light: rgb(208, 255, 204);
--custom-theme-text-color-light: rgb(77, 0, 10);
--custom-theme-base-color-dark-hsl: 353.0769230769231 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(26, 0, 3);
--custom-theme-text-color-dark: rgb(231, 255, 229);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Hanami (Light)';
} )();
Raw
theme-add-LoFiVibes(L).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: LoFi Vibes (Light)
@about Applies the discord theme "LoFi Vibes" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 179.52deg, var( --bg-gradient-lofi-vibes-1 ) 7.08%, var( --bg-gradient-lofi-vibes-2 ) 34.94%, var( --bg-gradient-lofi-vibes-3 ) 65.12%, var( --bg-gradient-lofi-vibes-4 ) 96.23% );
--custom-theme-primary-color: #a4c0f7;
--custom-theme-secondary-color: #cfdfa2;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 75.29411764705885 100% 90%;
--custom-theme-base-color-light: rgb(242, 255, 204);
--custom-theme-text-color-light: rgb(0, 42, 128);
--custom-theme-base-color-dark-hsl: 221.53846153846155 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(0, 8, 26);
--custom-theme-text-color-dark: rgb(248, 255, 229);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: LoFi Vibes (Light)';
} )();
Raw
theme-add-Mars(D).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Mars (Dark)
@about Applies the discord theme "Mars" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 170.82deg, var( --bg-gradient-mars-1 ) 14.61%, var( --bg-gradient-mars-2 ) 74.62% );
--custom-theme-primary-color: #895240;
--custom-theme-secondary-color: #8f4343;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 15.294117647058806 100% 90%;
--custom-theme-base-color-light: rgb(255, 217, 204);
--custom-theme-text-color-light: rgb(77, 19, 0);
--custom-theme-base-color-dark-hsl: 13.846153846153847 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(26, 6, 0);
--custom-theme-text-color-dark: rgb(255, 236, 229);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Mars (Dark)';
} )();
Raw
theme-add-MidnightBlurple(D).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Midnight-Blurple (Dark)
@about Applies the discord theme "Midnight Burple" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient(48.17deg, var( --bg-gradient-midnight-blurple-1 ) 11.21%, var( --bg-gradient-midnight-blurple-2 ) 61.92%);
--custom-theme-primary-color: #5348ca;
--custom-theme-secondary-color: #140730;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 244.70588235294116 100% 90%;
--custom-theme-base-color-light: rgb(208, 204, 255);
--custom-theme-text-color-light: rgb(39, 0, 128);
--custom-theme-base-color-dark-hsl: 258.46153846153845 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(8, 0, 26);
--custom-theme-text-color-dark: rgb(162, 153, 255);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Midnight Blurple (Dark)';
} )();
Raw
theme-add-MintApple(L).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Mint Apple (Light)
@about Applies the discord theme "Mint Apple" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 180deg, var( --bg-gradient-mint-apple-1 ) 6.15%, var( --bg-gradient-mint-apple-2 ) 48.7%, var( --bg-gradient-mint-apple-3 ) 93.07% );
--custom-theme-primary-color: #56b69f;
--custom-theme-secondary-color: #9eca67;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 87.05882352941177 100% 90%;
--custom-theme-base-color-light: rgb(232, 255, 204);
--custom-theme-text-color-light: rgb(0, 77, 58);
--custom-theme-base-color-dark-hsl: 163.84615384615384 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(0, 26, 19);
--custom-theme-text-color-dark: rgb(244, 255, 229);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Mint Apple (Light)';
} )();
Raw
theme-add-NeonNights(D).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Neon Nights (Dark)
@about Applies the discord theme "Neon Nights" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 180deg, var( --bg-gradient-neon-nights-1 ) 0%, var( --bg-gradient-neon-nights-2 ) 50%, var( --bg-gradient-neon-nights-3 ) 100% );
--custom-theme-primary-color: #01a89e;
--custom-theme-secondary-color: #b43898;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 176.47058823529414 100% 90%;
--custom-theme-base-color-light: rgb(204, 255, 252);
--custom-theme-text-color-light: rgb(77, 0, 59);
--custom-theme-base-color-dark-hsl: 313.84615384615387 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(26, 0, 20);
--custom-theme-text-color-dark: rgb(229, 255, 253);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Neon Nights (Dark)';
} )();
Raw
theme-add-RetroRaincloud(L).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Retro Raincloud (Light)
@about Applies the discord theme "Retro Raincloud" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 148.71deg, var( --bg-gradient-retro-raincloud-1 ) 5.64%, var( --bg-gradient-retro-raincloud-2 ) 26.38%, var( --bg-gradient-retro-raincloud-2 ) 49.92%, var( --bg-gradient-retro-raincloud-1 ) 73.12% );
--custom-theme-primary-color: #3a7ca1;
--custom-theme-secondary-color: #3a7ca1;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 201.1764705882353 100% 90%;
--custom-theme-base-color-light: rgb(204, 237, 255);
--custom-theme-text-color-light: rgb(0, 82, 128);
--custom-theme-base-color-dark-hsl: 203.07692307692307 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(0, 16, 26);
--custom-theme-text-color-dark: rgb(153, 218, 255);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Retro Raincloud (Light)';
} )();
Raw
theme-add-RetroStorm(D).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Retro Storm (Dark)
@about Applies the discord theme "Retro Storm" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 148.71deg, var( --bg-gradient-retro-storm-1 ) 5.64%, var( --bg-gradient-retro-storm-2 ) 26.38%, var( --bg-gradient-retro-storm-2 ) 49.92%, var( --bg-gradient-retro-storm-1 ) 73.12% );
--custom-theme-primary-color: #3a7ca1;
--custom-theme-secondary-color: #3a7ca1;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 201.1764705882353 100% 90%;
--custom-theme-base-color-light: rgb(204, 237, 255);
--custom-theme-text-color-light: rgb(0, 82, 128);
--custom-theme-base-color-dark-hsl: 203.07692307692307 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(0, 16, 26);
--custom-theme-text-color-dark: rgb(153, 218, 255);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Retro Storm (Dark)';
} )();
Raw
theme-add-Sepia(D).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Sepia (Dark)
@about Applies the discord theme "Sepia" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 69.98deg, var( --bg-gradient-sepia-1 ) 14.14%, var( --bg-gradient-sepia-2 ) 60.35% );
--custom-theme-primary-color: #857664;
--custom-theme-secondary-color: #5b4421;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 32.941176470588225 100% 90%;
--custom-theme-base-color-light: rgb(255, 232, 204);
--custom-theme-text-color-light: rgb(77, 46, 0);
--custom-theme-base-color-dark-hsl: 34.61538461538461 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(26, 15, 0);
--custom-theme-text-color-dark: rgb(255, 243, 229);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Sepia (Dark)';
} )();
Raw
theme-add-StrawberryLemonade(D).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Strawberry Lemonade (Dark)
@about Applies the discord theme "Strawberry Lemonade" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 161.03deg, var( --bg-gradient-strawberry-lemonade-1 ) 18.79%, var( --bg-gradient-strawberry-lemonade-2 ) 49.76%, var( --bg-gradient-strawberry-lemonade-3 ) 80.72%);
--custom-theme-primary-color: #af1a6c;
--custom-theme-secondary-color: #e7a525;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 40 100% 90%;
--custom-theme-base-color-light: rgb(255, 238, 204);
--custom-theme-text-color-light: rgb(77, 0, 42);
--custom-theme-base-color-dark-hsl: 327.6923076923077 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(26, 0, 14);
--custom-theme-text-color-dark: rgb(255, 246, 229);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Strawberry Lemonade (Dark)';
} )();
Raw
theme-add-Sunrise(L).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Sunrise (Light)
@about Applies the discord theme "Sunrise" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 154.19deg, var( --bg-gradient-sunrise-1 ) 8.62%, var( --bg-gradient-sunrise-2 ) 48.07%, var( --bg-gradient-sunrise-3 ) 76.04% );
--custom-theme-primary-color: #9f4175;
--custom-theme-secondary-color: #a6953d;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 50.588235294117645 100% 90%;
--custom-theme-base-color-light: rgb(255, 247, 204);
--custom-theme-text-color-light: rgb(77, 0, 42);
--custom-theme-base-color-dark-hsl: 327.6923076923077 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(26, 0, 14);
--custom-theme-text-color-dark: rgb(255, 251, 229);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Sunrise (Light)';
} )();
Raw
theme-add-Sunset(D).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Sunset (Dark)
@about Applies the discord theme "Sunset" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 141.68deg, var( --bg-gradient-sunset-1 ) 27.57%, var( --bg-gradient-sunset-2 ) 71.25% );
--custom-theme-primary-color: #48288c;
--custom-theme-secondary-color: #db7f4b;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 21.17647058823529 100% 90%;
--custom-theme-base-color-light: rgb(255, 222, 204);
--custom-theme-text-color-light: rgb(41, 0, 128);
--custom-theme-base-color-dark-hsl: 258.46153846153845 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(8, 0, 26);
--custom-theme-text-color-dark: rgb(255, 239, 229);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Sunset (Dark)';
} )();
Raw
theme-add-UnderTheSea(D).js
(() =>
{
/*
@author Aetherinox
@script Discord Theme: Under the Sea (Dark)
@about Applies the discord theme "Under the Sea" to your interface.
adds a new snippet to chrome dev-tools
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
const style = document.createElement( 'style' );
style.textContent = `
.custom-theme-background
{
--custom-theme-background: linear-gradient( 179.14deg, var( --bg-gradient-under-the-sea-1 ) 1.91%, var( --bg-gradient-under-the-sea-2 ) 48.99%, var( --bg-gradient-under-the-sea-3 ) 96.35% );
--custom-theme-primary-color: #647962;
--custom-theme-secondary-color: #6a8482;
--custom-theme-base-color-amount: 50%;
--custom-theme-text-color-amount: 38%;
--custom-theme-base-color-light-hsl: 175.2941176470588 100% 90%;
--custom-theme-base-color-light: rgb(204, 255, 251);
--custom-theme-text-color-light: rgb(7, 77, 0);
--custom-theme-base-color-dark-hsl: 115.38461538461539 100% 5.098039215686274%;
--custom-theme-base-color-dark: rgb(2, 26, 0);
--custom-theme-text-color-dark: rgb(229, 255, 253);
}
`;
document.head.appendChild( style );
/*
Add class to HTML tag
*/
const html = document.documentElement;
html.classList.add( 'custom-theme-background' );
/*
Make theme persistent using MutationObserver
*/
new MutationObserver(() =>
{
if ( !html.classList.contains( 'custom-theme-background' ) )
{
html.classList.add( 'custom-theme-background' );
}
} ).observe( html, { attributes: true, attributeFilter: [ 'class' ] } );
return '✅ Applied Discord Theme: Under the Sea (Dark)';
} )();
Raw
theme-discord-refresh.js
(() =>
{
/*
@author Aetherinox
@script Discord: Refresh Interface
@about Completely refreshes the Discord interface and resets
any ran scripts
- launch discord
- open dev-tools with CTRL + SHIFT + I
- Click `sources` tab
- On left side `Pages`, click arrow, select `Snippets`
- Right-click in empty box, select `Create new Snippet`
- Add code below
*/
console.log( '🚧 Refreshing Discord in 1 second ...' );
setTimeout(() =>
{
location.reload();
}, 1000);
})();

Comments are disabled for this gist.