theme.css (2462B)
1 /* This file contains colour-scheme- & theme-related stuffs */ 2 3 #main a:link { 4 color: var(--link-colour, var(--default-link-colour, red)); 5 } 6 7 #main a:visited, 8 #main a:hover, 9 #main a:active { 10 color: var(--link-colour, var(--visited-link-colour, red)); 11 } 12 13 /* Light Theme (Default) */ 14 :root { 15 /* Common Green (treat as private vars if possible) */ 16 --green-0: #233a13; 17 --green-1: #385723; 18 --green-2: #457a22; 19 --green-3: #568636; 20 21 /* Black/Grey/White */ 22 --grey-0: #000000; 23 --grey-1: #1a1a1a; 24 --grey-2: #2b2b2b; 25 --grey-3: #4a4a4a; 26 --grey-4: #6d6d6d; 27 --grey-5: #8e8e8e; 28 --grey-6: #a0a0a0; 29 --grey-7: #b3b3b3; 30 --grey-8: #e4e4e4; 31 --grey-9: #ffffff; 32 --black: var(--grey-0); 33 --white: var(--grey-9); 34 35 --linkblue-0: #7ac7ff; 36 --linkblue-1: #99a2e9; 37 --blue-0: #0000ff; 38 --blue-1: #3a3aff; 39 40 /* Demo Commons */ 41 --demo-common-dark-blue: #1e2739; 42 --demo-common-blue: #0042b2; 43 --demo-common-highlight-blue: #3daee9; 44 45 /* Navigation Bar */ 46 --navbar-foreground: var(--white); 47 --navbar-background: var(--green-1); 48 --navbar-button-selected: var(--green-0); 49 --navbar-button-hovering: var(--green-3); 50 51 /* Main Content */ 52 --main-text-colour: var(--black); 53 --main-background-colour: var(--white); 54 55 /* Misc */ 56 --default-link-colour: var(--blue-1); 57 --visited-link-colour: var(--blue-0); 58 --quote-background-colour: var(--grey-8); 59 60 /* Buttons */ 61 --button-confirm-background: var(--green-2); 62 --button-confirm-foreground: var(--white); 63 --button-confirm-hovering-background: var(--green-1); 64 --button-confirm-hovering-foreground: var(--white); 65 --button-confirm-active-background: var(--green-1); 66 --button-confirm-active-foreground: var(--white); 67 68 /* Info Icon */ 69 --license-info-icon-filter: none; 70 } 71 72 /* Dark Theme Overwrites (UA can choose to enable this selector if it wants) */ 73 @media (prefers-color-scheme: dark) { 74 /* Modify core colour scheme */ 75 html:not([data-force-light-theme]) { 76 /* Link-related */ 77 --default-link-colour: var(--linkblue-1); 78 --visited-link-colour: var(--linkblue-0); 79 80 /* Main Content */ 81 --main-background-colour: var(--grey-2); 82 --main-text-colour: var(--grey-8); 83 84 /* Misc */ 85 --quote-background-colour: var(--grey-3); 86 87 /* Info Icon */ 88 --license-info-icon-filter: invert() hue-rotate(180deg); 89 } 90 } 91 92 /* Universal theming, keep this minimal! */ 93 html { 94 background: var(--main-background-colour); 95 color: var(--main-text-colour); 96 }