ArKa/ArKa-Web
1
0
Fork 0
Code Issues Pull Requests Activity

feat: css colorscheme for global & universal colors

Browse Source
This commit is contained in:
Oxbian 2024-10-13 15:02:16 -04:00
parent 597f1d8668
commit 5e17fd2080
Signed by: Oxbian
GPG Key ID: 0E8F319FD43747E5
4 changed files with 66 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
404.html
View File

@ -7,6 +7,7 @@
<meta name="description" content="ArKa - unknown page">
<!-- Style -->
<link rel="stylesheet" href="ArKa-Web/assets/style/colorscheme.css">
<link rel="stylesheet" href="ArKa-Web/assets/style/style.css">
<link rel="shortcut icon" href="ArKa-Web/assets/favicon/favicon.ico" type="image/x-icon">

64
assets/style/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);
}
}

52
assets/style/style.css
View File

@ -1,29 +1,3 @@
/* Root */
:root
{
/* Dark mode */
--dark-bg: #191919;
--dark-text: #BBBBBB;
--dark-link: #191919;
--dark-link-bg: #f08080;
--dark-title: #f08080;
/* Light mode */
--light-bg: #ffdab9;
--light-text: #191919;
--light-link: #191919;
--light-link-bg: #DE6E7C;
--light-title: #DE6E7C;
/* Default mode */
--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);
}
/* Page default disposition */
body
{
@ -163,29 +137,3 @@ main div.h1-content {
gap: 0.5rem;
}
}
/* 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);
}
}
/* 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);
}
}

1
index.html
View File

@ -11,6 +11,7 @@
<meta property="og:description" content="ArKa main page">
<!-- Style -->
<link rel="stylesheet" href="assets/style/colorscheme.css">
<link rel="stylesheet" href="assets/style/style.css">
<link rel="shortcut icon" href="assets/favicon/favicon.ico" type="image/x-icon">