Skip to content

osu color changer by cyperdark

Screenshot of osu color changer

Details

Authorcyperdark

LicenseMIT

Categoryosu

Created

Updated

Size34 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Features:

  • Changing hue
  • Custom profile background (visible only for you)

Notes

v1.4.4

  • Fixed beatmap packs issue

v1.4.3

v1.4.2

v1.4.1

  • fixed dark theme
  • fixed friend list
  • fixed

v1.4.0

  • added new themes
  • added dark theme

v1.3.7

  • Fixes and improvement

v1.3.5

  • Fix some issue
  • Replaced header background

v1.3.4

  • oops

v1.3.3

  • Fixed background issue

v1.3.2

  • Fixed issue with custom nickname

v1.3.1

v1.2.9

  • Always show stats and buttons for beatmaps
  • Highlight for discussion

v1.2.7

  • Added different color for each playmode icon on main page

v1.2.6

v1.2.5

  • Fixed issue fix custom background
  • Added background change to other pages where banner appear

v1.2.4

  • Added toggle for right side chat list

v1.2.3

  • Added compacted^2 mode on friends list

v1.2.2

  • Added option to turn off background on profile page

v1.2.0

  • move to another code base, more options for background

v1.1.3

  • Added shadow to profile block

v1.1.2

  • Added (smth i forgot what)

v1.1.1

  • Added other scrollbar

v1.1.0

v1

  • Release

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name          	osu color changer
@namespace      https://github.com/cyperdark/osu-cc
@author         cyperdark
@version        1.4.33
@license        MIT
@preprocessor   stylus

@var checkbox enable_colors "Enable custom theme" 1

@var select   main_color     'Select theme' {
    'Dark						': '4000deg',
    'Red						*': '0deg',
    'Scarlet					': '10deg',
    'International Orange		': '20deg',
    'Dark Orange				': '30deg',
    'Orange						': '40deg',
    'Gold						': '50deg',
    'Yellow						': '60deg',
    'Electric Lime				': '70deg',
    'Spring Bud					': '80deg',
    'Chartreuse					': '90deg',
    'Bright Green				': '100deg',
    'Harlequin					': '110deg',
    'Lime						': '120deg',
    'Free Speech Green			': '130deg',
    'Malachite					': '140deg',
    'Spring Green				': '150deg',
    'Medium Spring Green		': '160deg',
    'Bright Turquoise			': '170deg',
    'Aqua						': '180deg',
    'Deep Sky Blue				': '190deg',
    'Dodger Blue				': '210deg',
    'Navy Blue					': '220deg',
    'Light Blue					': '230deg',
    'Blue						': '240deg',
    'Dark Blue					': '250deg',
    'Grey purple				': '255deg',
    'Electric Indigo			': '260deg',
    'Indigo						': '270deg',
    'Electric Purple			': '280deg',
    'Psychedelic Purple			': '290deg',
    'Fuchsia					': '300deg',
    'Hot Magenta				': '310deg',
    'Hollywood Cerise			': '320deg',
    'Deep Pink					': '330deg',
    'Razzmatazz					': '340deg',
    'Torch Red					': '350deg',
}


@var color empty_0 "  " #242424

@var checkbox focus_mode "Enable focus mode" 1
@var checkbox focus_mode_cursor "Enable zoom cursor in focus mode" 1

@var color empty_1 "  " #242424

@var checkbox friends_compact "Enable compact mode for friends list" 0
@var checkbox friends_color "Apply theme color for mutual friends" 0


@var color empty_2 "  " #242424

checkbox bg_top_enable "Enable header background" 0
@var checkbox show_button "Always show beatmap buttons" 0
@var checkbox dis_resolve_shadow "Enable color highlighting for comments on the beatmaps discussion page." 0
@var checkbox forum_thing "Highlight the comments of the creator on forum post page" 0
@var checkbox chat_row "Move direct messages to the right side" 0
@var checkbox mode_icon_colors "Add colors for each gamemode icon (pink, blue, green, yellow)" 0


@var color empty_3 "  " #242424

@var checkbox new_profile_fix "Adjust profile (More compact)" 0
@var checkbox badges_inline "Wrap profile badges in one horizontal line" 0
@var checkbox custom_nickname_enable "Enable custom nickname color" 0
@var text custom_nickname "Profile nickname color" "linear-gradient(90deg, rgba(140,102,255,1) 0%, rgba(150,156,255,1) 25%, rgba(178,240,255,1) 67%, rgba(0,212,255,1) 100%)"
@var checkbox disable_nickname_shadow "Disable nickname shadow" 0
@var text me_expand "Size of me section (0 = max size)" 500px


@var color empty_4 "  " #242424

@var checkbox custom_bg "Enable backgrounds" 0
@var checkbox bg_bg_remove "Remove Backgrounds block" 0

