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