Cyan
Powerful UX, stunning visuals, like never before
25
Live preview
Full Discord interface with this theme applied — powered by ThemePreview.
Screenshot
1
/**2
* @name Cyan3
* @description Powerful UX, stunning visuals, like never before4
* @author DaBluLite5
* @authorId 5821700075057315946
* @version 7.0.07
* @updateUrl https://dablulite.github.io/Cyan/Cyan.theme.css8
* @source https://github.com/DaBluLite/Cyan9
* @invite 67VRpSjzxU10
* @colorwayVar cyan-accent-color {{accent}}11
* @colorwayVar cyan-background-primary hsl({{primary-h}} calc(var(--saturation-factor, 1)*{{primary-s}}%) {{primary-l}}%/60%)12
* @colorwayVar cyan-second-layer hsl({{tertiary-h}} calc(var(--saturation-factor, 1)*{{tertiary-s}}%) min(calc({{tertiary-l}}% + 7.2%), 100%)/60%)13
*/14
15
@import url("https://dablulite.github.io/Cyan/import.css");16
17
:root {18
--cyan-interface-shadow: 0 4px 10px 0 rgb(0 0 0 / 40%);19
--cyan-font: 'Montserrat', 'Open Sans';20
--cyan-background-img: url("https://github.com/DaBluLite/Cyan/blob/next/cyan-ocean-waves.png?raw=true");21
--cyan-accent-color: #009f88;22
--cyan-blur: 16px;23
--cyan-radius-round-interface: 50px;24
--cyan-radius-interface: 24px;25
--cyan-radius-xl: 20px;26
--cyan-radius-large: 16px;27
--cyan-radius-medium: 12px;28
--cyan-radius-small: 8px;29
--cyan-radius-xs: 4px;30
--cyan-loading-header: ";Getting up to speed...";;31
}32
33
.theme-dark,34
.theme-dark .theme-light {35
--cyan-second-layer: rgb(0 0 0/60%);36
--cyan-background-primary: hsla(0deg 100% 0% / 60%);37
--cyan-bg-brightness: .7;38
--cyan-second-layer-thin: hsl(240 4% 60.784%/0.12156862745098039);39
--cyan-second-layer-thin-hover: hsl(240 4% 60.784%/0.2);40
--cyan-second-layer-thin-active: hsl(234.545 6.509% 33.137%/0.3);41
}42
43
.theme-light {44
--cyan-second-layer: rgb(255 255 255/60%);45
--cyan-background-primary: hsla(0deg 100% 100% / 60%);46
--cyan-second-layer-thin: hsl(240 4% 60.784%/0.1607843137254902);47
--cyan-second-layer-thin-hover: hsl(240 4% 60.784%/0.2784313725490196);48
--cyan-second-layer-thin-active: hsl(233.333 3.734% 52.745%/0.08);49
}50
51
.theme-darker,52
.theme-darker .theme-light {53
--cyan-second-layer: rgb(0 0 0/75%);54
--cyan-background-primary: hsla(0deg 100% 0% / 75%);55
--cyan-bg-brightness: .4;56
--cyan-second-layer-thin: hsl(240 4% 70.784%/0.12156862745098039);57
--cyan-second-layer-thin-hover: hsl(240 4% 70.784%/0.2);58
--cyan-second-layer-thin-active: hsl(234.545 6.509% 45.137%/0.3);59
}60
61
.theme-midnight,62
.theme-midnight .theme-light {63
--cyan-second-layer: rgb(0 0 0/90%);64
--cyan-background-primary: hsla(0deg 100% 0% / 90%);65
--cyan-bg-brightness: .1;66
--cyan-second-layer-thin: hsl(240 4% 70.784%/0.12156862745098039);67
--cyan-second-layer-thin-hover: hsl(240 4% 70.784%/0.2);68
--cyan-second-layer-thin-active: hsl(234.545 6.509% 45.137%/0.3);69
}70