Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit d94ab7d

Browse files
chrisdel101bjohansebas
chrisdel101
and
bjohansebas
authoredFeb 11, 2025··
Design system (#1742)
Co-authored-by: Sebastian Beltran <[email protected]>
1 parent 5ab8e0d commit d94ab7d

26 files changed

+305
-496
lines changed
 

‎_includes/blog/tags-menu.md

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎_includes/head.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<link rel="icon" type="image/png" href="/images/favicon.png" />
77
<script data-cfasync="false" src="/js/theme.js"></script>
8-
<link rel="stylesheet" href="/css/dark-theme.css?_={{ site.time | date: '%s' }}">
8+
<link rel="stylesheet" href="/css/variables.css?_={{ site.time | date: '%s' }}">
9+
<link rel="stylesheet" href="/css/themes/dark-theme.css?_={{ site.time | date: '%s' }}">
10+
<link rel="stylesheet" href="/css/themes/light-theme.css?_={{ site.time | date: '%s' }}">
911
<link rel="stylesheet" href="/css/style.css?_={{ site.time | date: '%s' }}">
1012
<link rel="stylesheet" href="/css/sintax.css?_={{ site.time | date: '%s' }}">
1113

1214
<link rel="stylesheet" href="/css/font-awesome.min.css">
1315
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;amp;subset=latin,latin-ext">
14-
<link rel="stylesheet" href="/css/{{ page.lang }}.css">
16+
<link rel="stylesheet" href="/css/langs/{{ page.lang }}.css">
1517

1618
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
1719
<meta name="description" content="{{page.description}}">

‎_layouts/home.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="{{ page.lang }}">
2+
<html class="light-mode" lang="{{ page.lang }}">
33

44
{% include head.html %}
55

‎css/dark-theme.css

Lines changed: 0 additions & 280 deletions
This file was deleted.

‎css/de.css renamed to ‎css/langs/de.css

File renamed without changes.

‎css/en.css renamed to ‎css/langs/en.css

File renamed without changes.

‎css/es.css renamed to ‎css/langs/es.css

File renamed without changes.

‎css/fr.css renamed to ‎css/langs/fr.css

File renamed without changes.

‎css/id.css renamed to ‎css/langs/id.css

File renamed without changes.

‎css/it.css renamed to ‎css/langs/it.css

File renamed without changes.

‎css/ja.css renamed to ‎css/langs/ja.css

File renamed without changes.

‎css/ko.css renamed to ‎css/langs/ko.css

File renamed without changes.

‎css/pt-br.css renamed to ‎css/langs/pt-br.css

File renamed without changes.

‎css/ru.css renamed to ‎css/langs/ru.css

File renamed without changes.

‎css/sk.css renamed to ‎css/langs/sk.css

File renamed without changes.

‎css/th.css renamed to ‎css/langs/th.css

File renamed without changes.

‎css/tr.css renamed to ‎css/langs/tr.css

File renamed without changes.

‎css/uk.css renamed to ‎css/langs/uk.css

File renamed without changes.

‎css/uz.css renamed to ‎css/langs/uz.css

File renamed without changes.

‎css/zh-cn.css renamed to ‎css/langs/zh-cn.css

File renamed without changes.

‎css/zh-tw.css renamed to ‎css/langs/zh-tw.css

File renamed without changes.

‎css/style.css

Lines changed: 199 additions & 195 deletions
Large diffs are not rendered by default.

‎css/themes/dark-theme.css

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
html.dark-mode {
2+
3+
.sun-icon {
4+
background-image: url(/images/sun-icon.png);
5+
background-size: 100%;
6+
background-repeat: no-repeat;
7+
width: 27px;
8+
height: 27px;
9+
}
10+
11+
.hidden-light {
12+
display: block;
13+
}
14+
15+
.hidden-dark {
16+
display: none;
17+
}
18+
19+
.submenu-content {
20+
box-shadow: 1px 2px var(--hover-bg);
21+
background-color: var(--card-bg);
22+
}
23+
24+
#navmenu>li:hover {
25+
ul {
26+
background-color: var(--card-bg);
27+
}
28+
}
29+
30+
.blog-excerpt {
31+
color: var(--notice-accent);
32+
}
33+
}

