Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web: proper theming

Browse source
This commit is contained in:
wukko 2024-06-29 20:09:17 +06:00
parent 2a1344f93d
commit 10a9c955d9
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
3 changed files with 68 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/app.html
View file

@ -18,6 +18,6 @@
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover" data-sveltekit-preload-code="eager"> <body data-sveltekit-preload-data="hover" data-sveltekit-preload-code="eager">
<div style="display: contents">%sveltekit.body%</div> %sveltekit.body%
</body> </body>
</html> </html>

34
web/src/lib/state/theme.ts Normal file
View file

@ -0,0 +1,34 @@
import { readable, derived } from 'svelte/store';
import settings from '$lib/settings';
import { themeOptions } from '$lib/types/settings';
let set: (_: typeof themeOptions[number]) => void;
const browserPreference = () =>
window.matchMedia('(prefers-color-scheme: light)')
.matches ? 'light' : 'dark';
const browserPreferenceReadable = readable(
browserPreference(),
_set => { set = _set }
)
const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
if (matchMedia.addEventListener) {
matchMedia.addEventListener('change', () => set(browserPreference()));
}
export default derived(
[settings, browserPreferenceReadable],
([$settings, $browserPref]) => {
if ($settings.appearance.theme !== 'auto') {
return $settings.appearance.theme;
}
return $browserPref;
},
browserPreference()
);

63
web/src/routes/+layout.svelte
View file

@ -1,13 +1,18 @@
<script> <script>
import "@fontsource/ibm-plex-mono/400.css"; import "@fontsource/ibm-plex-mono/400.css";
import "@fontsource/ibm-plex-mono/500.css"; import "@fontsource/ibm-plex-mono/500.css";
import currentTheme from "$lib/state/theme";
import Sidebar from "$components/sidebar/Sidebar.svelte"; import Sidebar from "$components/sidebar/Sidebar.svelte";
</script> </script>
<div id="cobalt"> <div style="display: contents" data-theme={$currentTheme}>
<Sidebar /> <div id="cobalt">
<div id="content"> <Sidebar />
<slot></slot> <div id="content">
<slot></slot>
</div>
</div> </div>
</div> </div>
@ -52,37 +57,34 @@
); );
} }
/* temporary switcher until theming is implemented, */ :global([data-theme=dark]) {
/* just so my eyes don't burn at night */ --primary: #000000;
@media (prefers-color-scheme: dark) { --secondary: #e1e1e1;
:global(:root) {
--primary: #000000;
--secondary: #e1e1e1;
--gray: #6e6e6e; --gray: #6e6e6e;
--blue: #2a7ce1; --blue: #2a7ce1;
--green: #37aa42; --green: #37aa42;
--button: #191919; --button: #191919;
--button-hover: #2a2a2a; --button-hover: #2a2a2a;
--button-hover-transparent: rgba(225, 225, 225, 0.1); --button-hover-transparent: rgba(225, 225, 225, 0.1);
--button-stroke: rgba(255, 255, 255, 0.05); --button-stroke: rgba(255, 255, 255, 0.05);
--button-text: #e1e1e1; --button-text: #e1e1e1;
--button-box-shadow: 0 0 0 1.5px var(--button-stroke) inset;
--sidebar-bg: #101010; --sidebar-bg: #101010;
--sidebar-highlight: #f2f2f2; --sidebar-highlight: #f2f2f2;
--input-border: #383838; --input-border: #383838;
--sidebar-mobile-gradient: linear-gradient( --sidebar-mobile-gradient: linear-gradient(
90deg, 90deg,
rgba(16, 16, 16, 0.9) 0%, rgba(16, 16, 16, 0.9) 0%,
rgba(16, 16, 16, 0) 4%, rgba(16, 16, 16, 0) 4%,
rgba(16, 16, 16, 0) 50%, rgba(16, 16, 16, 0) 50%,
rgba(16, 16, 16, 0) 96%, rgba(16, 16, 16, 0) 96%,
rgba(16, 16, 16, 0.9) 100% rgba(16, 16, 16, 0.9) 100%
); );
}
} }
:global(html), :global(html),
@ -177,6 +179,7 @@
:global(h1, h2, h3, h4, h5, h6) { :global(h1, h2, h3, h4, h5, h6) {
font-weight: 500; font-weight: 500;
margin-block: 0; margin-block: 0;
color: var(--secondary);
} }
:global(h1) { :global(h1) {