ArKa/web-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: CSS colorscheme file, to help define a global & uniform colorscheme

Browse Source
This commit is contained in:
Oxbian 2024-10-13 14:27:33 -04:00
parent 157468b845
commit 8e405bd43d
Signed by: Oxbian
GPG Key ID: 0E8F319FD43747E5
6 changed files with 73 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
CSS/colorscheme.css Normal file
View File

@ -0,0 +1,64 @@
/* colorscheme css, here is defined all colors, night / light mode colors
/* Root */
:root
{
/* Dark mode */
--dark-bg: #191919;
--dark-text: #BBBBBB;
--dark-link: #191919;
--dark-link-bg: #f08080;
--dark-title: #f08080;
--dark-quote-border: #fbc4ab; /* Quotebar color */
--dark-quote-bg: #3D3D3D;
/* Light mode */
--light-bg: #ffdab9;
--light-text: #191919;
--light-link: #191919;
--light-link-bg: #DE6E7C;
--light-title: #DE6E7C;
--light-quote-border: #6a040f; /* Quotebar color */
--light-quote-bg: #F9AD8A;
/* Default (will automatically be crushed by light/dark mode detection )*/
--bg-color: var(--dark-bg);
--text-color: var(--dark-text);
--link-color: var(--dark-link);
--link-bg-color: var(--dark-link-bg);
--title-color: var(--dark-title);
--quote-border: var(--dark-quote-border);
--quote-bg: var(--dark-quote-bg);
}
/* Night mode */
@media (prefers-color-scheme: dark)
{
:root
{
--bg-color: var(--dark-bg);
--text-color: var(--dark-text);
--link-color: var(--dark-link);
--link-bg-color: var(--dark-link-bg);
--title-color: var(--dark-title);
--quote-border: var(--dark-quote-border);
--quote-bg: var(--dark-quote-bg);
}
}
/* Day mode */
@media (prefers-color-scheme: light)
{
:root
{
--bg-color: var(--light-bg);
--text-color: var(--light-text);
--link-color: var(--light-link);
--link-bg-color: var(--light-link-bg);
--title-color: var(--light-title);
--quote-border: var(--light-quote-border);
--quote-bg: var(--light-quote-bg);
}
}

65
CSS/default.css
View File

@ -1,36 +1,4 @@
/* Default css, here is defined all colors, night / light mode colors
/* Root */
:root
{
/* Dark mode */
--dark-bg: #191919;
--dark-text: #BBBBBB;
--dark-link: #191919;
--dark-link-bg: #f08080;
--dark-title: #f08080;
--dark-quote-border: #fbc4ab; /* Quotebar color */
--dark-quote-bg: #3D3D3D;
/* Light mode */
--light-bg: #ffdab9;
--light-text: #191919;
--light-link: #191919;
--light-link-bg: #DE6E7C;
--light-title: #DE6E7C;
--light-quote-border: #6a040f; /* Quotebar color */
--light-quote-bg: #F9AD8A;
/* Default (will automatically be crushed by light/dark mode detection )*/
--bg-color: var(--dark-bg);
--text-color: var(--dark-text);
--link-color: var(--dark-link);
--link-bg-color: var(--dark-link-bg);
--title-color: var(--dark-title);
--quote-border: var(--dark-quote-border);
--quote-bg: var(--dark-quote-bg);
}
/* Default css, default font size, style and color
/* Body */
body
@ -51,34 +19,3 @@ h1, h2, h3, h4, h5, h6
{
color: var(--title-color);
}
/* Night mode */
@media (prefers-color-scheme: dark)
{
:root
{
--bg-color: var(--dark-bg);
--text-color: var(--dark-text);
--link-color: var(--dark-link);
--link-bg-color: var(--dark-link-bg);
--title-color: var(--dark-title);
--quote-border: var(--dark-quote-border);
--quote-bg: var(--dark-quote-bg);
}
}
/* Day mode */
@media (prefers-color-scheme: light)
{
:root
{
--bg-color: var(--light-bg);
--text-color: var(--light-text);
--link-color: var(--light-link);
--link-bg-color: var(--light-link-bg);
--title-color: var(--light-title);
--quote-border: var(--light-quote-border);
--quote-bg: var(--light-quote-bg);
}
}

3
HTML/buttons.html
View File

@ -5,7 +5,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS & Atom -->
<!-- CSS -->
<link rel="stylesheet" href="../CSS/colorscheme.css">
<link rel="stylesheet" href="../CSS/default.css">
<link rel="stylesheet" href="../CSS/button.css">

3
HTML/dropdowns.html
View File

@ -5,7 +5,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS & Atom -->
<!-- CSS -->
<link rel="stylesheet" href="../CSS/colorscheme.css">
<link rel="stylesheet" href="../CSS/default.css">
<link rel="stylesheet" href="../CSS/dropdown.css">

3
HTML/inputfields.html
View File

@ -5,7 +5,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS & Atom -->
<!-- CSS -->
<link rel="stylesheet" href="../CSS/colorscheme.css">
<link rel="stylesheet" href="../CSS/default.css">
<link rel="stylesheet" href="../CSS/inputfield.css">

3
HTML/quotes-code.html
View File

@ -5,7 +5,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS & Atom -->
<!-- CSS -->
<link rel="stylesheet" href="../CSS/colorscheme.css">
<link rel="stylesheet" href="../CSS/default.css">
<link rel="stylesheet" href="../CSS/quote-code.css">