Skip to content

Commit

Permalink
Use light-dark css
Browse files Browse the repository at this point in the history
  • Loading branch information
@salif
salif committed Sep 29, 2024
1 parent 1b5259d commit 6d0cff7
Show file tree
Hide file tree
Showing 9 changed files with 34 additions and 45 deletions.
2 changes: 1 addition & 1 deletion 01.default.default.bul.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,4 @@ lang: bg

Най-добрият начин да научите глобаса е да започнете с [Уроците по глобаса за начинаещи](./02.darsu.default.bul.md).

Ако предпочитате, можете да се запознаете с пълната граматика на глобаса [тук](https://salif.github.io/gramati-fe-globasa/bg-gemini/).
Ако предпочитате, можете да се запознаете с [Пълната граматика на глобаса](https://salif.github.io/gramati-fe-globasa/bg-gemini/).
2 changes: 1 addition & 1 deletion 01.default.default.eng.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,4 @@ Globasa's design is primarily the work of a linguist, translator and expert in a

The best way to learn Globasa is to start with [Globasa Lessons for Beginners](./02.darsu.default.eng.md).

If you prefer, you may dive into Globasa's complete grammar [here](https://salif.github.io/gramati-fe-globasa/eng/).
If you prefer, you may dive into [Globasa's complete grammar](https://salif.github.io/gramati-fe-globasa/eng/).
2 changes: 1 addition & 1 deletion 01.default.default.rus.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,4 @@ lang: ru

Лучший способ выучить глобаса — начать с [Урок 1](./02.darsu.default.rus.md) из Уроков глобаса для начинающих.

Если хотите, вы можете погрузиться в полную грамматику глобаса [здесь](https://salif.github.io/gramati-fe-globasa/ru-gemini/).
Если хотите, вы можете погрузиться в [полную грамматику глобаса](https://salif.github.io/gramati-fe-globasa/ru-gemini/).
2 changes: 1 addition & 1 deletion 01.default.default.spa.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,4 @@ El diseño de Globasa es principalmente el trabajo de un lingüista, traductor y

La mejor forma de aprender Globasa es empezar con las [Lecciones de Globasa para principiantes](./02.darsu.default.spa.md).

Si lo prefiere, puede saltarse a la gramática completa de Globasa [aquí](https://salif.github.io/gramati-fe-globasa/spa/).
Si lo prefiere, puede saltarse a [la gramática completa de Globasa](https://salif.github.io/gramati-fe-globasa/spa/).
2 changes: 1 addition & 1 deletion _includes/footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% unless page.url == "/" %}
<div class="my-sidebar border-top" style="padding-left:1em;padding-top:1.5em;margin-top:2em;">
{% include_cached sidebar.{{ page.lang }}.html %}
{% include_cached sidebar.{{ page.lang | default: 'en' }}.html %}
</div>
{% endunless %}
<div class="footer border-top border-gray-light mt-5 pt-3 text-right text-gray">
Expand Down
1 change: 1 addition & 0 deletions _layouts/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<link rel="icon" type="image/png" sizes="192x192" href="{{ '/assets/icon-192x192.png' | relative_url }}" />
<link rel="icon" type="image/png" sizes="512x512" href="{{ '/assets/icon-512x512.png' | relative_url }}" />
<link rel="manifest" href="{{ '/manifest.json' | relative_url }}" />
<style>:root {color-scheme: light dark;}</style>
<script async src="{{ '/assets/script.min.js?v=240928' | relative_url }}"></script>
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=240928' | relative_url }}" />
<link rel="stylesheet" href="{{ '/assets/custom.css?v=240928' | relative_url }}" />
Expand Down
50 changes: 13 additions & 37 deletions assets/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,50 +34,26 @@
--sc-dark-preformatted: #ccc;
--sc-dark-disabled: #111;

color-scheme: var(--color-scheme, light);
color-scheme: var(--color-scheme, light dark);

--bg: light-dark(var(--light-bg), var(--ctp-mocha-base));
--text: light-dark(var(--light-text), var(--ctp-mocha-text));
--links: light-dark(var(--light-links), var(--ctp-mocha-blue));
--gray-border: light-dark(var(--light-gray-border), var(--ctp-mocha-surface2));
--border: light-dark(var(--light-border), var(--ctp-mocha-surface2));
--table-header-bg: light-dark(var(--light-table-header-bg), var(--ctp-mocha-mantle));
--table-tr-border: light-dark(var(--light-table-tr-border), var(--table-header-bg));
--table-td-border: light-dark(var(--light-table-td-border), var(--ctp-mocha-surface0));
}

.theme-light,
body:has(#theme-switch-light:checked),
body:has(#theme-switch-auto:checked) {
:root.theme-light,
:root:has(#theme-switch-light:checked) {
--color-scheme: light;
--bg: var(--light-bg);
--text: var(--light-text);
--links: var(--light-links);
--gray-border: var(--light-gray-border);
--border: var(--light-border);
--table-header-bg: var(--light-table-header-bg);
--table-tr-border: var(--light-table-tr-border);
--table-td-border: var(--light-table-td-border);
}

.theme-dark,
:root.theme-dark,
body:has(#theme-switch-dark:checked) {
--color-scheme: dark;
--bg: var(--ctp-mocha-base);
--text: var(--ctp-mocha-text);
--links: var(--ctp-mocha-blue);
--gray-border: var(--ctp-mocha-surface2);
--border: var(--ctp-mocha-surface2);
--table-header-bg: var(--ctp-mocha-mantle);
--table-tr-border: var(--table-header-bg);
--table-td-border: var(--ctp-mocha-surface0);
}

@media (prefers-color-scheme: dark) {

/* .theme-dark */
body:has(#theme-switch-auto:checked) {
--color-scheme: dark;
--bg: var(--ctp-mocha-base);
--text: var(--ctp-mocha-text);
--links: var(--ctp-mocha-blue);
--gray-border: var(--ctp-mocha-surface2);
--border: var(--ctp-mocha-surface2);
--table-header-bg: var(--ctp-mocha-mantle);
--table-tr-border: var(--table-header-bg);
--table-td-border: var(--ctp-mocha-surface0);
}
}

.theme-sc-light,
Expand Down
2 changes: 1 addition & 1 deletion assets/script.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 14 additions & 2 deletions assets/script.src.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ function set_theme(e) {
} else if (theme === "theme-dark") {
theme = "theme-light";
} else if (theme === "theme-light") {
theme = "theme-sc-auto";
} else if (theme === "theme-sc-auto") {
theme = "theme-sc-dark";
} else if (theme === "theme-sc-dark") {
theme = "theme-sc-light";
} else if (theme === "theme-sc-light") {
theme = "theme-auto";
} else {
theme = "theme-auto";
Expand All @@ -21,14 +27,20 @@ function set_theme(e) {
} else {
localStorage.setItem(theme_key, theme);
}
this.textContent = "Kolor (" + theme.substring(6) + ")";
if (this.textContent.startsWith("Kolor")) {
this.textContent = theme === "theme-auto" ? "Kolor" :
"Kolor (" + theme.substring(6) + ")";
}
}
if (theme === "theme-auto") {
theme = window.matchMedia("(prefers-color-scheme: dark)").matches ?
"theme-dark" : "theme-light";
} else if (theme === "theme-sc-auto") {
theme = window.matchMedia("(prefers-color-scheme: dark)").matches ?
"theme-sc-dark" : "theme-sc-light";
}
if (!document.documentElement.classList.contains(theme)) {
document.documentElement.classList.remove("theme-dark", "theme-light");
document.documentElement.classList.remove("theme-dark", "theme-light", "theme-sc-dark", "theme-sc-light");
document.documentElement.classList.add(theme);
}
return false;
Expand Down

0 comments on commit 6d0cff7

Please sign in to comment.