@ -4,34 +4,161 @@ html {
body {
/* Default is light theme */
--primary-background : # ffffff ;
--secondary-background : # fdf8f5 ;
--light-- primary-background : # ffffff ;
--light-- secondary-background : # fdf8f5 ;
--primary-accent : # 1482e3 ;
--primary-accent-soft : # 5caff9 ;
--primary-accent-light : # c4e0f8 ;
--primary-accent-lighter : # e1eefa ;
--primary-accent-lightest : # f7fbff ;
--light-- primary-accent : # 1482e3 ;
--light-- primary-accent-soft : # 5caff9 ;
--light-- primary-accent-light : # c4e0f8 ;
--light-- primary-accent-lighter : # e1eefa ;
--light-- primary-accent-lightest : # f7fbff ;
--secondary-accent : # 4ed4b2 ;
--secondary-accent-light : # dcf6f0 ;
--light-- secondary-accent : # 4ed4b2 ;
--light-- secondary-accent-light : # dcf6f0 ;
--primary-heading : # 2a2a62 ;
--secondary-heading : # 525284 ;
--light--primary-heading : # 2a2a62 ;
--text : # 000000 ;
--light--primary-text : # 2a2a62 ;
--light--text : # 000000 ;
--light--text-light : # FFFFFF ;
--light--sidebar-text : # 2a2a62 ;
--light--author-text : # 525284 ;
--light--mini-event-card-text : # 000000 ;
--form-invalid : # 9f616a ;
--warning-background : # dd0014 ;
--warning-text : # ffffff ;
--light--primary-title : # 2a2a62 ;
--light--primary-subtitle : # 2a2a62 ;
--light--secondary-subtitle : # 2a2a62 ;
--input-background : # f0f0f0 ;
--input-placeholder-text : # bbbbbb ;
--input-text : # 6b6b6b ;
--light--form-invalid : # 9f616a ;
--light--warning-background : # dd0014 ;
--light--warning-text : # ffffff ;
--code-background : # f0f0f0 ;
--light--link : # 1482e3 ;
--light--link-hover : # 4ed3b2 ;
--navbar-page-overlay : # 787878b2 ;
--light--input-background : # f0f0f0 ;
--light--input-placeholder-text : # bbbbbb ;
--light--input-text : # 6b6b6b ;
--light--icon : # 2A2A62 ;
--light--navbar-page-overlay : hsla ( 0 , 0 % , 47 . 1 % , 0 . 6980392156862745 ) ;
--light--code-background : # f0f0f0 ;
--light--button-background : # 1482e3 ;
--light--footer-background : # 2a2a62 ;
--light--card-background : # FFFFFF ;
--light--dark-card-background : # DCF6F0 ;
--light--table-header : # DCF6F0 ;
--light--table-section : # f7fbff ;
--light--blue-gradient : # 1481E3 ;
--light--border : # 2a2a62 ;
--light--marker : # 1482e3 ;
--dark--primary-background : # 171729 ;
--dark--secondary-background : # 252542 ;
--dark--primary-accent : # 5CAFF9 ;
--dark--primary-accent-soft : # 5cb0f9 ;
--dark--primary-accent-light : # 252542 ;
--dark--primary-accent-lighter : # 171729 ;
--dark--primary-accent-lightest : # 464671 ;
--dark--secondary-accent : # 4ed3b2 ;
--dark--secondary-accent-light : # 525284 ;
--dark--primary-heading : # fcf7f4 ;
--dark--form-invalid : # 9f616a ;
--dark--warning-background : # dd0014 ;
--dark--warning-text : # ffffff ;
--dark--link : # 4ED4B2 ;
--dark--link-hover : # C1F0E4 ;
--dark--primary-text : # ffffff ;
--dark--text : # AFAFD3 ;
--dark--text-light : # FFFFFF ;
--dark--sidebar-text : # AFAFD3 ;
--dark--author-text : # ABABF2 ;
--dark--mini-event-card-text : # 5CAFF9 ;
--dark--input-background : # C4C4C4 ;
--dark--input-placeholder-text : # bbbbbb ;
--dark--input-text : # 6b6b6b ;
--dark--icon : # ffffff ;
--dark--primary-title : # 5CAFF9 ;
--dark--primary-subtitle : # E0E0F7 ;
--dark--secondary-subtitle : # ABABF2 ;
--dark--navbar-page-overlay : rgba ( 0 , 0 , 0 , 0 . 7 ) ;
--dark--code-background : # 3d3d68 ;
--dark--button-background : # 1482e3 ;
--dark--footer-background : # 525284 ;
--dark--card-background : # 272751 ;
--dark--dark-card-background : # 272751 ;
--dark--table-header : # 252542 ;
--dark--table-section : # 202037 ;
--dark--blue-gradient : # 5CAFF9 ;
--dark--border : # 2A2A62 ;
--dark--marker : # C5C5F0 ;
--primary-background : var ( --light--primary-background ) ;
--secondary-background : var ( --light--secondary-background ) ;
--primary-accent : var ( --light--primary-accent ) ;
--primary-accent-soft : var ( --light--primary-accent-soft ) ;
--primary-accent-light : var ( --light--primary-accent-light ) ;
--primary-accent-lighter : var ( --light--primary-accent-lighter ) ;
--primary-accent-lightest : var ( --light--primary-accent-lightest ) ;
--secondary-accent : var ( --light--secondary-accent ) ;
--secondary-accent-light : var ( --light--secondary-accent-light ) ;
--primary-heading : var ( --light--primary-heading ) ;
--form-invalid : var ( --light--form-invalid ) ;
--warning-background : var ( --light--warning-background ) ;
--warning-text : var ( --light--warning-text ) ;
--link : var ( --light--link ) ;
--link-hover : var ( --light--link-hover ) ;
--primary-text : var ( --light--primary-text ) ;
--text : var ( --light--text ) ;
--text-light : var ( --light--text-light ) ;
--sidebar-text : var ( --light--sidebar-text ) ;
--author-text : var ( --light--author-text ) ;
--mini-event-card-text : var ( --light--mini-event-card-text ) ;
--input-background : var ( --light--input-background ) ;
--input-placeholder-text : var ( --light--input-placeholder-text ) ;
--input-text : var ( --light--input-text ) ;
--icon : var ( --light--icon ) ;
--primary-title : var ( --light--primary-title ) ;
--primary-subtitle : var ( --light--primary-subtitle ) ;
--secondary-subtitle : var ( --light--secondary-subtitle ) ;
--navbar-page-overlay : var ( --light--navbar-page-overlay ) ;
--code-background : var ( --light--code-background ) ;
--button-background : var ( --light--button-background ) ;
--footer-background : var ( --light--footer-background ) ;
--card-background : var ( --light--card-background ) ;
--dark-card-background : var ( --light--dark-card-background ) ;
--table-header : var ( --light--table-header ) ;
--table-section : var ( --light--table-section ) ;
--blue-gradient : var ( --light--blue-gradient ) ;
--border : var ( --light--border ) ;
--marker : var ( --light--marker ) ;
background-color : var ( --primary-background ) ;
color : var ( --text ) ;
@ -47,10 +174,6 @@ input {
font-family : "Poppins" , "sans-serif" ;
}
. dark {
/* FIXME: Implement dark theme */
}
h1 ,
h2 ,
h3 ,
@ -117,3 +240,58 @@ h4 + * {
font-weight : 600 ;
}
}
@ media only screen and ( prefers-color-scheme : dark ) {
body {
--primary-background : var ( --dark--primary-background ) ;
--secondary-background : var ( --dark--secondary-background ) ;
--primary-accent : var ( --dark--primary-accent ) ;
--primary-accent-soft : var ( --dark--primary-accent-soft ) ;
--primary-accent-light : var ( --dark--primary-accent-light ) ;
--primary-accent-lighter : var ( --dark--primary-accent-lighter ) ;
--primary-accent-lightest : var ( --dark--primary-accent-lightest ) ;
--secondary-accent : var ( --dark--secondary-accent ) ;
--secondary-accent-light : var ( --dark--secondary-accent-light ) ;
--primary-heading : var ( --dark--primary-heading ) ;
--form-invalid : var ( --dark--form-invalid ) ;
--warning-background : var ( --dark--warning-background ) ;
--warning-text : var ( --dark--warning-text ) ;
--link : var ( --dark--link ) ;
--link-hover : var ( --dark--link-hover ) ;
--primary-text : var ( --dark--primary-text ) ;
--text : var ( --dark--text ) ;
--text-light : var ( --dark--text-light ) ;
--sidebar-text : var ( --dark--sidebar-text ) ;
--author-text : var ( --dark--author-text ) ;
--mini-event-card-text : var ( --dark--mini-event-card-text ) ;
--input-background : var ( --dark--input-background ) ;
--input-placeholder-text : var ( --dark--input-placeholder-text ) ;
--input-text : var ( --dark--input-text ) ;
--icon : var ( --dark--icon ) ;
--primary-title : var ( --dark--primary-title ) ;
--primary-subtitle : var ( --dark--primary-subtitle ) ;
--secondary-subtitle : var ( --dark--secondary-subtitle ) ;
--navbar-page-overlay : var ( --dark--navbar-page-overlay ) ;
--code-background : var ( --dark--code-background ) ;
--button-background : var ( --dark--button-background ) ;
--footer-background : var ( --dark--footer-background ) ;
--card-background : var ( --dark--card-background ) ;
--table-header : var ( --dark--table-header ) ;
--table-section : var ( --dark--table-section ) ;
--blue-gradient : var ( --dark--blue-gradient ) ;
--border : var ( --dark--border ) ;
--marker : var ( --dark--marker ) ;
}
}