Colored Cards in the Gallery view - notion.so by pabli
Details
Authorpabli
LicenseMIT
Created
Updated
Categorynotion
Statistics
Learn how we calculate statistics in the FAQ.
Total views
Total installs
Weekly installs
Weekly updates
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
Notes
Userstyle doesn't have notes.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 }
}}
}
}