Skip to content

Vercel/Next.js Catppuccin by Iridescent-cdu

Screenshot of Vercel/Next.js Catppuccin
Homepage Write a review Install Get Stylus

Details

AuthorIridescent-cdu

LicenseMIT

Categoryvercel.com、nextjs.org

Created

Updated

Size12 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Soothing pastel theme for Vercel and Next.js

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name Vercel/Next.js Catppuccin
@namespace github.com/catppuccin/userstyles/styles/vercel
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/vercel
@version 0.1.1
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Avercel
@description Soothing pastel theme for Vercel and Next.js
@author Catppuccin
@license MIT

@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
==/UserStyle== */

@-moz-document domain("vercel.com"), domain("nextjs.org") {
  :root.dark-theme {
    #catppuccin(@darkFlavor, @accentColor);
  }
  :root.light-theme {
    #catppuccin(@lightFlavor, @accentColor);
  }

  #catppuccin(@lookup, @accent) {
    @rosewater: @catppuccin[@@lookup][@rosewater];
    @flamingo: @catppuccin[@@lookup][@flamingo];
    @pink: @catppuccin[@@lookup][@pink];
    @mauve: @catppuccin[@@lookup][@mauve];
    @red: @catppuccin[@@lookup][@red];
    @maroon: @catppuccin[@@lookup][@maroon];
    @peach: @catppuccin[@@lookup][@peach];
    @yellow: @catppuccin[@@lookup][@yellow];
    @green: @catppuccin[@@lookup][@green];
    @teal: @catppuccin[@@lookup][@teal];
    @sky: @catppuccin[@@lookup][@sky];
    @sapphire: @catppuccin[@@lookup][@sapphire];
    @blue: @catppuccin[@@lookup][@blue];
    @lavender: @catppuccin[@@lookup][@lavender];
    @text: @catppuccin[@@lookup][@text];
    @subtext1: @catppuccin[@@lookup][@subtext1];
    @subtext0: @catppuccin[@@lookup][@subtext0];
    @overlay2: @catppuccin[@@lookup][@overlay2];
    @overlay1: @catppuccin[@@lookup][@overlay1];
    @overlay0: @catppuccin[@@lookup][@overlay0];
    @surface2: @catppuccin[@@lookup][@surface2];
    @surface1: @catppuccin[@@lookup][@surface1];
    @surface0: @catppuccin[@@lookup][@surface0];
    @base: @catppuccin[@@lookup][@base];
    @mantle: @catppuccin[@@lookup][@mantle];
    @crust: @catppuccin[@@lookup][@crust];
    @accent-color: @catppuccin[@@lookup][@@accent];

    color-scheme: if(@lookup = latte, light, dark);

    ::selection {
      background-color: fade(@accent-color, 30%);
    }

    input,
    textarea {
      &::placeholder {
        color: @subtext0 !important;
      }
    }

    --geist-foreground: @text;
    --geist-background: @mantle;

    --accents-1: @base;
    --accents-2: @surface0;
    --accents-3: @surface1;
    --accents-4: @surface2;
    --accents-5: @overlay0;
    --accents-6: @overlay1;
    --accents-7: @overlay2;
    --accents-8: @subtext0;

    --geist-link-color: @accent-color;
    --geist-selection: @subtext0;
    --geist-success: @accent-color;
    --geist-error: @red;
    --geist-cyan: @teal;

    --ds-background-100: @base;
    --ds-background-200: @mantle;

    --ds-gray-100: @mantle;
    --ds-gray-200: @surface0;
    --ds-gray-300: @surface1;
    --ds-gray-400: @surface1;
    --ds-gray-600: @subtext0;
    --ds-gray-700: @subtext1;
    --ds-gray-800: @subtext1;
    --ds-gray-900: @subtext0;
    --ds-gray-900-value: #rgbify(@subtext0) [];
    --ds-gray-1000: @text;
    --ds-gray-1000-value: #rgbify(@text) [];
    --ds-gray-alpha-100: fade(@text, 6%);
    --ds-gray-alpha-200: fade(@text, 9%);
    --ds-gray-alpha-400: @surface0;
    --ds-gray-alpha-900: fade(@text, 61%);

    --themed-hover-bg: @subtext1;

    --ds-red-400: @red;
    --ds-red-800: @red;
    --ds-red-900: lighten(@red, 5%);

    --ds-blue-200: fade(@accent-color, 30%);
    --ds-blue-300: fade(@accent-color, 40%);
    --ds-blue-400: fade(@accent-color, 50%);
    --ds-blue-700: @accent-color;
    --ds-blue-900: @accent-color;

    --tw-gradient-top: transparent;

    svg {
      --geist-stroke: var(--geist-background) !important;
    }

    .geist-disabled img,
    .geist-disabled svg {
      filter: none;
    }

    .styled-scrollbar {
      scrollbar-color: @accent-color transparent;
    }

    .dark\:from-black,
    .from-white {
      --tw-gradient-from: @mantle;
    }

    .shadow,
    .shadow-md,
    .shadow-sm {
      box-shadow: none !important;
    }

    .card-grid_card__S85BZ {
      background: linear-gradient(180deg, @base 0%, @crust 100%);

      &:hover {
        background: linear-gradient(180deg, @base 0%, @mantle 100%);
      }
    }

    [class*="fieldset_footer"] {
      background-color: @base;
    }
  }
}

