#Custom cookie Boxes
Explore tagged Tumblr posts
Text
The Best Custom Cookie Boxes for Your Business: An Essential Guide
Cookie boxes are an excellent way to show your appreciation and show someone how much you care. Whether it’s for a special occasion or just to say thank you, custom cookie boxes are the perfect gift packaging. They are not only aesthetically pleasing but also provide a safe and secure way to transport your cookies from one place to another.
0 notes
Text
Custom Wholesale Cookie Boxes - 2023
Cookies are the most popular snack food among individuals of all ages and genders. Can you say no to a tasty cookie? Everyone prefers cookies, which is why their packaging is designed in an elegant and modern manner to attract customers. To raise the value of your brand, their packing box, like the cookies, must be of high quality. Different designs of custom cookie boxes bring beauty and credibility to retail store displays. These personalised cookie boxes can be imprinted with extra protection to keep the product's quality and freshness. CPP Boxes not only creates attractive packaging boxes, but we also regard the material's quality.
#Custom cookie Boxes#Custom cookie packaging Boxes#Custom cookie Boxes Wholesale#Custom Printed cookie Boxes
0 notes
Text
i haven't made smaller boxes from larger boxes (ingenious) in forever. this was for a purpose but i would enjoy making more somehow.
#my art#cardboard#cardstock#crafts#diy#custom boxes#box core#boxes#box#storage#box pilled#cube pilled#i want to cry#oc#waawaawaa#having icecream rn#chocolate chip cookie dough#green sprinkles#storage chests
3 notes
·
View notes
Text
𝘾𝙪𝙨𝙩𝙤𝙢 𝘾𝙤𝙤𝙠𝙞𝙚 𝘽𝙤𝙭𝙚𝙨 𝙎𝙩𝙮𝙡𝙞𝙨𝙝 𝙖𝙣𝙙 𝙁𝙪𝙣𝙘𝙩𝙞𝙤𝙣𝙖𝙡 𝙋𝙖𝙘𝙠𝙖𝙜𝙞𝙣𝙜 𝙛𝙤𝙧 𝙔𝙤𝙪𝙧 𝙏𝙧𝙚𝙖𝙩𝙨
Enhance your baked goods with our custom cookie boxes. Designed to meet your brand’s specifications, these boxes combine style and practicality, offering a distinctive presentation while keeping your cookies fresh. Perfect for bakeries and special events, our personalized options help your cookies make a lasting impression.
𝐒𝐊𝐔; VPCP13
#cookies boxes#cookies packaging boxes#custom cookies boxes#printed cookies boxes#cookies boxes wholesale
2 notes
·
View notes
Text
I'm rly glad I have the patience to deal with rich people bc a lot of the clients I interact with at my job have more money than I could ever even hope to imagine having and it's. it feels fucking weird. it's just so strange. for the most part it's actually fine but. not to sound like a greedy peasant but I can feel my patience severely wearing thin every time one of them tells me how much they appreciate the work I'm doing at their 7k square foot seasonal mansion but they can't drop like 10 bucks as a tip ever. do you know how much 7k sqft is. that is approximately 35 of my apartments. and you may be thinking 'echo that's like 200sqft that's a tiny ass apartment that's your problem' and you are correct! this is because it was the only decent place within a reasonable distance I could feasibly afford
7k sqft. 35 of my apartments. of course I wouldn't expect to be able to afford something huge. I'm just starting out. but 35 of my apartments. no tip. idk what kind of point I'm trying to make here, maybe nothing, maybe this is stupid (and I'm probably going to delete this whole rant in 5min anyway), but it feels. weird. and I keep thinking about it every single time I clock in to work
#misc.txt#idk. working in airbnbs that are $500+ a night for rich ppl coming up to wine taste n I'm lucky I even get to SEE the interior#spending 4hrs working on some asshole's estate and getting 'tipped' w a half eaten box of stale cookies. yes this actually happened.#like this job is.....fine. (at least it's not retail)#+I dont plan to have it for more than a year ish so nbd. but. like. idk man. it's just. it's something. yk?#overhearing the client is absent on a 6month luxury vacation in spain. vs.#me being able to take 1 week off to 'camp' in my cold ass car in the middle of the mountains#and yeah! I'm lucky+privileged to have the time and money to blow on even that tbh! I have spare money!#but. there's. something about this job. idk if it's really jealousy. it's something else. the customers arent mean. they're giving me work.#supposedly we get large tips towards jan/feb so maybe they tip then. I can hope. just. weird as hell experience#and let me restate I'm not like....poor. it's just#the sheer distance between me and them. wild shit
2 notes
·
View notes
Text
I just...miss my job okay...
#do i think baking cookies would be fun? yes. but i just...don't care about it.#yes this is something i want to do because its fun#but i just dont think im ready to do anything until i can look at a comic book and not cry#like....it wasn't just a job to me#i cared so much. i may have lost the plot around the time my manager barked STAND UP at me.#but i cared everyday. i wanted to make people feel seen. i wanted to make the world better.#i miss working with canva everyday. that stupid fucking frienemy of a program. i miss creating. i miss learning. i miss restocks.#i miss previews. i miss the stupid fucking statues. i miss the stupid chat ding. i miss joe being joe. i miss mike. i miss jeff.#i miss jamie. i miss froggy. i miss tiny. i miss sarah. i miss Trevor. i miss seth. i miss josie.#it doesn't even matter if they didn't love me like i loved them. they were nice to me so i would go to war for them. i have a complex.#i miss them.#i miss the batgirls computer background.#i miss being excited about pride in December. i miss being excited about the doctor who mtg drop. i miss the paper stars.#i miss my staff picks sign. i miss when the shop was collectively ours. i miss the rainbow tape on the one ceiling tile.#i miss the comic of the week being ridiculous to get in and out of the slot. i miss the amount of product counts.#i miss learning about new rpgs and games and comics#i miss reading before we opened#i miss variant covers. i miss pre orders. i miss the sun blinding me mid day. i miss the ridiculous audacity of customers.#i miss “hey. im looking for a comic from this week if you have a sec?” i miss making displays. i miss paint restock.#i miss enthusing with customers over media and comics and books. i miss critical role. i miss dnd. i miss deck boxes. i miss card sleeves.#how dare you fire me and basically tell me i suck at my job. no. fuck you. i suck at YOUR JOB. i was damn good at the job i was hired for.#im so sorry i didnt want to stalk people and was busy finishing the pride display you effectively gave completely to the only gay.#and was finishing the restocks you gave me to finish#you dont get to take away all of my responsibilities and decide that i boil down to my weaknesses instead if playing to my strengths#you dont get to decide that i boil down to my WORST 3 weeks. when i would bleed for that job.#i was GOOD. AT MY JOB. I DID MY JOB.
3 notes
·
View notes
Text
Today is going so smoothly that I MUST be missing something.
#order arrived on time...#customers are being nice...#a regular sent us a box of cookies????#my paperwork and emails are caught up??????#idk what I'm missing but i don't trust today#personal
2 notes
·
View notes
Text
Yeah, that's right, I will throw myself under the mortification bus just to further burn the new Tumblr desktop layout.
#if you're wondering why my old site says 'hello null!'#it's because I had a whole deal where a box would pop up and ask your name#and as long as you didn't clear cookies out the site would remember and greet you by name#obviously Oocities mirrors have lost some of the capabilities of the original site#I mean I see no glow effect around the text or customized font on this version either#I also developed a 'which book character are you?' personality quiz that would give you a different downloadable badge#depending on how you answered the quiz#I honestly don't even fully remember how I rigged that up but I did#what I'm saying is that my fansite was both cooler and also lamer than what you're currently seeing
73K notes
·
View notes
Text
Come to the light-dark() Side
New Post has been published on https://thedigitalinsider.com/come-to-the-light-dark-side/
Come to the light-dark() Side
You’d be forgiven for thinking coding up both a dark and a light mode at once is a lot of work. You have to remember @media queries based on prefers-color-scheme as well as extra complications that arise when letting visitors choose whether they want light or dark mode separately from the OS setting. And let’s not forget the color palette itself! Switching from a “light” mode to a “dark” mode may involve new variations to get the right amount of contrast for an accessible experience.
It is indeed a lot of work. But I’m here to tell you it’s now a lot simpler with modern CSS!
Default HTML color scheme(s)
We all know the “naked” HTML theme even if we rarely see it as we’ve already applied a CSS reset or our favorite boilerplate CSS before we even open localhost. But here’s a news flash: HTML doesn’t only have the standard black-on-white theme, there is also a native white-on-black version.
We have two color schemes available to use right out of the box!
If you want to create a dark mode interface, this is a great base to work with and saves you from having to account for annoying details, like dark inputs, buttons, and other interactive elements.
Live Demo on CodePen
Switching color schemes automatically based on OS preference
Without any @media queries — or any other CSS at all — if all we did was declare color-scheme: light dark on the root element, the page will apply either the light or dark color scheme automatically by looking at the visitor’s operating system (OS) preferences. Most OSes have a built-in accessibility setting for your preferred color scheme — “light”, “dark”, or even “auto” — and browsers respect that setting.
html color-scheme: light dark;
We can even accomplish this without CSS directly in the HTML document in a <meta> tag:
<meta name="color-scheme" content="light dark">
Whether you go with CSS or the HTML route, it doesn’t matter — they both work the same way: telling the browser to make both light and dark schemes available and apply the one that matches the visitor’s preferences. We don’t even need to litter our styles with prefers-color-scheme instances simply to swap colors because the logic is built right in!
You can apply light or dark values to the color-scheme property. At the same time, I’d say that setting color-scheme: light is redundant, as this is the default color scheme with or without declaring it.
You can, of course, control the <meta> tag or the CSS property with JavaScript.
There’s also the possibility of applying the color-scheme property on specific elements instead of the entire page in one fell swoop. Then again, that means you are required to explicitly declare an element’s color and background-color properties; otherwise the element is transparent and inherits its text color from its parent element.
What values should you give it? Try:
Default text and background color variables
The “black” colors of these native themes aren’t always completely black but are often off-black, making the contrast a little easier on the eyes. It’s worth noting, too, that there’s variation in the blackness of “black” between browsers.
What is very useful is that this default not-pure-black and maybe-not-pure-white background-color and text color are available as <system-color> variables. They also flip their color values automatically with color-scheme!
They are: Canvas and CanvasText.
These two variables can be used anywhere in your CSS to call up the current default background color (Canvas) or text color (CanvasText) based on the current color scheme. If you’re familiar with the currentColor value in CSS, it seems to function similarly. CanvasText, meanwhile, remains the default text color in that it can’t be changed the way currentColor changes when you assign something to color.
In the following examples, the only change is the color-scheme property:
Not bad! There are many, many more of these system variables. They are case-insensitive, often written in camelCase or PascalCase for readability. MDN lists 19 <system-color> variables and I’m dropping them in below for reference.
Open to view 19 system color names and descriptions
AccentColor: The background color for accented user interface controls
AccentColorText: The text color for accented user interface controls
ActiveText: The text color of active links
ButtonBorder: The base border color for controls
ButtonFace: The background color for controls
ButtonText: The text color for controls
Canvas: The background color of an application’s content or documents
CanvasText: The text color used in an application’s content or documents
Field: The background color for input fields
FieldText: The text color inside form input fields
GrayText: The text color for disabled items (e.g., a disabled control)
Highlight: The background color for selected items
HighlightText: The text color for selected items
LinkText: The text color used for non-active, non-visited links
Mark: The background color for text marked up in a <mark> element
MarkText: The text color for text marked up in a <mark> element
SelectedItem: The background color for selected items (e.g., a selected checkbox)
SelectedItemText: The text color for selected items
VisitedText: The text visited links
Cool, right? There are many of them! There are, unfortunately, also discrepancies as far as how these color keywords are used and rendered between different OSes and browsers. Even though “evergreen” browsers arguably support all of them, they don’t all actually match what they’re supposed to, and fail to flip with the CSS color-scheme property as they should.
Egor Kloos (also known as dutchcelt) is keeping an eye on the current status of system colors, including which ones exist and the browsers that support them, something he does as part of a classless CSS framework cleverly called system.css.
Declaring colors for both modes together
OK good, so now you have a page that auto-magically flips dark and light colors according to system preferences. Whether you choose to use these system colors or not is up to you. I just like to point out that “dark” doesn’t always have to mean pure “black” just as “light” doesn’t have to mean pure “white.” There are lots more colors to pair together!
But what’s the best or simplest way to declare colors so they work in both light and dark mode?
In my subjective reverse-best order:
Third place: Declare color opacity
You could keep all the same background colors in dark and light modes, but declare them with an opacity (i.e. rgb(128 0 0 / 0.5) or #80000080). Then they’ll have the Canvas color shine through.
It’s unusable in this way for text colors, and you may end up with somewhat muted colors. But it is a nice easy way to get some theming done fast. I did this for the code blocks on this old light and dark mode demo.
Second place: Use color-mix()
Like this:
color-mix(in oklab, Canvas 75%, RebeccaPurple);
Similar (but also different) to using opacity to mute a color is mixing colors in CSS. We can even mix the system color variables! For example, one of the colors can be either Canvas or CanvasText so that the background color always mixes with Canvas and the text color always mixes with CanvasText.
We now have the CSS color-mix() function to help us with this. The first argument in the function defines the color space where the color mixing happens. For example, we can tell the function that we are working in the OKLAB color space, which is a rectangular color space like sRGB making it ideal to mix with sRGB color values for predictable results. You can certainly mix colors from different color spaces — the OKLAB/sRGB combination happens to work for me in this instance.
The second and third arguments are the colors you want to mix, and in what proportion. Proportions are optional but expressed in percentages. Without declaring a proportion, the mix is an even 50%-50% split. If you add percentages for both colors and they don’t match up to 100%, it does a little math for you to prevent breakages.
The color-mix() approach is useful if you’re happy to keep the same hues and color saturations regardless of whether the mode is light or dark.
In this example, as you change the value of the hue slider, you’ll see color changes in the themed boxes, following the theme color but mixed with Canvas and CanvasText:
You may have noticed that I used OKLCH and HSL color spaces in that last example. You may also have noticed that the HSL-based theme color and the themed paragraph were a lot more “flashy” as you moved the hue slider.
I’ve declared colors using a polar color space, like HSL, for years, loving that you can easily take a hue and go up or down the saturation and lightness scales based on need. But, I concede that it’s problematic if you’re working with multiple hues while trying to achieve consistent perceived lightness and saturation across them all. It can be difficult to provide ample contrast across a spectrum of colors with HSL.
The OKLCH color space is also polar just like HSL, with the same benefits. You can pick your hue and use the chroma value (which is a bit like saturation in HSL) and the lightness scales accurately in the same way. Both OKLCH and OKLAB are designed to better match what our eyes perceive in terms of brightness and color compared to transitioning between colors in the sRGB space.
While these color spaces may not explicitly answer the age-old question, Is my blue the same as your blue? the colors are much more consistent and require less finicking when you decide to base your whole website’s palette on a different theme color. With these color spaces, the contrasts between the computed colors remain much the same.
First place (winner!): Use light-dark()
Like this:
light-dark(lavender, saddlebrown);
With the previous color-mix() example, if you choose a pale lavender in light mode, its dark mode counterpart is very dark lavender.
The light-dark() function, conversely, provides complete control. You might want that element to be pale lavender in light mode and a deep burnt sienna brown in dark mode. Why not? You can still use color-mix() within light-dark() if you like — declare the colors however you like, and gain much more fine-grained control over your colors.
Feel free to experiment in the following editable demo:
Using color-scheme: light dark; — or the corresponding meta tag in HTML on your page —is a prerequisite for the light-dark() function because it allows the function to respect a person’s system preference, or whichever single light or dark value you have set on color-scheme.
Another consideration is that light-dark() is newly available across browsers, with just over 80% coverage across all users at the time I’m writing this. So, you might consider including a fallback in your CSS for browsers that lack support for the function.
What makes using color-scheme and light-dark() better than using @media queries?
@media queries have been excellent tools, but using them to query prefers-color-scheme only ever follows the preference set within the person’s operating system. This is fine until you (rightfully) want to offer the visitor more choices, decoupled from whether they prefer the UI on their device to be dark or light.
We’re already capable of doing that, of course. We’ve become used to a lot of jiggery-pokery with extra CSS classes, using duplicated styles, or employing custom properties to make it happen.
The joy of using color-scheme is threefold:
It gives you the basic monochrome dark mode for free!
It can natively do the mode switching based on OS mode preference.
You can use JavaScript to toggle between light and dark mode, and the colors declared in the light-dark() functions will follow it.
Light, dark, and auto mode controls
Essentially, all we are doing is setting one of three options for whether the color-scheme is light, dark, or updates auto-matically.
I advise offering all three as discrete options, as it removes some complications for you! Any new visitor to the site will likely be in auto mode because accepting the visitor’s OS setting is the least jarring default state. You then give that person the choice to stay with that or swap it out for a different color scheme. This way, there’s no need to sniff out what mode someone prefers to, for example, display the correct icon on a toggle and make it perform the correct action. There is also no need to keep an event listener on prefers-color-scheme in case of changes — your color-scheme: light dark declaration in CSS handles that for you.
Adjusting color-scheme in pure CSS
Yes, this is totally possible! But the approach comes with a few caveats:
You can’t use <button> — only radio inputs, or <options> in a <select> element.
It only works on a per page basis, not per website, which means changes are lost on reload or refresh.
The browser needs to support the :has() pseudo-selector. Most modern browsers do, but some folks using older devices might miss out on the experience.
Using the :has() pseudo-selector
This approach is almost alarmingly simple and is fantastic for a simple one-pager! Most of the heavy lifting is done with this:
/* default, or 'auto' */ html color-scheme: light dark; html:has([value="light"]:checked color-scheme: light; html:has([value="dark"]:checked color-scheme: dark;
The second and third rulesets above look for an attribute called value on any element that has “light” or “dark” assigned to it, then change the color-scheme to match only if that element is :checked.
This approach is not very efficient if you have a huge page full of elements. In those cases, it’s better to be more specific. In the following two examples, the CSS selectors check for value only within an element containing id="mode-switcher".
html:has(#mode-switcher [value="light"]:checked) color-scheme: light /* Did you know you don't need the ";" for a one-liner? Now you do! */
Using a <select> element:
Using <input type="radio">:
We could theoretically use checkboxes for this, but since checkboxes are not supposed to be used for mutually exclusive options, I won’t provide an example here. What happens in the case of more than one option being checked? The last matching CSS declaration wins (which is dark in the examples above).
Adjusting color-scheme in HTML with JavaScript
I subscribe to Jeremy Keith’s maxim when it comes to reaching for JavaScript:
JavaScript should only do what only JavaScript can do.
This is exactly that kind of situation.
If you want to allow visitors to change the color scheme using buttons, or you would like the option to be saved the next time the visitor comes to the site, then we do need at least some JavaScript. Rather than using the :has() pseudo-selector in CSS, we have a few alternative approaches for changing the color-scheme when we add JavaScript to the mix.
Using <meta> tags
If you have set your color-scheme within a meta tag in the <head> of your HTML:
<meta name="color-scheme" content="light dark">
…you might start by making a useful constant like so:
const colorScheme = document.querySelector('meta[name="color-scheme"]');
And then you can manipulate that, assigning it light or dark as you see fit:
colorScheme.setAttribute("content", "light"); // to light mode colorScheme.setAttribute("content", "dark"); // to dark mode colorScheme.setAttribute("content", "light dark"); // to auto mode
This is a very similar approach to using <meta> tags but is different if you are setting the color-scheme property in CSS:
html color-scheme: light dark;
Instead of setting a colorScheme constant as we just did in the last example with the <meta> tag, you might select the <html> element instead:
const html = document.querySelector('html');
Now your manipulations look like this:
html.style.setProperty("color-scheme", "light"); // to light mode html.style.setProperty("color-scheme", "dark"); // to dark mode html.style.setProperty("color-scheme", "light dark"); // to auto mode
I like to turn those manipulations into functions so that I can reuse them:
function switchAuto() html.style.setProperty("color-scheme", "light dark"); function switchLight() html.style.setProperty("color-scheme", "light"); function switchDark() html.style.setProperty("color-scheme", "dark");
Alternatively, you might like to stay as DRY as possible and do something like this:
function switchMode(mode) html.style.setProperty("color-scheme", mode === "auto" ? "light dark" : mode);
The following demo shows how this JavaScript-based approach can be used with buttons, radio buttons, and a <select> element. Please note that not all of the controls are hooked up to update the UI — the demo would end up too complicated since there’s no world where all three types of controls would be used in the same UI!
I opted to use onchange and onclick in the HTML elements mainly because I find them readable and neat. There’s nothing wrong with instead attaching a change event listener to your controls, especially if you need to trigger other actions when the options change. Using onclick on a button doesn’t only work for clicks, the button is still keyboard-focusable and can be triggered with Spacebar and Enter too, as usual.
Remembering the selection for repeat visits
The biggest caveat to everything we’ve covered so far is that this only works once. In other words, once the visitor has left the site, we’re doing nothing to remember their color scheme preference. It would be a better user experience to store that preference and respect it anytime the visitor returns.
The Web Storage API is our go-to for this. And there are two available ways for us to store someone’s color scheme preference for future visits.
localStorage
Local storage saves values directly on the visitor’s device. This makes it a nice way to keep things off your server, as the stored data never expires, allowing us to call it anytime. That said, we’re prone to losing that data whenever the visitor clears cookies and cache and they’ll have to make a new selection that is freshly stored in localStorage.
You pick a key name and give it a value with .setItem():
localStorage.setItem("mode", "dark");
The key and value are saved by the browser, and can be called up again for future visits:
const mode = localStorage.getItem("mode");
You can then use the value stored in this key to apply the person’s preferred color scheme.
sessionStorage
Session storage is thrown away as soon as a visitor browses away to another site or closes the current window/tab. However, the data we capture in sessionStorage persists while the visitor navigates between pages or views on the same domain.
It looks a lot like localStorage:
sessionStorage.setItem("mode", "dark"); const mode = sessionStorage.getItem("mode");
Which storage method should I use?
Personally, I started with sessionStorage because I wanted my site to be as simple as possible, and to avoid anything that would trigger the need for a GDPR-compliant cookie banner if we were holding onto the person’s preference after their session ends. If most of your traffic comes from new visitors, then I suggest using sessionStorage to prevent having to do extra work on the GDPR side of things.
That said, if your traffic is mostly made up of people who return to the site again and again, then localStorage is likely a better approach. The convenience benefits your visitors, making it worth the GDPR work.
The following example shows the localStorage approach. Open it up in a new window or tab, pick a theme other than what’s set in your operating system’s preferences, close the window or tab, then re-open the demo in a new window or tab. Does the demo respect the color scheme you selected? It should!
Choose the “Auto” option to go back to normal.
If you want to look more closely at what is going on, you can open up the developer tools in your browser (F12 for Windows, CTRL+ click and select “Inspect” for macOS). From there, go into the “Application” tab and locate https://cdpn.io in the list of items stored in localStorage. You should see the saved key (mode) and the value (dark or light). Then start clicking on the color scheme options again and watch the mode update in real-time.
Accessibility
Congratulations! If you have got this far, you are considering or already providing versions of your website that are more comfortable for different people to use.
For example:
People with strong floaters in their eyes may prefer to use dark mode.
People with astigmatism may be able to focus more easily in light mode.
So, providing both versions leaves fewer people straining their eyes to access the content.
Contrast levels
I want to include a small addendum to this provision of a light and dark mode. An easy temptation is to go full monochrome black-on-white or white-on-black. It’s striking and punchy! I get it. But that’s just it — striking and punchy can also trigger migraines for some people who do a lot better with lower contrasts.
Providing high contrast is great for the people who need it. Some visual impairments do make it impossible to focus and get a sharp image, and a high contrast level can help people to better make out the word shapes through a blur. Minimum contrast levels are important and should be exceeded.
Thankfully, alongside other media queries, we can also query prefers-contrast which accepts values for no-preference, more, less, or custom.
In the following example (which uses :has() and color-mix()), a <select> element is displayed to offer contrast settings. When “Low” is selected, a filter of contrast(75%) is placed across the page. When “High” is selected, CanvasText and Canvas are used unmixed for text color and background color:
Adding a quick high and low contrast theme gives your visitors even more choice for their reading comfort. Look at that — now you have three contrast levels in both dark and light modes — six color schemes to choose from!
ARIA-pressed
ARIA stands for Accessible Rich Internet Applications and is designed for adding a bit of extra info where needed to screen readers and other assistive tech.
The words “where needed” do heavy lifting here. It has been said that, like apostrophes, no ARIA is better than bad ARIA. So, best practice is to avoid putting it everywhere. For the most part (with only a few exceptions) native HTML elements are good to go out of the box, especially if you put useful text in your buttons!
The little bit of ARIA I use in this demo is for adding the aria-pressed attribute to the buttons, as unlike a radio group or select element, it’s otherwise unclear to anyone which button is the “active” one, and ARIA helps nicely with this use case. Now a screen reader will announce both its accessible name and whether it is in a pressed or unpressed state along with a button.
Following is an example code snippet with all the ARIA code bolded — yes, suddenly there’s lots more! You may find more elegant (or DRY-er) ways to do this, but showing it this way first makes it more clear to demonstrate what’s happening.
Our buttons have ids, which we have used to target them with some more handy consts at the top. Each time we switch mode, we make the button’s aria-pressed value for the selected mode true, and the other two false:
const html = document.querySelector("html"); const mode = localStorage.getItem("mode"); const lightSwitch = document.querySelector('#lightSwitch'); const darkSwitch = document.querySelector('#darkSwitch'); const autoSwitch = document.querySelector('#autoSwitch'); if (mode === "light") switchLight(); if (mode === "dark") switchDark(); function switchAuto() html.style.setProperty("color-scheme", "light dark"); localStorage.removeItem("mode"); lightSwitch.setAttribute("aria-pressed","false"); darkSwitch.setAttribute("aria-pressed","false"); autoSwitch.setAttribute("aria-pressed","true"); function switchLight() html.style.setProperty("color-scheme", "light"); localStorage.setItem("mode", "light"); lightSwitch.setAttribute("aria-pressed","true"); darkSwitch.setAttribute("aria-pressed","false"); autoSwitch.setAttribute("aria-pressed","false"); function switchDark() html.style.setProperty("color-scheme", "dark"); localStorage.setItem("mode", "dark"); lightSwitch.setAttribute("aria-pressed","false"); darkSwitch.setAttribute("aria-pressed","true"); autoSwitch.setAttribute("aria-pressed","false");
On load, the buttons have a default setting, which is when the “Auto” mode button is active. Should there be any other mode in the localStorage, we pick it up immediately and run either switchLight() or switchDark(), both of which contain the aria-pressed changes relevant to that mode.
<button id="autoSwitch" aria-pressed="true" type="button" onclick="switchAuto()">Auto</button> <button id="lightSwitch" aria-pressed="false" type="button" onclick="switchLight()">Light</button> <button id="darkSwitch" aria-pressed="false" type="button" onclick="switchDark()">Dark</button>
The last benefit of aria-pressed is that we can also target it for styling purposes:
button[aria-pressed="true"] background-color: transparent; border-width: 2px;
Finally, we have a nice little button switcher, with its state clearly shown and announced, that remembers your choice when you come back to it. Done!
Outroduction
Or whatever the opposite of an introduction is…
…don’t let yourself get dragged into the old dark vs light mode argument. Both are good. Both are great! And both modes are now easy to create at once. At the start of your next project, work or hobby, do not give in to fear and pick a side — give both a try, and give in to choice.
#:has#Accessibility#ADD#API#applications#approach#aria#Articles#background#Blue#blur#box#browser#buttons#cache#canvas#Capture#change#classes#code#Code Snippet#coding#Color#colors#content#cookies#course#CSS#custom properties#Dark
0 notes
Link
Discover the magic of Vox Machina in a bottle! Critical Role has teamed up with Find Familiar Spirits to bring you Sandkheg's Hide, a limited-edition bourbon inspired by the iconic in-game drink. Perfect for fans of Critical Role and whiskey enthusiasts alike! Don't miss out on this unique collaboration. #CriticalRole #FindFamiliarSpirits
#found#Posted in: Critical Role#Nerd Food#Pop Culture | Tagged: Find Familiar Spirits#Matthew Lillard#Sandkheg's Hide#whiskey Critical Role and Find Familiar Spirits have come together to make a whiskey calling back to an in-game drink called the Sandkheg's#wax seal#and medallion. * Find Familiar Spirits founded by Matthew Lillard#known for pop culture roles. Critical Role announced this morning they have partnered with Matthew Lillard's Find Familiar Spirits to relea#it comes from the Vox Machina campaign#in which they ordered an alcoholic drink so powerful (and expensive) that it basically numbed and inebriated the person who drank it for ho#Episode 65.) So#of course#they made a super premium whiskey to match the Marquet beverage#as this is a custom-blended small-batch bourbon in its own bottle designed to match the one Matthew Mercer described in the game. We have m#as it is now up for pre-order via the Quest's End website and their distributor Seelbach's. And if you wish to learn more about Find Famili#you can check out our interview with Lillard. Credit: Find Familiar SpiritsSANDKHEG'S HIDE Inspired by the description of the bottle in the#the exciting new bourbon comes in dark green glass with a distressed label#and exclusive coin medallion around its neck#tucked inside a burlap bag. Designed to look like an in-world shipping crate#the whiskey's unique box will also contain a journal from the Exandrian maker of Sandkheg's Hide that tells the story of this uniqu#written by Jasmine Bhullar with all-original art by illustrator Tyler Walpole and a map by fantasy cartographer Deven Rue. Quest's End mast#with base bourbon notes of baked apple#brown spice#shortbread cookie#and oak blended with whiskey finished in vermouth barrels for herbaceous notes and whiskey finished in sherry barrels for dried red fruit a#Find Familiar Spirits recently burst onto the super-premium spirits scene with three enormously successful launches#Quest's End Paladin
1 note
·
View note
Text
Tribrid Packaging
We at Tribrid have years of experience working with brands across all niches be it beauty, healthcare, tech, etc. Our years of experience combined with the latest cookie boxes printing technology will allow you to get the best design and packaging solutions out there for product boxes wholesale. So what are you waiting for? Book a call or request a quote to get started today.
https://tribridpackaging.com/custom-cookie-boxes/
1 note
·
View note
Text
Catherine's Macarons
Website: https://www.catherinemacarons.com/
Address: Block 62A Strathmore Avenue, Queenstown, Singapore
Catherine's Macarons in Singapore offers a delightful range of freshly homemade desserts, perfect for various occasions. Specializing in macarons, cakesicles, cupcakes, and sugar cookies, the business prides itself on high-quality ingredients and customizable options, including personalized designs for events. With islandwide delivery, they cater to a wide range of tastes and preferences, making celebrations special with their exquisite and unique dessert offerings.
Facebook: https://www.facebook.com/CatherineMacarons/
Instagram: https://www.instagram.com/catherine_macarons_singapore/
YouTube: https://www.youtube.com/watch?v=RFbwEUseaI0
TikTok: https://www.tiktok.com/@catherinemacarons
Keywords:
Desserts near me
Bakery near me
Macarons Singapore
Cupcakes near me
Sugar cookies
Cookies near me
Macarons near me
Confectionery near me
Dessert catering near me
Macaron boxes near me
Decadent dessert platters
Specialty baked goods
customized cakesicles
gourmet cupcakes
personalized desserts
birthday party treats
homemade confectionery
quality ingredients desserts
islandwide delivery sweets
special occasion bakery
boutique cupcakes
unique dessert designs
party customization desserts
celebration macaron boxes
bespoke bakery singapore
handcrafted sweets
artisanal confectionery
dessert customization options
premium ingredients baking
tailored party confectionery
exquisite cake pops
luxury sweet treats
handmade confections
artistic pastry creations
elegant dessert catering
flavorsome cookie assortments
stylish celebration cakes
exclusive dessert delivery
artisan sweets and treats
delightful baked goods
custom confectionery creations
delectable sweet indulgence
bespoke cake designs
gourmet treat delivery
elegant dessert tables
personalized cake pops
premium pastry delivery
unique celebration sweets
tantalizing dessert options
exquisite cupcake designs
artful cookie arrangements
elegant party desserts
handcrafted sweet delicacies
customized dessert platters
bespoke pastry creations
unique macaron assortments
luxury celebration cakes
artisan dessert collections
queenstown sweet delivery
singapore dessert catering
macarons in queenstown
customized cakesicles singapore
gourmet cupcakes delivery queenstown
sugar cookies in singapore
personalized desserts queenstown
birthday treats delivery singapore
homemade confectionery in queenstown
quality desserts singapore
islandwide delivery sweets queenstown
special occasion bakery in singapore
boutique cupcakes delivery queenstown
unique dessert designs singapore
party customization desserts queenstown
celebration macaron boxes singapore
bespoke bakery in queenstown
handcrafted sweets delivery singapore
artisanal confectionery queenstown
dessert customization options singapore
cakesicles near me
birthday treats near me
quality desserts near me
sweets delivery near me
bespoke bakery near me
handcrafted sweets near me
artisanal confectionery near me
celebration desserts near me
#Desserts near me#Bakery near me#Macarons Singapore#Cupcakes near me#Sugar cookies#Cookies near me#Macarons near me#Confectionery near me#Dessert catering near me#Macaron boxes near me#Decadent dessert platters#Specialty baked goods#customized cakesicles#gourmet cupcakes#personalized desserts#birthday party treats#homemade confectionery#quality ingredients desserts#islandwide delivery sweets#special occasion bakery#boutique cupcakes#unique dessert designs#party customization desserts#celebration macaron boxes#bespoke bakery singapore#handcrafted sweets#artisanal confectionery#dessert customization options#premium ingredients baking#tailored party confectionery
1 note
·
View note
Text
Yandere Head Canons:
Build-a-Yandere
Yandere Android x GN Reader
You were lonely. A fact that you eventually came to terms with when you realized you’re the only one in your friend group that still remained single while they started families.
You felt so far behind everyone else. The self doubt crept its fingers into your mind and wouldn’t let go… so you did what you did best. You drowned yourself in the internet. The perfect digital escape from reality…
Dating apps did little to appease your loneliness, but they filled a bit of the void. It wasn’t until you were one wine bottle deep and scrolling through your favorite social media app that you stumbled upon an advertisement to sample a product.
Build-a-boyfriend. A company that allowed its customers to pick every single aspect out for their ideal man. From personality to physical appearance and even to penis size. You could build your own man!
A slurred chuckle escaped your lips. Should you apply to test out their product? It’s not like you had anything to lose… what could be the harm in giving it a shot?
And so you began to fill out the quiz. You wanted a soft and gentle boyfriend. One of those golden retriever boys who only had eyes for you. The kind of guy who had a muscular yet soft build. A man who worked out but would never say no to a cookie. A taller guy who always knew what to say and was cuddly. The kind of guy who was obsessed with you.
The quiz even asked you at the end if you were sure you wanted an obsessive man. Of course you were! Wasn’t that what most people wanted? A partner who was only and all about them? That’s what obsession was! Right?
And so your drunk self finished this entire personality quiz until it went to the physical appearance and the sexual bit. A perverted smile now on your face.
“Let’s give him a big penis.” You laughed as you guided your cursor to drag the length bar to eight inches long. “I want to be filled.”
And then you selected caramel skin tone, cinnamon eyes, and black hair. A smile on your face. You were going to make this android a Latin lover.
“What should I name him…” you thought for a moment before laughing. “Alejandro! Like the lady Gaga song.”
Once you completed the entire quiz, your phone screen lit up a pastel pink. A red heart now in the center of the screen. “Your boyfriend will be delivered to you in a month! Thanks for choosing Build-a-boyfriend!”
And you ended up falling asleep in a puddle of your own drool. Weren’t you just pathetic? Filling out a quick from some questionable website all because you were lonely… imagine you were just scammed? God, why did you not have a boyfriend? Ever since your ex broke up with you, you fell apart. Why weren’t you good enough for a real man?
A month went by in a flash and you were shocked to see the giant package on your doorstep. An envelope attached to the box as well as a large note that said, “No returns!”
This had to be some kind of prank… there was no way this was real- holy shit.
You opened the crate and came face to face with your ideal man… the one you built! Alejandro!
The human like android’s eyes fluttered open, his face quickly lit up once he spotted you. “(Your name)? Are you my girlfriend?!”
You were quickly scooped up into his surprisingly warm arms, the android had a heavy scent of spice and oranges. His nose buried into your neck as he pressed kisses all over your cheeks. “It’s so nice to finally be with you… I’ll be with you from now on!”
Alejandro was a chipper robot. He did household work and made sure you took care of yourself. It was fascinating how human he was… you only knew he wasn’t because of his lack of a beating heart. His body still produced heat, like a furnace, but it wasn’t as comforting as a human presence.
Alejandro assimilated into your life with ease. The weeks quickly rolled into months and he never let you ignore his presence. He was very clingy.
Now the sex was another story. Alejandro was so giving, it was surprising. He often went down on you when he sensed you were stressed. His tongue greedily lapped at your hole as you laid in your bed while his hands held your cheeks apart. His hand pawed at your sex in eagerness. “I want you… want you.”
And Alejandro had you bent over the side of your bed, his fat cock stuffed deep in your tight hole. His hand wrapped around your throat and his tongue shoved in between your lips while his other smacked your bottom between rough thrusts. The sex was amazing… it was always so good.
And Alejandro often checked on you after the deed was done. His warm body curled into yours as he praised you. Yet it began to fill you with disappointment. Alejandro wasn’t a real man. He wasn’t human… he was an android. A robot. Alejandro didn’t know what love was, he was programmed to love you.
So you tried to distance yourself from Alejandro. You felt sickened with yourself for messing around with an android instead of a real man. And this entire thought process stemmed from your friends who expressed disgust in people who fucked robots instead of actual humans. And that filled you with fear. Would they abandon you if you didn’t get rid of Alejandro? Would they think you were disgusting?
“If you want, I could set you up with my cousin!” One of your friends smiled at you as you bit your fingernails. “He’s also single so it should work! I’ll swing by in a week to give you the details!”
Yes. You would take them up on their offer. You just had to get rid of Alejandro first… but how?
A few days had went by and you greatly underestimated Alejandro’s obsession. The android couldn’t handle your avoidance. He began to turn up his affection to the max.
He cleaned until you could see your reflection on the floor. He began to go out of the house to pick you wild flowers. Alejandro even began to be more physically affectionate than he was.
“Did I do something wrong? I’m sorry.” Alejandro cried into your arms as he held you. “Please tell me what’s wrong… please. I can fix it.”
“Alejandro… it’s just that you’re not a human man.” You sighed softly. “And I-“
“Is it because I don’t have a heart?” Alejandro softly asked you, his cinnamon eyes now dark like the night sky. “I can’t produce semen? Am I not a comfortable temperature? Or does my skin not feel human enough?”
“I’m sorry-“
“Then I can fix it! I will fix it!” Alejandro held your hands firmly in his. His eyes filled with determination. “I’m your boyfriend! I will be anything you want me to be!”
You just held the android who pulled you into a tight hug. His nose buried into your chest like a lost child. Alejandro then smiled into your skin. He would fix this… he wouldn’t let you abandon him! You made him! You had to take responsibility…
Imagine your horror to come home to see your friend skinned alive as Alejandro held their heart in his hands, the organ still beating from the fresh kill. A big smile on his handsome face.
“I have a heart now! I’ll find all the parts you like and add them in! So please don’t abandon me!”
Just what kind of monster have you created?
“You don’t need some human man to be your match because you have me!” Tears fell down your face when Alejandro tried to wipe your tears away with his bloody hands. “I’m your perfect man, (your name). You made me this way.”
#yandere imagine#yandere fic#yandere#yandere obsession#yandere oc#yandere original character#yandere boy#yandere male#yandere android#yandere robot#yandere imagines#yandere concept#yandere scenarios#yandere insert#gn reader#gender neutral insert#yandere smut#yandere headcanons#yandere short story#original character#original work#yandere x y/n#yandere x you#yandere x reader#yandere x darling#tw.smut#obsessive yandere#obsessive love#lovesick#limerence
3K notes
·
View notes
Text
Custom Cookies Boxes
We need cookie boxes to present and prevent cookies. @verdancepackaging provides the facility of custom cookie boxes. These boxes are made from Eco-friendly materials like cardboard or kraft paperboard to ensure a friendly environment and to make the cookies remain fresh and intact during storage and transportation. Customization allows you to design boxes with the company logo, patterns, or a particular event or personalized messages. These cookie boxes are available in different shapes and sizes.
#custom cookies boxes#printed cookies boxes#cookies boxes wholesale#bespoke cookies boxes#cookies box packaging
0 notes
Text
youtube
#Cookies#Cookies box#Cookies boxes#Cookies packaging#cookies packaging boxes#custom cookies boxes#custom cookies packaging#wholesale cookies boxes#wholesale cookies packaging#Bakery boxes#bakery packaging#Cookies Shop#Cookies business#Cookies seller#Bakery business#bakery shop#Wholesale bakery boxes#wholesale bakery boxes#Retail packaging#Retail boxes#Custom Packaging#Custom boxes#packaging#packaging boxes#Youtube
0 notes