vars.css (1208B)
1 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;800&display=swap'); 2 3 :root { 4 /* Colors */ 5 --clrBg: #fff; 6 --clrPanel: #f9f9f9; 7 --clrBorder: #f2f2f2; 8 --clrBtn: #202020; 9 --clrText: #202020; 10 --clrTextLight: #868686; 11 --clrTextLighter: #abb4ca; 12 --clrHeart: #ff5050; 13 --clrWarn: #fbc560; 14 --clrLink: blue; 15 --clrLinkVisited: purple; 16 17 /* TODO I don't like these and simply did it for dark mode. To rename. */ 18 --clrEvMsg: #f4f4f4; 19 --clrTextEvMsg: #444; 20 --clrBgAction: #171717; 21 --clrTextAction: white; 22 23 /* Font Sizes */ 24 --fsSmall: 12px; 25 --fsNormal: 16px; 26 --fsReduced: 14px; 27 --fsEnlarged: 18px; 28 29 /* Font Families */ 30 --ffDefault: "Noto Sans", sans-serif; 31 32 /* Z Layers */ 33 --zDefault: 0; 34 --zPFP: 1; 35 --zHeader: 2; 36 --zGlobal: 3; 37 --zModal: 4; 38 39 /* Icon */ 40 --iconSize: 24px; 41 --iconSizeSmall: 15px; 42 } 43 44 @media (prefers-color-scheme: dark) { 45 :root { 46 --clrBg: #0f0f0f; 47 --clrText: #fff; 48 --clrPanel: #1f1f1f; 49 --clrBorder: #282828; 50 --clrLink: #fb5151; 51 --clrLinkVisited: #f77; 52 --clrEvMsg: #353535; 53 --clrTextEvMsg: white; 54 --clrBgAction: white; 55 --clrTextAction: #1f1f1f; 56 } 57 }