‎css/variables.css

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
:root.light-mode {
2+
--grey-fg: #aeaeae;
3+
--bg: #ffffff;
4+
--fg: #383838;
5+
--card-bg: #f0f1f3;
6+
--card-fg: #383838;
7+
/* text (api side menus h3...) */
8+
--menu-grey: #888;
9+
--hover-border: #484848;
10+
--hover-bg: #D3D3D3;
11+
--hover-fg: #fafafa;
12+
--border: #d9e1e4;
13+
--link: #0e78ce;
14+
/* docs related */
15+
--box-fg: #181818;
16+
--info-bg: #cfd4fc;
17+
--info-accent: #0f1c8a;
18+
--notice-bg: #fceac5;
19+
--notice-accent: #2E1D00;
20+
--warn-bg: #fad1df;
21+
--warn-accent: #8a0f3a;
22+
--code-bg: #f0f1f3;
23+
/* support page related */
24+
--supported-fg: #009000;
25+
--eol-fg: #ff0000;
26+
}
27+
:root.dark-mode {
28+
--bg: #0c0c0c;
29+
--fg: #fafafa;
30+
--card-bg: #181818;
31+
--card-fg: #f7f4f4;
32+
--hover-bg: #262626;
33+
--hover-fg: #f2f2f2;
34+
--hover-border: #fafafa;
35+
--border: #d9e1e4;
36+
/* text (api side menus h3...) */
37+
--menu-grey: silver;
38+
--link: #259dff;
39+
/* docs related */
40+
--box-fg: #ffffff;
41+
--info-bg: #171d4f;
42+
--info-accent: #bdc3ff;
43+
--notice-bg: #4e4022;
44+
--notice-accent: #f9e8c3;
45+
--warn-bg: #4e2232;
46+
--warn-accent: #f9c3d6;
47+
--code-bg: #181818;
48+
/* support page related */
49+
--supported-fg:#299009;
50+
--eol-fg: #ff1a1a;
51+
}

‎en/blog/write-post.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ Create a new file in the `_posts` directory named using following the format: `Y
2727
1. ### Add the required front matter
2828
Copy the following front matter, including the dotted lines, and paste it at the top of file you just created. Replace the placeholder values with as desired.
2929

30-
```yaml
30+
```markdown
3131
---
3232
title: <your-title>
3333
sub_title: <your-optional-sub-title>

‎js/theme.js

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,19 @@ const themeWatcher = watchColorSchemeChange((colorScheme) => {
66
toggleSystemTheme(colorScheme)
77
})
88
} else {
9+
// user's PS system theme settings
910
const systemTheme = localStorage.getItem('system-theme')
11+
// setting stored in local storage
1012
const localTheme = localStorage.getItem('local-theme')
1113
// // if no local theme set - system is default
1214
if (localTheme === null) {
13-
toggleSystemTheme(colorScheme)
15+
setTheme(colorScheme)
1416
localStorage.setItem('system-theme', colorScheme || 'light')
17+
// page load - load any stored themes or set theme
1518
} else {
1619
// listen for system changes, update if any
1720
if (colorScheme != systemTheme) {
18-
toggleSystemTheme(colorScheme)
21+
setTheme(colorScheme)
1922
localStorage.setItem('system-theme', colorScheme || 'light')
2023
// override local theme
2124
localStorage.removeItem('local-theme')
@@ -28,23 +31,26 @@ const themeWatcher = watchColorSchemeChange((colorScheme) => {
2831
}
2932
}
3033
}
34+
// wait for load then and add listner on button
3135
document.addEventListener('DOMContentLoaded', () => {
3236

3337
document
3438
.querySelector('.theme-toggle')
35-
.addEventListener('click', toggleStorageTheme)
39+
.addEventListener('click', toggleLocalStorageTheme)
3640
})
3741
}
3842
})
39-
function toggleSystemTheme(theme) {
40-
// only support dark, else any other defaults to light
43+
// set the theme to given value
44+
function setTheme(theme) {
45+
// only support dark else any other defaults to light
4146
if (theme === 'dark') {
4247
darkModeOn()
4348
} else {
4449
lightModeOn()
4550
}
4651
}
47-
function toggleStorageTheme(e) {
52+
// toggle btwn themes or set a theme if none set
53+
function toggleLocalStorageTheme(e) {
4854
const localTheme = localStorage.getItem('local-theme')
4955
if (localTheme === 'light') {
5056
localStorage.setItem('local-theme', 'dark')
@@ -65,18 +71,21 @@ function toggleStorageTheme(e) {
6571
}
6672
}
6773
function darkModeOn() {
74+
document?.documentElement?.classList?.remove('light-mode')
6875
document?.documentElement?.classList?.add('dark-mode')
6976
}
7077
function lightModeOn() {
7178
document?.documentElement?.classList.remove('dark-mode')
79+
document?.documentElement?.classList?.add('light-mode')
7280
}
7381
function darkModeState() {
74-
return document.documentElement.classList.contains('dark-mode')
82+
return document?.documentElement?.classList.contains('dark-mode')
7583
}
7684
function hasLocalStorage() {
7785
return typeof Storage !== 'undefined'
7886
}
7987
function watchColorSchemeChange(callback) {
88+
// query user's machine for system setting & use that
8089
const darkMediaQuery = window?.matchMedia('(prefers-color-scheme: dark)')
8190

8291
const handleChange = (event) => {

0 commit comments

Comments
 (0)
Please sign in to comment.