/* ==UserStyle==
@name PythonAnywhere Catppuccin
@namespace github.com/catppuccin/userstyles/styles/pythonanywhere
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pythonanywhere
@version 2025.09.06
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pythonanywhere/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apythonanywhere
@description Soothing pastel theme for PythonAnywhere
@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== */
@import "https://userstyles.catppuccin.com/lib/lib.less";
@-moz-document domain("www.pythonanywhere.com"),
domain("eu.pythonanywhere.com"),
domain("blog.pythonanywhere.com") {
@import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css");
@import (css)
url("https://chroma.catppuccin.com/@{lightFlavor}-chroma-style.css")
(prefers-color-scheme: light);
@import (css)
url("https://chroma.catppuccin.com/@{darkFlavor}-chroma-style.css")
(prefers-color-scheme: dark);
:root {
@media (prefers-color-scheme: light) {
#catppuccin(@lightFlavor);
}
@media (prefers-color-scheme: dark) {
#catppuccin(@darkFlavor);
}
}
#catppuccin(@flavor) {
#lib.palette();
#lib.css-variables();
color-scheme: if(@flavor = latte, light, dark);
::selection {
background-color: fade(@accent, 30%);
}
input,
textarea {
&::placeholder {
color: @subtext0; // TODO: For some reason this (explicitly?) doesn't set !important like our template defaults do/did.
}
}
/* Ace file editor */
.ace_editor {
background-color: @crust;
color: @text;
.ace_gutter,
.ace_gutter-cell {
background: @mantle;
color: @overlay1;
}
.ace_print-margin {
background: @mantle;
}
.ace_marker-layer {
.ace_active-line {
background-color: fade(@yellow, 20%);
}
.highlight-line-error {
background-color: fade(@red, 20%);
}
.ace_bracket {
border-color: @overlay1;
}
}
.ace_doctype {
color: @mauve;
}
.ace_cursor,
.ace_xml.ace_text {
color: @text;
}
.ace_heading {
&.ace_1,
&.ace_1 + .ace_heading {
color: @red;
}
&.ace_2,
&.ace_2 + .ace_heading {
color: @peach;
}
&.ace_3,
&.ace_3 + .ace_heading {
color: @yellow;
}
&.ace_4,
&.ace_4 + .ace_heading {
color: @green;
}
&.ace_5,
&.ace_5 + .ace_heading {
color: @blue;
}
&.ace_6,
&.ace_6 + .ace_heading {
color: @mauve;
}
}
.ace_list {
color: @text;
&.ace_markup {
color: @sky;
}
}
.ace_marker-layer .ace_selection {
background: fade(@accent, 30%);
}
.ace_fold {
background-color: @surface0;
border-color: @surface1;
}
.ace_constant.ace_language,
.ace_keyword,
.ace_meta {
color: @mauve;
}
.ace_xml,
.ace_support.ace_class,
.ace_support.ace_type {
color: @yellow;
}
.ace_line .ace_identifier:not(:first-of-type),
.ace_entity.ace_name.ace_function,
.ace_constant {
color: @blue;
}
.ace_paren,
.ace_variable.ace_language {
color: @red;
}
.ace_constant.ace_numeric {
color: @peach;
}
.ace_entity.ace_other.ace_attribute-name,
.ace_support.ace_constant,
.ace_support.ace_function {
color: @teal;
}
.ace_entity.ace_name.ace_tag,
.ace_variable {
color: @blue;
}
.ace_storage {
color: @peach;
}
.ace_string {
color: @green;
}
.ace_comment {
color: @overlay2;
}
.ace_indent-guide {
@svg: escape(
''
);
background-image: url("data:image/svg+xml;utf8,@{svg}");
}
}
.ace_tooltip {
background-color: @crust;
color: @text;
border-color: @surface0;
}
#ace_settingsmenu {
background-color: @mantle;
box-shadow: none;
color: @subtext0;
}
#kbshortcutmenu {
background-color: @mantle;
box-shadow: none;
.ace_optionsMenuEntry {
&:hover,
&:focus {
background-color: @base;
}
}
&,
.ace_optionsMenuCommand {
color: @subtext0;
}
.ace_optionsMenuKey {
color: @accent;
}
}
/* Console */
x-screen {
background-color: @base !important;
color: @text !important;
}
.cursor-node {
border-color: @accent !important;
&[focus="true"] {
background-color: @accent !important;
}
}
/* $ prompt character */
[style*="color: rgb(0, 186, 19);"] {
color: @green !important;
}
/* ANSI colors */
x-row span {
/* Black & Bright Black */
&[style^="color: rgb(0, 0, 0);"] {
color: if(@flavor = latte, @subtext1, @surface1) !important;
}
&[style*="background-color: rgb(0, 0, 0);"] {
background-color: if(@flavor = latte, @subtext1, @surface1) !important;
}
&[style^="color: rgb(85, 87, 83);"] {
color: if(@flavor = latte, @subtext1, @surface2) !important;
}
&[style*="background-color: rgb(85, 87, 83);"] {
background-color: if(@flavor = latte, @subtext1, @surface2) !important;
}
/* Red and Bright Red */
&[style^="color: rgb(204, 0, 0);"],
&[style^="color: rgb(239, 41, 41);"] {
color: @red !important;
}
&[style*="background-color: rgb(204, 0, 0);"],
&[style*="background-color: rgb(239, 41, 41);"] {
background-color: @red !important;
}
/* Dim Red */
&[style^="color: rgb(136, 0, 0);"] {
color: fade(@red, 80%) !important;
}
/* Green and Bright Green */
&[style^="color: rgb(78, 154, 6);"],
&[style^="color: rgb(0, 186, 19);"] {
color: @green !important;
}
&[style*="background-color: rgb(78, 154, 6);"],
&[style*="background-color: rgb(0, 186, 19);"] {
background-color: @green !important;
}
/* Dim Green */
&[style^="color: rgb(52, 103, 4);"] {
color: fade(@green, 80%) !important;
}
/* Yellow and Bright Yellow */
&[style^="color: rgb(196, 160, 0);"],
&[style^="color: rgb(252, 233, 79);"] {
color: @yellow !important;
}
&[style*="background-color: rgb(196, 160, 0);"],
&[style*="background-color: rgb(252, 233, 79);"] {
background-color: @yellow !important;
}
/* Dim Yellow */
&[style^="color: rgb(131, 107, 0);"] {
color: fade(@yellow, 80%) !important;
}
/* Blue and Bright Blue */
&[style^="color: rgb(52, 101, 164);"],
&[style^="color: rgb(114, 159, 207);"] {
color: @blue !important;
}
&[style*="background-color: rgb(52, 101, 164);"],
&[style*="background-color: rgb(114, 159, 207);"] {
background-color: @blue !important;
}
/* Dim Blue */
&[style^="color: rgb(35, 67, 109);"] {
color: fade(@blue, 80%) !important;
}
/* Pink and Bright Pink */
&[style^="color: rgb(117, 80, 123);"],
&[style^="color: rgb(242, 0, 203);"] {
color: @pink !important;
}
&[style*="background-color: rgb(117, 80, 123);"],
&[style*="background-color: rgb(242, 0, 203);"] {
background-color: @pink !important;
}
/* Dim Pink */
&[style^="color: rgb(78, 53, 82);"] {
color: fade(@pink, 80%) !important;
}
/* Teal and Bright Teal */
&[style^="color: rgb(6, 152, 154);"],
&[style^="color: rgb(0, 181, 189);"] {
color: @teal !important;
}
&[style*="background-color: rgb(6, 152, 154);"],
&[style*="background-color: rgb(0, 181, 189);"] {
background-color: @teal !important;
}
/* Dim Teal */
&[style^="color: rgb(4, 101, 103);"] {
color: fade(@teal, 80%) !important;
}
/* White */
&[style^="color: rgb(211, 215, 207);"] {
color: if(@flavor = latte, @surface2, @subtext1) !important;
}
&[style*="background-color: rgb(211, 215, 207);"] {
background-color: if(@flavor = latte, @surface2, @subtext1) !important;
}
/* Bright White */
&[style^="color: rgb(238, 238, 236);"] {
color: if(@flavor = latte, @surface1, @subtext0) !important;
}
&[style*="background-color: rgb(238, 238, 236);"] {
background-color: if(@flavor = latte, @surface1, @subtext0) !important;
}
/* Dim White */
&[style^="color: rgb(141, 143, 138);"] {
color: fade(if(@flavor = latte, @surface2, @subtext1), 80%) !important;
}
}
#terminal div {
&[style*="color: rgb(16, 16, 16);"] {
color: @text !important;
}
&[style*="background-color: rgb(240, 240, 240);"] {
background-color: @crust !important;
}
}
body,
.dark {
background-color: @base;
color: @text;
}
a {
&,
&:hover,
&:focus {
color: @accent;
}
}
hr,
pre {
border-color: @surface0;
}
small,
.small {
color: @subtext0;
}
input,
button:not(.close, [class*="btn"], [data-toggle="dropdown"]) {
background-color: @crust;
border-color: @surface0;
&:hover,
&:focus {
background-color: @mantle;
}
i.glyphicon {
pointer-events: none;
}
}
blockquote {
border-color: @surface0;
footer,
small,
.small {
color: @subtext0;
}
}
.footer p {
color: @text;
}
.gsc-modal-background-image {
background-color: @base;
}
.gsc-results-wrapper-overlay {
background-color: @mantle;
color: @subtext0;
}
input.gsc-input,
.gsc-input-box,
.gsc-input-box-hover,
.gsc-input-box-focus {
border-color: @surface0;
}
.gsc-completion-container {
background-color: @crust;
border-color: @surface0;
}
.gsc-completion-selected {
background-color: @mantle;
}
input.gsc-input {
background-color: @mantle;
}
.gsc-input-box,
.gsc-results {
background-color: @mantle;
}
.gsc-option-menu-item-highlighted {
background-color: @base;
color: @text;
}
.gsc-selected-option-container {
background-color: @crust;
color: @text;
border-color: @surface0;
}
.gsc-webResult.gsc-result {
border-color: @surface0;
background-color: @mantle;
}
.gsc-search-button-v2 {
&,
&:hover,
&:focus {
border-color: @surface0;
background-color: @crust;
color: @text;
}
svg {
fill: @text;
}
}
.gsc-result-info,
.gsc-orderby-label,
.gsc-option-menu-item {
color: @subtext0;
}
.gcsc-find-more-on-google {
color: @accent;
}
.gcsc-find-more-on-google-magnifier {
fill: @accent;
}
.gsc-results .gsc-cursor-box .gsc-cursor-page {
color: @text;
background-color: unset;
}
.gsc-control-cse .gsc-option-menu {
background-color: @crust;
}
.gs-webResult div.gs-visibleUrl {
color: @subtext0;
}
.gs-webResult.gs-result a.gs-title {
&,
&:hover,
&:focus,
b {
color: @accent;
}
}
.gs-webResult .gs-snippet {
color: @text;
}
.badge {
background-color: @crust;
&:hover,
&:focus {
background-color: @mantle;
}
}
.dashboard-panel__headline a {
text-decoration-color: @accent;
}
.dashboard-columns {
border-top-color: @surface0;
&::before {
background-color: @surface0;
}
.row > div {
border-color: @surface0;
}
}
.pagination > li {
> span,
> a {
background-color: @crust;
border-color: @surface0;
color: @text;
&:hover,
&:focus {
background-color: @mantle;
}
}
}
textarea {
background-color: @crust;
outline-color: @surface0;
border-color: none;
outline-style: solid;
&:focus {
outline-color: @accent;
}
}
.jumbotron {
background-color: @mantle;
}
.jumbotron > hr {
border-top-color: @mantle;
}
.top-nav {
background: @crust;
li a,
li button.btn-link {
color: @text;
}
button:focus,
a:focus,
li a:focus {
background-color: @crust;
}
}
.err {
border-color: @red;
}
.btn-success,
.open > .dropdown-toggle.btn-success {
&,
&:focus,
&.focus,
&:active,
&.active,
&:hover {
color: @mantle;
background-color: @green;
border-color: @surface0;
}
}
.btn-success .badge {
color: @green;
background-color: @crust;
}
tr.hoverable:hover {
background-color: @mantle;
}
td {
&.file_size,
&.file_timestamp {
color: @subtext0;
}
}
span[style="color: blue;"] {
color: @text !important;
}
[style="color: #888"],
[style="color: #444"] {
color: @text !important;
}
.btn-info,
.btn-primary,
.open > .dropdown-toggle.btn-info,
.open > .dropdown-toggle.btn-primary {
&,
&:focus,
&.focus,
&:active,
&.active,
&:hover {
color: @base;
background-color: @accent;
border-color: @surface0;
}
}
.label-primary {
background-color: @accent;
color: @crust;
}
.label-info {
background-color: @accent;
color: @crust;
}
.label-danger {
background-color: @red;
color: @crust;
}
.btn-danger {
background-color: @red;
border-color: @red;
color: @crust;
&:hover,
&:focus {
background-color: darken(@red, 5%);
color: @mantle;
}
}
.btn-warning {
background-color: @yellow;
border-color: @yellow;
color: @mantle;
&:hover,
&:focus {
background-color: darken(@yellow, 5%);
color: @mantle;
}
}
.edit_value {
color: @accent;
}
.btn-info .badge,
.btn-primary .badge {
color: @accent;
background-color: @crust;
}
.alert-success,
.alert-info,
.alert-warning,
.alert-danger {
border-color: @surface0;
&,
small {
color: @base;
}
button {
background-color: unset;
}
hr {
border-top-color: @surface0;
}
a {
color: @base;
text-decoration: underline;
}
.close {
&,
&:hover,
&:focus {
color: @crust;
}
}
}
.alert-success {
background-color: @green;
}
.alert-info {
background-color: @accent;
}
.alert-warning {
background-color: @yellow;
}
.alert-danger {
background-color: @red;
}
.close {
opacity: 100%;
text-shadow: none;
&,
&:hover,
&:focus {
color: @text;
background: none;
}
}
.form-control {
color: @text;
background-color: @crust;
border-color: @surface0;
box-shadow: inset 0 1px 1px @surface0;
&:focus {
border-color: @surface0;
box-shadow: inset 0 1px 1px @surface0;
}
&[disabled],
&[readonly] {
background-color: @mantle;
}
}
.help-block {
color: @text;
}
.pricing_table ul {
background-color: @base;
}
.pricing_table ul li {
background: @mantle;
}
.pricing_table ul li:first-child,
.account_type_header {
color: @text;
}
.sub_and_dark_blue,
.scheduled_task:not(.enabled) {
color: @subtext0;
}
#id_initializing_mysql_spinner {
background-color: @crust !important;
color: @text;
}
.directory_listing_table i.pale {
color: @subtext0;
opacity: 100%;
}
.pricing_table ul.Free li {
background-color: @mantle;
}
.col-md-12 {
div[style*="background-color"] {
background-color: @mantle !important;
}
h1[style*="color"] {
color: @text !important;
}
}
.table {
background-color: @base;
th,
td {
border-top-color: @surface0;
}
> thead th {
border-bottom-color: @surface0;
}
.success,
.info,
.warning,
.danger {
background-color: @base;
&,
td,
th {
&,
&:hover {
background-color: @base;
}
}
}
td.active,
th.active,
&.active td,
&.active th {
background-color: @mantle;
}
}
.table-bordered {
border-color: @surface0;
th,
td {
border-color: @surface0;
}
}
.table-striped > tbody > tr:nth-of-type(odd),
.table-hover > tbody > tr:hover {
background-color: @mantle;
}
.highlighted_feature_text {
color: @green;
}
.text-muted {
color: @subtext0;
}
.modal-header {
border-bottom-color: @surface0;
}
.modal-content {
background-color: @base;
border-color: @surface0;
box-shadow: 0 3px 9px @crust;
}
.modal-backdrop {
background-color: @crust;
}
.directories_listing_group h4,
.page-header,
.gsc-above-wrapper-area,
.nav-tabs,
.property_group_header {
border-bottom-color: @surface0;
}
.nav-tabs a {
&:hover,
&:focus {
border-color: @surface0 !important;
}
}
.popover {
background-color: @mantle;
border-color: @surface0;
box-shadow: none;
&.top > .arrow {
&,
&::after {
border-top-color: @mantle;
}
}
&.right > .arrow {
&,
&::after {
border-right-color: @mantle;
}
}
&.left > .arrow {
&,
&::after {
border-left-color: @mantle;
}
}
&.bottom > .arrow {
&,
&::after {
border-bottom-color: @mantle;
}
}
}
.popover-title {
background-color: @mantle;
border-bottom-color: @surface0;
}
.modal-footer {
border-top-color: @surface0;
}
.unsorted {
color: @subtext0;
}
.sorted-up,
.sorted-down {
color: @accent;
}
.ui-widget-content {
border-color: @surface0;
background: @mantle;
color: @text;
}
.ui-state-default {
border-color: @surface0;
background: @surface1;
color: @text;
}
.bootstrap-switch {
border-color: @surface0;
&.bootstrap-switch-focused {
border-color: @surface0;
box-shadow: none;
}
.bootstrap-switch-label {
color: @text;
background-color: @surface0;
}
.bootstrap-switch-handle-off,
.bootstrap-switch-handle-on {
color: @text;
background-color: @crust;
&.bootstrap-switch-success,
&.bootstrap-switch-warning,
&.bootstrap-switch-danger,
&.bootstrap-switch-primary {
color: @base;
}
&.bootstrap-switch-success {
background-color: @green;
}
&.bootstrap-switch-warning {
background-color: @yellow;
}
&.bootstrap-switch-danger {
background-color: @red;
}
&.bootstrap-switch-primary {
background-color: @accent;
}
}
}
.tooltip-inner {
color: @text;
background-color: @crust;
}
.tooltip {
&.right .tooltip-arrow {
border-right-color: @crust;
}
&.left .tooltip-arrow {
border-left-color: @crust;
}
&.top,
&.top-left,
&.top-right {
.tooltip-arrow {
border-top-color: @crust;
}
}
&.bottom,
&.bottom-left,
&.bottom-right {
.tooltip-arrow {
border-bottom-color: @crust;
}
}
}
.has-error {
.help-block,
.control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline,
label {
color: @red;
}
}
.success-stories-container {
background-color: @mantle;
color: @text;
h3 {
color: @text;
}
}
.gsc-control-cse {
border-color: @surface0;
background-color: @base;
}
.post_metadata {
color: @subtext0;
}
.ui-widget-header {
background-color: @base;
border-color: @surface0;
color: @text;
}
.fullscreen-main-navbar {
background-color: @mantle;
}
.dropdown-menu {
background-color: @mantle;
border-color: @surface0;
box-shadow: none;
> li > a {
color: @text;
&:hover,
&:focus {
background-color: @base;
}
}
}
.fullscreen-main-navbar button.btn-link {
&:hover,
&:focus {
background-color: @base;
}
}
.navbar-default .btn-link {
&,
&:hover,
&:focus {
color: @text;
}
}
.btn.btn-default {
border-color: @accent;
color: @accent;
background-color: @base;
&:hover,
&:focus {
background-color: @surface0;
}
}
.well {
background-color: @mantle;
border-color: @surface0;
}
.icon-bar {
background-color: @text;
}
.nav-tabs > li,
.nav-pills > li {
> a {
border-color: @surface0;
&,
&:hover,
&:focus {
color: @accent;
}
}
&.active > a {
&,
&:focus {
background-color: @mantle;
}
&:hover,
&:focus {
background-color: @crust;
}
}
&:not(.active) > a {
&:hover,
&:focus {
background-color: @mantle;
}
}
}
.ui-state-highlight {
border-color: @accent;
background: @accent;
color: @base;
}
.primary-navbar {
a,
form,
.active {
background-color: @base;
}
form .btn-link {
color: @accent;
}
.active a {
color: @text;
}
}
.post,
.topic {
background-color: @mantle;
border-color: @surface0;
}
.editable-click {
&,
&:hover,
&:focus {
border-bottom-color: @subtext0;
}
}
[style*="background: whitesmoke;"] {
background-color: @mantle !important;
}
@media (min-width: 768px) {
.modal-content {
box-shadow: 0 5px 15px @crust;
}
}
@media screen and (max-width: 767px) {
.table-responsive {
border-color: @surface0;
}
}
#id_main_screenshot {
box-shadow: 12px 12px 29px @surface1;
}
#id_hosting_details,
#id_education_details {
&,
h1,
h2,
h3 {
background-color: @mantle;
color: @text;
}
.btn {
color: @crust !important;
}
a {
color: @accent;
}
}
#id_develop_anywhere_details {
background-color: @base;
}
#id_support_details {
background-color: @base;
a {
color: @accent !important;
}
}
#id_company_info_strip {
color: @text;
}
.console_table .info_tooltip {
color: @accent;
}
#id_console_name {
color: @text;
}
.beginner_pane,
.pricing_pane {
background-color: @mantle;
}
#id_error_message,
#id_login_error {
color: @red;
}
.post_preview {
background-color: @base;
h3 {
color: @text;
}
}
.teacher-navbar {
background-color: @mantle;
color: @text;
}
.nav > li > a:focus {
background: none;
}
/* blog */
.site-header {
background-color: @crust;
}
h1,
h2,
h3,
h4,
code {
color: @text !important;
}
button code {
background: none !important;
color: inherit !important;
}
p,
.tipue_search_content_text,
.tipue_search_content_bold,
#tipue_search_error,
#tipue_search_results_count,
.post-meta {
color: @subtext0;
}
.navbar-default .navbar-toggle {
&:hover,
&:focus {
background-color: @mantle;
}
}
button:not(.btn-link, .btn, [data-toggle="dropdown"]),
.pagination a,
#tipue_search_foot_boxes li.current,
#tipue_search_foot_boxes li a {
background-color: @accent;
color: @crust;
border-color: @accent;
}
button:disabled,
.pagination .disabled {
background-color: darken(@accent, 5%);
border-color: darken(@accent, 5%);
}
#tipue_search_input,
form.navbar-search {
background-color: @mantle;
color: @text;
}
svg {
fill: @subtext0;
}
.fa-at,
.fa-twitter,
.fa-rss {
filter: @text-filter;
}
.hide_search_icon path {
stroke: @subtext0;
}
footer,
footer .wrap {
background-color: @crust;
color: @text;
border-color: @crust;
}
.pagination a,
#tipue_search_foot_boxes li.current,
#tipue_search_foot_boxes li a {
background-color: @accent;
color: @crust;
border-color: @accent;
}
img[src*="ssl.gstatic.com/ui/v1/disclosure/small-grey-disclosure-arrow-down.png"],
img[src*="/static/anywhere/images/staff.png"],
img[src*="/static/glyphicons/glyphicons_"],
img[src="/static/anywhere/images/PA-logo-snake-only.svg"],
.testimonial-content,
.quickstart_logo:not([src$="/django-logo-negative-small.png"]),
.ui-icon {
filter: @text-filter;
}
img[src*="/static/anywhere/images/cross.png"] {
filter: @red-filter;
}
img[src*="/static/anywhere/images/tick.png"] {
filter: @green-filter;
}
.quickstart_logo[src$="/django-logo-negative-small.png"] {
// Original image has background - can't filter
@svg: escape(
''
);
content: url("data:image/svg+xml,@{svg}");
}
img[src$="/images/PA-logo.svg"] {
@svg: escape(
''
);
content: url("data:image/svg+xml;utf8,@{svg}");
}
}
}