@var text bg_max "Background max Height (px, %, em or rem)" "730px"
@var text bg_padding "Background padding (px, %, em or rem)" "20px"
@var text bg_opacity "Background opacity" "1"
@var text bg_round "Background rounding (px, %, em or rem)" "20px"


@var color empty_5 "  " #242424

@var select bg_left_image "BG left image" {
 "Default image":  `"https://i.imgur.com/bOwESaZ.jpg"`,
 "Remove": "rem",
 "Custom": "none",
}
@var text bg_left_image_custom "BG Left url; Example: 'image link' (qoutes important) " `"https://i.imgur.com/bOwESaZ.jpg"`

@var select bg_left_position "BG Left Position" {
 "Custom": "none",
 "Center": "center",
 "Top": "top",
 "Left": "left",
 "Right": "right",
 "Bottom": "bottom",
}
@var text bg_left_position_custom "BG Left Position Custom; Example: 10px 10px or 50% 0%" "98% 50%"

@var select bg_left_size "BG Left Size" {
 "Cover": "cover",
 "Contain": "contain",
 "Custom": "none",
}
@var text bg_left_size_custom "BG Left Size Custom" "Cover"

@var select bg_left_repeat "BG Left Repeat" {
 "No repeat": "no-repeat",
 "Repeat": "repeat",
 "Repeat horizontally": "repeat-x",
 "Repeat vertically": "repeat-y",
 "Round": "round",
 "Space": "space",
}

@var select bg_left_blend "BG Left Blend Mode" {
 "Normal": "normal",
 "Multiply": "multiply",
 "Screen": "screen",
 "Overlay": "overlay",
 "Darken": "darken",
 "Lighten": "lighten",
 "Color dodge": "color-dodge",
 "Color burn": "color-burn",
 "Hard light": "hard-light",
 "Soft light": "soft-light",
 "Difference": "difference",
 "Exclusion": "exclusion",
 "Hue": "hue",
 "Saturation": "saturation",
 "Color": "color",
 "Luminosity": "luminosity",
}


@var color empty_6 "  " #242424


@var select bg_right_image "BG Right image" {
 "Default image":  `"https://i.imgur.com/bOwESaZ.jpg"`,
 "Remove": "rem",
 "Custom": "none",
}
@var text bg_right_image_custom "BG Right url; Example: 'image link' (qoutes important) " `"https://i.imgur.com/bOwESaZ.jpg"`

@var select bg_right_position "BG Right Position" {
 "Custom": "none",
 "Center": "center",
 "Top": "top",
 "Left": "left",
 "Right": "right",
 "Bottom": "bottom",
}
@var text bg_right_position_custom "BG Right Position Custom; Example: 10px 10px or 50% 0%" "0% 50%"

@var select bg_right_size "BG Right Size" {
 "Cover": "cover",
 "Contain": "contain",
 "Custom": "none",
}
@var text bg_right_size_custom "BG Right Size Custom" "Cover"

@var select bg_right_repeat "BG Right Repeat" {
 "No repeat": "no-repeat",
 "Repeat": "repeat",
 "Repeat horizontally": "repeat-x",
 "Repeat vertically": "repeat-y",
 "Round": "round",
 "Space": "space",
}

@var select bg_right_blend "BG Right Blend Mode" {
 "Normal": "normal",
 "Multiply": "multiply",
 "Screen": "screen",
 "Overlay": "overlay",
 "Darken": "darken",
 "Lighten": "lighten",
 "Color dodge": "color-dodge",
 "Color burn": "color-burn",
 "Hard light": "hard-light",
 "Soft light": "soft-light",
 "Difference": "difference",
 "Exclusion": "exclusion",
 "Hue": "hue",
 "Saturation": "saturation",
 "Color": "color",
 "Luminosity": "luminosity",
}

