Skip to content

Gyazo.com Dark Mode by Nick2bad4u

Mirrored from https://github.com/Nick2bad4u/UserStyles/raw/refs/heads/main/Gyazo-DarkMode.user.css

Screenshot of Gyazo.com Dark Mode

Details

AuthorNick2bad4u

LicenseUnLicense

Categorygyazo

Created

Updated

Size23 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Gyazo Dark Mode (Purple Accents)

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         Gyazo.com Dark Mode
@version      2.1
@namespace    typpi.online
@description  Gyazo Dark Mode (Purple Accents)
@author       Nick2bad4u
@license      UnLicense
@homepageURL  https://github.com/Nick2bad4u/UserStyles
==/UserStyle== */
@-moz-document domain("gyazo.com") {
	#react-root
		> div:nth-child(2)
		> div
		> div
		> div
		> div.image-infos
		> div.related-info-box-component
		> div
		> div.related-images-grid-view.related-info,
	.captured-info-value,
	.content-block,
	.edit-box-component,
	.footer-block,
	.grid-view,
	.grid-view-cell,
	.grid-view-cell-inner-image,
	.header-block,
	.image-desc-display.placeholder,
	.image-infos,
	.images-grid-view,
	.main-block-stage,
	.side-block-items,
	.sidebar-block {
		background-color: #121212 !important;
		color: #e0e0e0 !important;
	}

	#popover > h3,
	.header-block.explorer-header-block,
	a,
	button,
	html,
	img,
	input,
	span {
		background-color: #121212 !important;
		color: #bb86fc !important;
	}

	#global-dropdown-menu
		> div.popover-content
		> ul
		> li:first-child
		> a
		> span.account-item-check
		> svg,
	#global-dropdown-menu
		> div.popover-content
		> ul
		> li:nth-child(n)
		> a
		> svg
		> path:nth-child(n),
	#like > svg,
	#like > svg > path,
	#popover
		> div.popover-content
		> div
		> div
		> div
		> svg,
	.reblog-control > a > svg > path:nth-child(n),
	#react-root
		> div.header-block.explorer-header-block
		> div.explorer-action-btn-toolbar
		> div.explorer-action-btn-group
		> button.edit-options-button.btn.explorer-action-btn.explorer-action-btn-dark
		> svg,
	#react-root
		> div.header-block.explorer-header-block
		> div.explorer-action-btn-toolbar
		> div.explorer-action-btn-group
		> button
		> svg,
	#react-root
		> div.header-block.explorer-header-block
		> div.explorer-action-btn-toolbar
		> div.explorer-action-btn-group
		> div.upload-modal.captures-upload-modal.show
		> button
		> svg,
	#react-root
		> div.header-block.explorer-header-block
		> div.search-box
		> div
		> div.search-box-panel
		> div.search-history-list
		> div
		> div:nth-child(n)
		> button.switch-save
		> svg:hover,
	#react-root
		> div:nth-child(2)
		> div
		> div
		> div
		> div.image-infos
		> div.edit-box-component
		> div
		> div
		> div
		> div.image-ocrinfo-component
		> div
		> div.ocr-desc-buttons
		> div
		> div
		> button
		> svg,
	#react-root
		> div:nth-child(n)
		> div
		> div
		> aside
		> div
		> div
		> ul
		> *
		> a
		> span.toplevel-item-kamon
		> svg
		> path,
	#react-root
		> div:nth-child(n)
		> div
		> div
		> aside
		> div
		> div
		> ul
		> li.new-collection-field
		> span
		> span
		> svg
		> path,
	#react-root
		> div
		> div
		> div
		> div.transform-page-header
		> div
		> button
		> svg,
	#react-root
		> div
		> div
		> div
		> div.transform-page-header
		> div
		> div
		> button:nth-child(n)
		> svg
		> path,
	[id^='headlessui-menu-button-'] > svg > path,
	[id^='headlessui-menu-item-'] > svg,
	.pro .features h2,
	body
		> div.content
		> section.features-table
		> div
		> table:nth-child(n)
		> tbody:nth-child(3)
		> tr:nth-child(n)
		> td:nth-child(n)
		> div
		> kamon-lp {
		fill: #bb86fc;
	}

	#global-dropdown-menu
		> div.popover-content
		> ul
		> li:first-child
		> a
		> span.account-item-check
		> svg:hover,
	#global-dropdown-menu
		> div.popover-content
		> ul
		> li:nth-child(13)
		> button
		> svg
		> path,
	#global-dropdown-menu
		> div.popover-content
		> ul
		> li:nth-child(n)
		> a
		> svg
		> path,
	#react-root
		> div.header-block.explorer-header-block
		> div.explorer-action-btn-toolbar
		> div.explorer-action-btn-group
		> button.edit-options-button.btn.explorer-action-btn.explorer-action-btn-dark
		> svg:hover,
	#react-root
		> div.header-block.explorer-header-block
		> div.explorer-action-btn-toolbar
		> div.explorer-action-btn-group
		> button
		> svg:hover,
	#react-root
		> div.header-block.explorer-header-block
		> div.explorer-action-btn-toolbar
		> div.explorer-action-btn-group
		> div.upload-modal.captures-upload-modal.show
		> button:hover
		> svg,
	#react-root
		> div:nth-child(2)
		> div
		> div
		> aside
		> div
		> div
		> ul
		> li.toplevel-item.collection-list
		> ul
		> li:nth-child(n)
		> div
		> button
		> svg,
	#react-root
		> div:nth-child(2)
		> div
		> div
		> div
		> div.image-infos
		> div.edit-box-component
		> div
		> div
		> div
		> div.image-ocrinfo-component
		> div
		> div.ocr-desc-buttons
		> div
		> div
		> button
		> svg:hover,
	#react-root
		> div:nth-child(n)
		> div
		> div
		> aside
		> div
		> div
		> ul
		> :hover
		> a
		> span.toplevel-item-kamon
		> svg
		> path,
	#react-root
		> div:nth-child(n)
		> div
		> div
		> aside
		> div
		> div
		> ul
		> li.new-collection-field
		> span:hover
		> span
		> svg
		> path,
	#react-root
		> div
		> div
		> div
		> div.transform-page-header
		> div
		> button:hover
		> svg,
	#react-root
		> div
		> div
		> div
		> div.transform-page-header
		> div
		> div
		> button:hover:nth-child(n)
		> svg
		> path,
	[id^='headlessui-menu-button-']
		> svg
		> path:hover,
	[id^='headlessui-menu-item-'] > svg:hover {
		fill: white;
	}

	.new-collection-field > span > span > svg,
	.tags > a > span.toplevel-item-kamon > svg,
	.visits > a > span.toplevel-item-kamon > svg,
	.captures.toplevel-item-active
		> a
		> span.toplevel-item-kamon
		> svg {
		fill: Black;
	}

	#react-root
		> div.header-block.explorer-header-block
		> div.explorer-action-btn-toolbar
		> a {
		background-color: #1212126b !important;
	}

	#global-dropdown-menu
		> div.popover-content
		> ul
		> li:nth-child(13)
		> button
		> span:hover,
	#global-dropdown-menu
		> div.popover-content
		> ul
		> li:nth-child(n)
		> a:hover,
	#global-dropdown-menu
		> div.popover-content
		> ul
		> li:nth-child(n)
		> a
		> span:hover {
		color: #fff !important;
	}

	.images-show
		.bottom.interactive-popover
		> .arrow:after,
	.popover.bottom > .arrow:after {
		border-bottom-color: #bb86fc;
	}

	.explorer-action-btn.dropdown-toggle::after {
		display: inline-block;
		margin-right: -8px;
		background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Y2FyZXQtZG93bjwvdGl0bGU+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBkPSJNMTEuNzc3Mzk1MywxNC43MzAzOTUzIEMxMS41MjMzOTUzLDE0LjczMDM5NTMgMTEuMjY5Mzk1MywxNC42MzQzOTUzIDExLjA3NDM5NTMsMTQuNDQxMzk1MyBMNy4yOTczOTUyOSwxMC43MTEzOTUzIEM2LjkwNDM5NTI5LDEwLjMyMzM5NTMgNi45MDAzOTUyOSw5LjY5MDM5NTI5IDcuMjg4Mzk1MjksOS4yOTczOTUyOSBDNy42NzYzOTUyOSw4LjkwNDM5NTI5IDguMzEwMzk1MjksOC45MDAzOTUyOSA4LjcwMjM5NTI5LDkuMjg4Mzk1MjkgTDExLjc3NzM5NTMsMTIuMzI1Mzk1MyBMMTQuODUxMzk1Myw5LjI4ODM5NTI5IEMxNS4yNDUzOTUzLDguOTAwMzk1MjkgMTUuODc4Mzk1Myw4LjkwNDM5NTI5IDE2LjI2NjM5NTMsOS4yOTczOTUyOSBDMTYuNjU0Mzk1Myw5LjY5MDM5NTI5IDE2LjY1MDM5NTMsMTAuMzIzMzk1MyAxNi4yNTczOTUzLDEwLjcxMTM5NTMgTDEyLjQ4MDM5NTMsMTQuNDQxMzk1MyBDMTIuMjg1Mzk1MywxNC42MzQzOTUzIDEyLjAzMTM5NTMsMTQuNzMwMzk1MyAxMS43NzczOTUzLDE0LjczMDM5NTMiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJjYXJldC1kb3duIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjQkI4NkZDIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHVzZSBpZD0iTWFzayIgZmlsbD0iI0JCOThGQyIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICA8L2c+Cjwvc3ZnPg==);
		width: 24px;
		height: 24px;
		content: '';
	}

	.button,
	.form-control,
	.grid-cell,
	.input,
	.modal,
	.modal-content,
	.popup,
	.related-images-grid-view.related-info,
	.tooltip {
		border: 1px solid #333 !important;
		background-color: #1e1e1e !important;
		color: #e0e0e0 !important;
	}

	.faq.static-page-faq
		> ul
		> li.bottom
		> div.question:hover,
	.faq.static-page-faq
		> ul
		> li:nth-child(n)
		> div.question:hover,
	.post > div > div > h2:nth-child(n),
	.TOTVG659Y6UvGA4WzVD1 > form > input,
	.card.medium-card,
	.container-close-date-images.related-info,
	.images-after-origin,
	.metadata,
	.related-info-box-component,
	.side-block .side-block-items .sub,
	.testing-swap-image-container
		.metadata-baseinfo,
	body > div.content > div:nth-child(2) > h1,
	body > div.content > div:nth-child(n) > h2,
	body > div.content > section.faq > div > h2,
	body
		> div.content
		> section.features-table
		> div
		> table:nth-child(n)
		> thead
		> tr
		> th
		> div,
	.title,
	.row > div:nth-child(n) > div {
		color: #bb86fc !important;
	}

	.header {
		background: #121212;
	}

	:root {
		--body-background: #121212;
	}

	.query-input {
		border: 1px #bb86fc dashed;
		border-radius: 5px;
	}

	.speech-button {
		border: 1px #bb86fc dashed;
	}

	.speech-button:hover {
		border: 1px #f00 dashed;
	}

	.footer-block,
	.header-block {
		border-bottom: 1px solid #333 !important;
	}

	.sidebar-block {
		border-right: 1px solid #333 !important;
	}

	.card.medium-card {
		border: 1px solid #333 !important;
		background-color: #1e1e1e !important;
	}

	.metadata-description {
		padding: 10px;
	}

	.captured-info,
	.ocr-icon-block > div,
	.related-info
		> div
		> div
		> span
		> span:first-child,
	.section-headline
		> a
		> span
		> span:first-child {
		margin-left: 10px;
	}

	article,
	aside,
	div:not(
			#react-root
				> div:nth-child(n)
				> div
				> div
				> main
				> div
				> div
				> div
				> div
				> div:nth-child(2)
				> section
				> div:nth-child(n)
				> a
				> div
		):not(.caBpUIyLTfNBwvxfTyDa):not(
			div.k3nzGrC3hEubDzXyOg_r
		),
	footer,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	header,
	li,
	main,
	nav,
	p,
	section,
	table,
	td,
	th,
	ul {
		background-color: #121212;
		color: #e0e0e0;
	}

	#react-root
		> div:nth-child(n)
		> div
		> div
		> main
		> div
		> div
		> div
		> div
		> div:nth-child(n)
		> section
		> div:nth-child(n)
		> div {
		background: #0000 !important;
	}

	.k3nzGrC3hEubDzXyOg_r {
		overflow: unset;
	}

	option,
	select {
		background-color: #1e1e1e !important;
		colo...

Reviews

No reviews yet.