Move themes to separate CSS file

This commit is contained in:
Fred Boniface 2023-10-06 11:53:35 +01:00
parent bb0d389b09
commit e2cefdda08
3 changed files with 58 additions and 20 deletions

View File

@ -34,25 +34,6 @@
font-style: normal;
}
/* COLOR VARS */
:root {
--main-bg-color: #404c55;
--second-bg-color: #2b343c; /* Use as first arg in radial gradient */
--accent-color: #007979;
--overlay-color: #3c6f79de;
--overlay-color-solid: #3c6f79;
--main-text-color: #00b7b7;
--second-text-color: #0afdfd;
--note-text-color: #9de7ff;
--link-color: azure;
--box-border-color: ;
--link-visited-color: azure;
--main-alert-color: #ed6d00;
--second-alert-color: #e77f00; /* Use as second arg in radial gradient */
--main-warning-color: orange;
--board-name-color: #fcfc09;
}
html {
width: 100%;
height: 100%;

56
src/lib/themes.css Normal file
View File

@ -0,0 +1,56 @@
/* OLD THEME */
:root {
--main-bg-color: #404c55;
--second-bg-color: #2b343c; /* Use as first arg in radial gradient */
--accent-color: #007979;
--overlay-color: #3c6f79de;
--overlay-color-solid: #3c6f79;
--main-text-color: #00b7b7;
--second-text-color: #0afdfd;
--note-text-color: #9de7ff;
--link-color: azure;
--box-border-color: ;
--link-visited-color: azure;
--main-alert-color: #ed6d00;
--second-alert-color: #e77f00; /* Use as second arg in radial gradient */
--main-warning-color: orange;
--board-name-color: #fcfc09;
}
/* Main Theme
:root {
--main-bg-color: #404c55;
--second-bg-color: #2b343c;
--accent-color: #007979;
--island-color: #3c6f79de;
--main-heading-color: #00b7b7;
--main-text-color: #0afdfd;
--note-text-color: #9de7ff;
--link-color: azure;
--box-border-color: rgba(0,0,0,0.19);
--link-visited-color: azure;
--main-alert-color: #ed6d00;
--second-alert-color: #e77f00;
--main-warning-color: orange;
--board-name-color: #fcfc09;
}
*/
/*
Christmas Theme
{
--main-bg-color: #404c55;
--second-bg-color: #2b343c;
--accent-color: #007979;
--island-color: #3c6f79de;
--main-heading-color: #00b7b7;
--main-text-color: #0afdfd;
--note-text-color: #9de7ff;
--link-color: azure;
--box-border-color: rgba(0,0,0,0.19);
--link-visited-color: azure;
--main-alert-color: #ed6d00;
--second-alert-color: #e77f00;
--main-warning-color: orange;
--board-name-color: #fcfc09;
}
*/

View File

@ -1,5 +1,6 @@
<script>
import '../app.css';
import '$lib/themes.css';
import '$lib/main.css';
import { dev } from '$app/environment';
import DevBanner from '$lib/DevBanner.svelte';
</script>