==/UserStyle== */
@-moz-document url-prefix("https://osu.ppy.sh/"),
url-prefix("http://osu.ppy.sh/") {
	// @var checkbox friends_color_ascent "Colors accent for friends list" 0
	
	if enable_colors {
		:root {
			--base-hue: main_color;
			--base-hue-deg: main_color;
		}
	}

	body,
	html {
		scrollbar-color: hsl(main_color, 100%, 70%) #000;
	}
	
	.header-v4__bg-container {
		z-index: -1;
	}
	
	.forum-item:hover .forum-item-stripe span,
 	.forum-topic-entry:hover .forum-item-stripe span {
		display: block;
	}

	.forum-item .forum-item-stripe span,
 	.forum-topic-entry .forum-item-stripe span{
		display: none;
	}
	
	if main_color == '4000deg' {
		:root {
			--hsl-p: 0, 0%, 50%;
			--hsl-h1: 0, 0%, 100%;
			--hsl-h2: 0, 0%, 30%;
			--hsl-c1: 0, 0%, 100%;
			--hsl-c2: 0, 0%, 90%;
			--hsl-l1: 0, 0%, 80%;
			--hsl-l2: 0, 0%, 75%;
			--hsl-l3: 0, 0%, 70%;
			--hsl-l4: 0, 0%, 50%;
			--hsl-d1: 0, 0%, 30%;
			--hsl-d2: 0, 0%, 25%;
			--hsl-d3: 0, 0%, 20%;
			--hsl-d4: 0, 0%, 15%;
			--hsl-d5: 0, 0%, 10%;
			--hsl-d6: 0, 0%, 5%;
			--hsl-f1: 0, 0%, 60%;
			--hsl-b1: 0, 0%, 30%;
			--hsl-b2: 0, 0%, 25%;
			--hsl-b3: 0, 0%, 20%;
			--hsl-b4: 0, 0%, 15%;
			--hsl-b5: 0, 0%, 10%;
			--hsl-b6: 0, 0%, 5%;
			// --colour-pink-hue: 333;
			--hsl-pink-1: 0, 0%, 60%;
			// --hsl-pink-2: var(--colour-pink-hue),var(--c-saturation-2),var(--c-lightness-2);
			// --hsl-pink-3: var(--colour-pink-hue),var(--c-saturation-3),var(--c-lightness-3);
			// --colour-purple-hue: 255;
			--hsl-purple-1: 0, 0%, 60%;
			// --hsl-purple-2: var(--colour-purple-hue),var(--c-saturation-2),var(--c-lightness-2);
			// --hsl-purple-3: var(--colour-purple-hue),var(--c-saturation-3),var(--c-lightness-3);
			// --colour-blue-hue: 200;
			--hsl-blue-1: 0, 0%, 60%;
			// --hsl-blue-2: var(--colour-blue-hue),var(--c-saturation-2),var(--c-lightness-2);
			// --hsl-blue-3: var(--colour-blue-hue),var(--c-saturation-3),var(--c-lightness-3);
			// --colour-green-hue: 125;
			--hsl-green-1: 0, 0%, 60%;
			// --hsl-green-2: var(--colour-green-hue),var(--c-saturation-2),var(--c-lightness-2);
			// --hsl-green-3: var(--colour-green-hue),var(--c-saturation-3),var(--c-lightness-3);
			// --colour-lime-hue: 90;
			// --hsl-lime-1: var(--colour-lime-hue),var(--c-saturation-1),var(--c-lightness-1);
			// --hsl-lime-2: var(--colour-lime-hue),var(--c-saturation-2),var(--c-lightness-2);
			// --hsl-lime-3: var(--colour-lime-hue),var(--c-saturation-3),var(--c-lightness-3);
			// --colour-orange-hue: 45;
			--hsl-orange-1: 0, 0%, 60%;
			// --hsl-orange-2: var(--colour-orange-hue),var(--c-saturation-2),var(--c-lightness-2);
			// --hsl-orange-3: var(--colour-orange-hue),var(--c-saturation-3),var(--c-lightness-3);
			// --colour-red-hue: 360;
			--hsl-red-1: 0, 0%, 60%;
			// --hsl-red-2: var(--colour-red-hue),var(--c-saturation-2),var(--c-lightness-2);
			// --hsl-red-3: var(--colour-red-hue),var(--c-saturation-3),var(--c-lightness-3);
			// --colour-darkorange-hue: 20;
			--hsl-darkorange-1: 0, 0%, 60%;
			// --hsl-darkorange-2: var(--colour-darkorange-hue),var(--c-saturation-2),var(--c-lightness-2);
			// --hsl-darkorange-3: var(--colour-darkorange-hue),var(--c-saturation-3),var(--c-lightness-3);
			
			--beatmapset-graveyard-bg: #000;
			--beatmapset-graveyard-colour: #939393;
			--beatmapset-wip-bg: #FF9966;
			--beatmapset-pending-bg: #FFD966;
			--beatmapset-qualified-bg: #66CCFF;
			--beatmapset-approved-bg: #B3FF66;
			--beatmapset-ranked-bg: #B3FF66;
			--beatmapset-loved-bg: #FF66AB;
		}
		
		.beatmap-basic-stats {
			color: hsl(0, 0%, 100%);
		}

		.beatmap-basic-stats__entry-icon {
			filter: grayscale(1);
		}

		.stacked-bar-chart--beatmap-success-rate .stacked-bar-chart__bar--exit {
			fill: hsl(0, 0%, 100%);
		}

		.stacked-bar-chart--beatmap-success-rate .stacked-bar-chart__bar--fail {
			fill: hsl(0, 0%, 30%);
		}

		.beatmap-scoreboard-table__body-row.beatmap-scoreboard-table__body-row--friend {
			--row-background-color: hsl...

Reviews

No reviews yet.