Colored Cards in the Gallery view - notion.so by pabli

Colored Cards in the Gallery view - notion.so screenshot
Install Get Stylus Write a review

Details

Authorpabli

LicenseMIT

Created

Updated

Categorynotion

Statistics

Learn how we calculate statistics in the FAQ.

Total views

Total installs

Weekly installs

Description

Change the background color of your notes by changing the color of your tags (type Multi-select) in notion.so

Works in Chrome/Edge 105+, Opera 91+ or your browser has to support ':has()' selector.

You can set your own colors in the config or select Google Keep color scheme.

notion so

☕ Support me on ko-fi

Notes

Userstyle doesn't have notes.

History

Daily snapshots of style statistics.

No style history. Come back in a couple of days.

Source code

/* ==UserStyle==
@name           Colored Cards in the Gallery view
@namespace      github.com/pabli24
@version        1.0.0
@description    Change background color of your notes by changing the color of your tags (type Multi-select) in notion.so
@author         Pabli
@homepageURL    https://userstyles.world/style/
@supportURL     https://userstyles.world/style/
@preprocessor   stylus

@var            number   a0         "Works in Chrome/Edge 105+, Opera 91+ or your browser has to support ':has()' selector." [0,0,0,1]

@var            checkbox tot        "Move gallery card titles on top"          0

@var            checkbox ifbg       "Change background color (Dark Mode only)" 0
@var            color    bgc        ""                                         #202124

@var            select   ccs        "Cards Color Sheme"                        ["Default", "Google-Keep", "Custom", "Disabled"]
@var            number   a1         "▼ Custom Card Colors (Dark Mode) ▼"       [1,1,1]
@var            color    dLightGray "Light gray"                               rgb(47, 47, 47)
@var            color    dGray      "Gray"                                     rgb(47, 47, 47)
@var            color    dBrown     "Brown"                                    rgb(54, 40, 34)
@var            color    dOrange    "Orange"                                   rgb(66, 47, 34)
@var            color    dYellow    "Yellow"                                   rgb(64, 51, 36)
@var            color    dGreen     "Green"                                    rgb(35, 49, 42)
@var            color    dBlue      "Blue"                                     rgb(27, 45, 56)
@var            color    dPurple    "Purple"                                   rgb(48, 39, 57)
@var            color    dPink      "Pink"                                     rgb(59, 39, 48)
@var            color    dRed       "Red"                                      rgb(62, 40, 37)

@var            number   a11        "▼ Custom Card Colors (Light Mode) ▼"      [1.1,1.1,1.1]
@var            color    lLightGray "Light gray"                               rgba(249, 249, 245, 0.5)
@var            color    lGray      "Gray"                                     rgba(247, 247, 245, 0.7)
@var            color    lBrown     "Brown"                                    rgba(250, 246, 245, 0.7)
@var            color    lOrange    "Orange"                                   rgba(252, 245, 242, 0.7)
@var            color    lYellow    "Yellow"                                   rgba(250, 247, 237, 0.7)
@var            color    lGreen     "Green"                                    rgba(244, 248, 243, 0.7)
@var            color    lBlue      "Blue"                                     rgba(241, 248, 251, 0.7)
@var            color    lPurple    "Purple"                                   rgba(249, 246, 252, 0.7)
@var            color    lPink      "Pink"                                     rgba(251, 245, 251, 0.7)
@var            color    lRed       "Red"                                      rgba(253, 245, 243, 0.7)
==/UserStyle== */