@-moz-document domain("nextjs.org") {
  :root.dark-theme {
    #catppuccin(@darkFlavor, @accentColor);
  }
  :root.light-theme {
    #catppuccin(@lightFlavor, @accentColor);
  }

  #catppuccin(@lookup, @accent) {
    @rosewater: @catppuccin[@@lookup][@rosewater];
    @flamingo: @catppuccin[@@lookup][@flamingo];
    @pink: @catppuccin[@@lookup][@pink];
    @mauve: @catppuccin[@@lookup][@mauve];
    @red: @catppuccin[@@lookup][@red];
    @maroon: @catppuccin[@@lookup][@maroon];
    @peach: @catppuccin[@@lookup][@peach];
    @yellow: @catppuccin[@@lookup][@yellow];
    @green: @catppuccin[@@lookup][@green];
    @teal: @catppuccin[@@lookup][@teal];
    @sky: @catppuccin[@@lookup][@sky];
    @sapphire: @catppuccin[@@lookup][@sapphire];
    @blue: @catppuccin[@@lookup][@blue];
    @lavender: @catppuccin[@@lookup][@lavender];
    @text: @catppuccin[@@lookup][@text];
    @subtext1: @catppuccin[@@lookup][@subtext1];
    @subtext0: @catppuccin[@@lookup][@subtext0];
    @overlay2: @catppuccin[@@lookup][@overlay2];
    @overlay1: @catppuccin[@@lookup][@overlay1];
    @overlay0: @catppuccin[@@lookup][@overlay0];
    @surface2: @catppuccin[@@lookup][@surface2];
    @surface1: @catppuccin[@@lookup][@surface1];
    @surface0: @catppuccin[@@lookup][@surface0];
    @base: @catppuccin[@@lookup][@base];
    @mantle: @catppuccin[@@lookup][@mantle];
    @crust: @catppuccin[@@lookup][@crust];
    @accent-color: @catppuccin[@@lookup][@@accent];

    article {
      :not(h1, h2, h3, h4) > a {
        color: @accent-color;
      }

      a:hover {
        color: darken(@accent-color, 5%);
      }
    }

    nav {
      /* Vertical line to the left of links */
      a > div.bg-blue-600 {
        background-color: @accent-color;
      }
    }

    button[role="combobox"],
    [data-radix-popper-content-wrapper] {
      --ds-blue-400: @base;
      --ds-purple-400: @base;

      /* App Router icon */
      --ds-blue-700: @blue;

      /* Pages Router icon */
      --ds-purple-700: @mauve;
    }

    /* Syntax higlighting */
    [class*="code-block_pre"] {
      --shiki-token-punctuation: @overlay2;
      --shiki-token-constant: @peach;
      --shiki-token-string: @green;
      --shiki-token-string-expression: @green;
      --shiki-token-comment: @overlay2;
      --shiki-token-keyword: @mauve;
      --shiki-token-parameter: @maroon;
      --shiki-token-function: @blue;
    }

    /* Footer social media icons */
    img[src="/icons/github.svg"] {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.673" viewBox="0 0 16 15.673"><path fill="@{subtext0}" fill-rule="evenodd" d="M7.976 0C3.566 0 0 3.592 0 8.035a8.03 8.03 0 0 0 5.454 7.623c.396.08.541-.173.541-.386 0-.186-.013-.825-.013-1.49-2.219.479-2.681-.958-2.681-.958-.357-.931-.885-1.171-.885-1.171-.726-.492.053-.492.053-.492.806.053 1.228.825 1.228.825.713 1.224 1.862.878 2.324.665.066-.519.277-.878.502-1.078-1.77-.186-3.632-.878-3.632-3.965 0-.878.317-1.596.819-2.155-.079-.2-.357-1.024.079-2.129 0 0 .673-.213 2.192.825a7.7 7.7 0 0 1 1.994-.266c.673 0 1.36.093 1.994.266 1.519-1.038 2.192-.825 2.192-.825.436 1.104.158 1.929.079 2.129.515.559.819 1.277.819 2.155 0 3.087-1.862 3.765-3.645 3.965.291.253.541.732.541 1.49 0 1.078-.013 1.942-.013 2.208 0 .213.145.466.541.386a8.03 8.03 0 0 0 5.454-7.623C15.952 3.592 12.374 0 7.976 0" clip-rule="evenodd"/></svg>'
      );
      content: url("data:image/svg+xml,@{svg}");
    }
    img[src="/icons/x.svg"] {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" fill="none" height="16" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="16"><path fill="@{subtext0}" d="M16.99 0h3.308l-7.227 8.26 8.502 11.24h-6.657l-5.214-6.817L3.736 19.5H.426l7.73-8.835L0 0h6.826l4.713 6.231zm-1.161 17.52h1.833L5.83 1.876H3.863z" stroke="none"/></svg>'
      );
      content: url("data:image/svg+xml,@{svg}");
    }

    .group:hover .dark\:group-hover\:bg-white {
      background-color: @subtext1;
    }
    .group:hover .dark\:group-hover\:text-black {
      color: @crust;
    }

    [data-docs-container] code:not(pre code),
    [data-docs-table-of-contents] code:not(pre code) {
      border-color: @surface0 !important;
      background-color: @mantle !important;
    }

    td a {
      color: @accent-color;
    }

    .animated-optimizations_window__CjM85 {
      background: @mantle !important;
    }

    .features_card__xYla9,
    .foundation_root__wm0ez,
    .foundation_card__v7VKB {
      background: @base;
    }

    .foundation_cpu__ciXpm {
      background: @mantle;
    }

    .header_header__zJOD0 {
      background: @base;
    }

    .mute,
    .subtitle {
      color: @subtext0;
    }

    .mobile-menu_mobileMenu__xqbOP a.mobile-menu_selected__G55UL {
      color: var(--geist-background);
    }

    .dark-theme .dark\:bg-black\/50 {
      background-color: var(--geist-background);
    }

    .gradient,
    .gradient-text {
      --text-gradient: @text;
    }

    .bg-background-200,
    .bg-vercel-100 {
      background-color: @mantle;
    }

    .guides_book__j9vP8 {
      background: @base !important;
    }

    .guides_bind__9COxI {
      background: @overlay0 !important;
    }

    .bg-gray-50 {
     ...

Reviews

No reviews yet.