matthias
/
WhisperMaPhone
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Switch color theme and add dark/light mode support

This commit is contained in:
Matthias 2020-09-06 15:07:50 -04:00
parent b5948c60b2
commit 7b1fcc4730
1 changed files with 69 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
main/static/main/main.css
View File

@ -4,20 +4,80 @@ html {
width: 100%;
height: 100%;
--background-color: #2E2A39;
--text-color: #E3D096;
--accent-color: #53929B;
/*iTerm/Atom One Dark*/
/*--background-color: #23252E;*/
/*--text-color: #C5CBD3;*/
/*--accent-color: #D787FF; !*Pink, pretty bright*!*/
/*--accent-color: #5FAF87; !*Green, pretty bright*!*/
/*Discord*/
/*--background-color: #2F3136;*/
/*--text-color: #B9BBBE;*/
/*--accent-color: #6E84D2;*/
/*Rigby dark, bad*/
/*--background-color: #2E2A2A;*/
/*--text-color: #f4f2d6;*/
/*--accent-color: #BA3333;*/
/*Rigby but worse*/
/*--background-color: #f4f2d6;*/
/*--text-color: #2E2A2A;*/
/*--accent-color: #BA3333;*/
/*Melodramatic 10/10*/
/*--background-color: #180519;*/
/*--text-color: #FFFFFF;*/
/*--accent-color: #739DCD;*/
/*Blue on blue but it still doesn't look good*/
/*--background-color: #0B1419;*/
/*--text-color: #A2ACAE;*/
/*--accent-color: #3f698d;*/
/*Gray and lavender*/
/*--background-color: #505453;*/
/*--text-color: #EBEDE0;*/
/*--accent-color: #DACBEF;*/
/*Black and white*/
/*--background-color: #FEFEFE;*/
/*--text-color: #222222;*/
/*--accent-color: #CCCCCC;*/
/*Green and light pink (default light)*/
--background-color: #3E4B39;
--text-color: #F0EFEE;
--accent-color: #F9E2D6;
/*Really flipping blue*/
/*--background-color: #00111B;*/
/*--text-color: #8BAD94;*/
/*--accent-color: #003A46;*/
/*OG, yellow and a strong blue*/
/*--background-color: #2E2A39;*/
/*--text-color: #E3D096;*/
/*--accent-color: #53929B;*/
background: var(--accent-color);
}
@media (prefers-color-scheme: dark) {
html {
/*Background and text from Atom One Dark*/
--background-color: #23252E;
--text-color: #C5CBD3;
--accent-color: #968540; /*Tame yellow*/
}
}
body {
margin: 0 3%;
margin: 0 1.5%;
background: var(--background-color);
min-height: calc(100% - 40px);
max-width: 1000px;
/*The height of the footer at the bottom*/
padding: 0 0 40px;
@ -27,6 +87,10 @@ body {
font-family: Helvetica, Arial, sans-serif;
}
.main-wrap {
max-width: 1000px;
}
.thought {
margin: 20px 30px;
line-height: 1.5em;