@-moz-document domain("notion.so") {
/* title on top */
if tot {
	.notion-gallery-view div > div:has([placeholder="Untitled"]) {
		order: -1;
	}
}
/* background color */
if ifbg {
	body.dark, .notion-cursor-listener,
	.notion-sidebar-container,
	[style*="background: rgb(25\, 25\, 25)"] {
		background: bgc !important;
	}
}
/* Color Sheme for cards */
if ccs == "Default" {
	dLightGray = rgb(47, 47, 47)
	dGray      = rgb(47, 47, 47)
	dBrown     = rgb(54, 40, 34)
	dOrange    = rgb(66, 47, 34)
	dYellow    = rgb(64, 51, 36)
	dGreen     = rgb(35, 49, 42)
	dBlue      = rgb(27, 45, 56)
	dPurple    = rgb(48, 39, 57)
	dPink      = rgb(59, 39, 48)
	dRed       = rgb(62, 40, 37)
	
	lLightGray = rgba(249, 249, 245, 0.5)
	lGray      = rgba(247, 247, 245, 0.7)
	lBrown     = rgba(250, 246, 245, 0.7)
	lOrange    = rgba(252, 245, 242, 0.7)
	lYellow    = rgba(250, 247, 237, 0.7)
	lGreen     = rgba(244, 248, 243, 0.7)
	lBlue      = rgba(241, 248, 251, 0.7)
	lPurple    = rgba(249, 246, 252, 0.7)
	lPink      = rgba(251, 245, 251, 0.7)
	lRed       = rgba(253, 245, 243, 0.7)
}
if ccs == "Google-Keep" {
	dLightGray = #3c3f43
	dGray      = #313235
	dBrown     = #442f19
	dOrange    = #614a19
	dYellow    = #635d19
	dGreen     = #345920
	dBlue      = #1e3a5f
	dPurple    = #42275e
	dPink      = #5b2245
	dRed       = #5c2b29
	
	lLightGray = #fff
	lGray      = #e8eaed
	lBrown     = #e6c9a8
	lOrange    = #fbbc04
	lYellow    = #fff475
	lGreen     = #ccff90
	lBlue      = #aecbfa
	lPurple    = #d7aefb
	lPink      = #fdcfe8
	lRed       = #f28b82
}
if ccs != "Disabled" {
	.notion-selectable.notion-page-block.notion-collection-item > a > .notion-focusable { &:has(div > div > div > div:first-child {
		&[style*="background: rgb(55\, 55\, 55)"           ]) { background: dLightGray !important }
		&[style*="background: rgb(90\, 90\, 90)"           ]) { background: dGray      !important }
		&[style*="background: rgb(96\, 59\, 44)"           ]) { background: dBrown     !important }
		&[style*="background: rgb(133\, 76\, 29)"          ]) { background: dOrange    !important }
		&[style*="background: rgb(137\, 99\, 42)"          ]) { background: dYellow    !important }
		&[style*="background: rgb(43\, 89\, 63)"           ]) { background: dGreen     !important }
		&[style*="background: rgb(40\, 69\, 108)"          ]) { background: dBlue      !important }
		&[style*="background: rgb(73\, 47\, 100)"          ]) { background: dPurple    !important }
		&[style*="background: rgb(105\, 49\, 76)"          ]) { background: dPink      !important }
		&[style*="background: rgb(110\, 54\, 48)"          ]) { background: dRed       !important }
		
		&[style*="background: rgba(227\, 226\, 224\, 0.5)" ]) { background: lLightGray !important }
		&[style*="background: rgb(227\, 226\, 224)"        ]) { background: lGray      !important }
		&[style*="background: rgb(238\, 224\, 218)"        ]) { background: lBrown     !important }
		&[style*="background: rgb(250\, 222\, 201)"        ]) { background: lOrange    !important }
		&[style*="background: rgb(253\, 236\, 200)"        ]) { background: lYellow    !important }
		&[style*="background: rgb(219\, 237\, 219)"        ]) { background: lGreen     !important }
		&[style*="background: rgb(211\, 229\, 239)"        ]) { background: lBlue      !important }
		&[style*="background: rgb(232\, 222\, 238)"        ]) { background: lPurple    !important }
		&[style*="background: rgb(245\, 224\, 233)"        ]) { background: lPink      !important }
		&[style*="background: rgb(255\, 226\, 221)"        ]) { background: lRed       !important }
	}}
}

}

Reviews

No reviews yet.